What my code does: I have an image and on above of that image I have various other images, few of which are hidden and few of which are shown (it is decided on runtime). So I'm using HTML2Canvas to convert my main div into an image and then downloading that image.
Problem: Image is perfectly downloaded on laptops, desktops and android phones BUT image comes blank on IOS.
Testing link: http://testing.mabdurrehman.com/ -> You may click on items to place on vest, save vest, view vest and then try downloading on IOS.
JS Code:
<script>
var img;
html2canvas($('#vests-section'),
{
onrendered: function(canvas)
{
img = canvas.toDataURL();
}
});
function download_img(el) {
el.href = img;
}
Any help would be highly aprreciated.
Let me know if there's any other good logic!
Thank you :)
If the goal is ultimately to print the image, then I suggest looking into a server side html to image/pdf rendering/generating solution, such as mpdf, to avoid the hassle.
Related
I am facing this strange issue on some ios devices. The problem is that some images are displaying entirely while some are rendering only partially like half or even less, but when I open the same site on some other ios device or any android device, it is rendering fully. Not sure what's the issue. Btw I am adding images to the DOM via JavaScript as I am receiving them through an API.
Also, I noticed that this issue only occurs for the starting images and not on the ending images!
In total there are like 6 images.
Please find attached the screenshot.
The starting 2 images as you can see are less than half rendered and the later ones are fully rendered. Also, from dev tools when I hover over the image src, it is showing the complete images so which confirms that there is some issue on the frontend side. Kindly help me with this!
This is the code for adding images:
overlayData.overlays.forEach((overlay) => {
let thumbnail = document.createElement("img");
thumbnail.className = "swiper-slide canvas-edit-thumbnail overlay";
thumbnail.src = overlay.image;
thumbnail.addEventListener("click", () => {
overlayImgPreview.style.display = "block";
overlayImgPreview.src = thumbnail.src;
overlayAdded = true;
});
overlayThumbnails.appendChild(thumbnail);
});
I'm having a little issue with printing canvas elements using onClick and a javascript function to print the canvas elements on two pages within the same print job.
Right now I'm using jsPDF to create downloadable PDF's for the user to save. This is working as intended.
I also want to create a print feature that prints each canvas as a page.
Using the autoprint feature in jsPDF looked like an obvious answer, but unfortunately I've only been able to get it to spit out the canvas pages in portrait format jammed together on the same page. I want to print these canvas elements in landscape with each printed on it own page, but within the same print job.
I've looked around a bit at other javascript solutions for printing images, but those all assume an external source for the image. I need a solution like that, only pointing to the toDataURL() that I've already created.
I'm sure this has been answered somewhere before, but so far I haven't been able to piece it together correctly.
Here's what I've cobbled together for the jsPDF which spits out the portrait format listed above that I don't want.
function print() {
ctx1.drawImage(c2,0,0);
ctx1.drawImage(c3,0,0);
var imgData1 = planner1.toDataURL();
var imgData2 = planner2.toDataURL();
var pdf = new jsPDF('l', 'pt', 'letter');
pdf.addImage(imgData1, 'PNG', 0, 0, 0, 0, 'IMG1', 'fast');
pdf.addPage();
pdf.addImage(imgData2, 'PNG', 0, 0, 0, 0, 'IMG2', 'fast');
pdf.autoPrint();
}
If anyone knows how to manipulate autoPrint() to support different sizes and formats, I'd love to hear about it since jsPDF documentation is a bit wanting.
Otherwise, I'd go for creating two letter sized png images that can be printed in the same print job as the other option.
I'd be eternally grateful for any assistance with this.
Well jsPDF wasn't going to get it done so I went the png route. Not exactly the most elegant solution (would have preferred to not to have to open another window and then close it) but it prints exactly what I want....
<script>
function print() {
ctx1.drawImage(c2,0,0);
ctx1.drawImage(c3,0,0);
var win = window.open();
win.document.write("<img src='"+planner1.toDataURL()+"'/><img src='"+planner2.toDataURL()+"'/>");
win.print();
win.window.close();
window.location.href = '../php/planner.php?pln=<?php echo $user ?>';
}
</script>
I also added some css to ensure the headers and footers don't print.
I'm taking a screenshot of my webpage using the html2canvas plugin and it works really well.
However, one of the divs on the page can be zoomed, which seems to cause problems when the screenshot is taken.
This is the code which takes the screenshot.
function screenshot(fileName){
html2canvas(document.body, {
onrendered: function(canvas) {
var myImage = canvas.toDataURL("image/png");
var image = myImage.replace('data:image/png;base64','');
window.open(myImage);
}
});
Is there an easy way to update the dom so that when the div is zoomed, html2canvas takes a screenshot of the latest webpage, or is this not possible.
Does anybody have any experience of working with any other plugins which may be a good alternative?
Thanks for any help!
Try to write below lines of code just below your code to zoom div / image in javascript
html2canvas(document.body, {
onrendered: function(canvas) {
var myImage = canvas.toDataURL("image/png");
var image = myImage.replace('data:image/png;base64','');
window.open(myImage);
}
});
I have a problem with firefox. On my website I have many images. When I browse through pages in Firefox, border and image title is visible while image is loading. Once it finishes downloading, this border/title disappears and is replaced with an image.
This happens only in firefox. Chrome and other browsers load images without any borders and titles which looks much 'cleaner'. In words, these borders produced by firefox are ugly.
Can I remove that, replace with an loader or something of this sort? I tried adding css loader with background-image:url()... thinking these borders won't be visible, however, they are still there.
How do sites like pinterest, dribbble and others deliver images without producing border in firefox?
Thank you
You can use the :-moz-loading psuedo-class to set it to not appear. Something like this should work:
img:-moz-loading {
visibility: hidden;
}
An alternative to this is something like an AJAX loading script, which will load the image in the background and display a loading dialog, or animation. There are a lot of techniques for doing this, and searching here or on Google should prompt many many many results on how to do this effectively.
You don't need to explicitly wait for load using CSS. You can do this in javascript as well.
var img = document.getElementById("some-image");
img.style.display = "none";
//...
//add to dom etc...
//..
img.onload = function () {
img.loaded = true;
img.style.display = "inherit";
}
I can't find any example for using FileReader.readAsDataURL and show the result image in a container with the right image orientation.
All the portrait images coming from my camera and iPhone devices have this issue. Only the portrait photos saved with adobe photoshop seem to not have this issue.
Here is one of the example system that I've found in the internet. My code is very similar:
http://www.onlywebpro.com/demo/file_reader/reader01.html
Notice when uploading this photo that it's loaded in landscape mode: http://www.rafaelsanches.com/IMG_3786.JPG
Notice that the image actually displays in landscape when using the browser to download it. When you save it to the disk and open with the finder it is previewed in portrait. (Probably the finder is clever to use the exif info)
Using exif.js I have discovered that the example image has an Orientation=8. The photos that are saved using photoshop have an Orientation=1.
Now, how do you guys suggest that I go about this? Should I plot it in a canvas and rotate depending on the exif information? Someone has a good tutorial about this? Have anyone faced this problem before?
I actually had this problem today and resolved it...
After the line from the example where the image is created...
This is what I've done
var image = $(".uploaded");
var img = new Image();
img.src = e.target.result;
if (img.complete) { // was cached
if (img.height < img.width) {
$(image).addClass("landscape").removeClass("portrait");
}
else {
$(image).addClass("portrait").removeClass("landscape");
}
}
else { // wait for decoding
img.onload = function () {
if (img.height < img.width) {
$(image).addClass("landscape").removeClass("portrait");
}
else {
$(image).addClass("portrait").removeClass("landscape");
}
}
}