html2canvas doesnt work when elements are zoomed - javascript

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);
}
});

Related

HTML2Canvas giving blank images on IOS

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.

Convert a div to image without canvas

I need to generate an image with a corner ribbon, which musn't be an image since the text inside it changes.
Once it's generated, I need the div (the image + the ribbon) to be saved as an image, but I'm not able to do it with html2canvas also because I don't have the images, I just have the link (and saving them would take too much time). Is there another method?
An answer to this similar question generated this interesting fiddle. I think that you could adapt this for your use.
It's essentually this javascript:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});

html2canvas screenshot capturing current window, not entire body

Trying to capture a screenshot of the entire body of a page (including the fields filled in by user) in javascript, but html2canvas only captures the current window, even when I set the height to a huge number. The html2canvas website examples appear to have my desired functionality, but I'm not able to understand what they're doing differently.
<button id="pdfbutton" type="button">Click Me!</button>
<script type="text/javascript">
$( "#pdfbutton" ).click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
console.log(img);
document.body.appendChild(canvas);
}
// height: 10000
});
});
</script>
Please let me know if there are any other ways to capture a screenshot on a button click in javascript (without inserting a URL, because the user fills in fields on my page).
Solved this problem by removing style attribute (height, position) which does not support by html2canvas and adding it after capturing the screenshot. In my case I faced problem with position.
$('.element').css('position','initial'); // Change absolute to initial
$my_view = $('#my-view');
var useHeight = $('#my-view').prop('scrollHeight');
html2canvas($my_view[0], {
height: useHeight,
useCORS: true,
allowTaint: true,
proxy: "your proxy url",
onrendered: function (canvas) {
var imgSrc = canvas.toDataURL();
var popup = window.open(imgSrc);
$('.element').css('position','absolute');
}
});
This will take screenshot of the whole screen including scrollable part. check this solution
Html2Canvas has an issue which forces it to render an element from the top window's boundary. You may consider scrolling to the top of the element.
The second issue is overflow handling. Set overflow: visible on the parent element and remove it after export.

Wait for image added to CSS to load - JQuery

I have an image and I want to draw on it. To do that, I use jQuery to hide the image:
$("img").hide();
And then I create a canvas and put it in the same div with id drawing in the html. I then set the background of the canvas to be the same as the img src for the image I hid. This makes it look like an image but now it is actually a canvas with the image as it's background. I do this by:
$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();
The issue I am having is that sometimes, the image isn't displayed in the canvas and the canvas is not the size of the image. I think it's probably because of some loading issue. How can I wait for the canvas to have the image displayed in the background for sure? Thank you
Edit: Note that in the DOM, the canvas always has the right src. It just doesn't display it
Edit 2: Here's the JSfiddle. Here, everything seems fine but I have a lot more going on in my code including fetching stuff from the server so it's slower there. Hope this helps you guys to understand the problem: http://jsfiddle.net/wL3ezLke/2/
Thanks again
You need to use:
$(function(){
// Code executed once the DOM is loaded.
});
Official documentation:
https://api.jquery.com/ready/
If I understand correctly your problem is knowing when the image loaded (from what you describe it could be a lot of other problems though).
To test if an image has loaded it's pretty simple.
var $img = $('#hiddenImg');
if ($img[0].complete) doCanvasStuff();
else {
$img.on('load', function(e) {
var $canvas = $('#drawCanvas');
$canvas.css({width: $img.width(), height: $img.height()});
//you can go ahead with the background image, but this is preferable
var ctx = $canvas[0].getContext("2d");
ctx.drawImage(img,0,0);
}
}
This should make sure you canvas loads an image only after it was loaded, or do canvas stuff right away if image was loaded, fiddle
Change
$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();
to
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();
$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
so the height and width are set before the image goes into the background.

canvas not loading in chrome

I'm learning canvas in html 5 and I want to manipulate an image in the canvas. However, I'm facing a roadblock in the first step itself. I am not able to display the image on the canvas.
Please look at this fiddle I created - http://jsfiddle.net/XsP76/
specifically, this is my javascript function.
$( document ).ready( function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("carice");
ctx.drawImage(img, 10, 10);
});
The image is displayed in the fiddle, in firefox but not in chrome. What is going going wrong. Thanks for the help!
Works fine here in Chrome / Canary.
I noticed you insert <body> tags in your fiddle; that makes double body tags as jsfiddle do this for you.
If you go to the source for that frame you will see:
...
</head>
<body>
<body>
....
Try this update:
http://jsfiddle.net/AbdiasSoftware/XsP76/2/

Categories

Resources