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");
});
}
});
});
});
Related
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.
This code below,
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inpFile").change(function () {
readURL(this);
});
shows image like this below(this is a 2 MB size image);
horizontal view on image file read
I have solved this problem with this code;
$('#inpFile').change(function (e) {
var file = e.target.files[0];
canvasResize(file, {
width: 300,
height: 0,
crop: false,
quality: 100,
callback: function (data, width, height) {
$("#img_").attr('src', data);
}
});
});
I post this file to generic handler then i save it to the file. The image saving to file right rotation but when i try to show them in codebehind with innerHtml it again displays horizontal. (Like this horizontal view on slider)
How can I solve this problem? (I have tested when the image size small no problem but if it s big then problem starts)
It looks like your image is actually horizontal, but has the orientation meta attribute set to 90 degrees. Such images are automatically rotated by modern image editors (and some browsers when directly linked to), thanks to the information provided by the metadata tag, which could mean why you think it is vertical.
With CSS:
Try applying this css rule to your page and test it with Firefox or Safari:
img {
image-orientation: from-image;
}
However it is only supported by Firefox and Safari at the moment.
With a 3rd party tool (server-side):
If you are concerned by browser compatibility, you will have to process your images on server-side to remove the metadata and rotate them. Imagemagick can do this with -auto-orient
With Javascript (client-side, browser compatible):
Edit: You can also do this reliably on client side if you parse the metadata and rotate the image accordingly. Or just use JavaScript-Load-Image which can do it for you! Import load-image.all.min.js in your page then just call the loadImage function :
loadImage(
input.files[0],
function (img) {
// this callback will be called with the correctly oriented
// image element, inject it in your page ay way you want
document.body.appendChild(img);
},
{maxWidth: 600} // Options, check the project page for
// more of them (scaling, cropping, etc.)
)
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.
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.
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);
}
});