I'm using html2canvas library to generate images from a specific div with informations inserted by users
$('#generate').on('click', function(event){
event.preventDefault();
var x=document.getElementById("signature");
html2canvas(x).then(function(canvas) {
var data = canvas.toDataURL();
$('#image').fadeIn(200).attr('src', data);
});
});
On Windows Chrome, the generated canvas look fine. But on Firefox, the logo image and html text inside canvas look so blurred.
UPDATE
If I change var x by document.body, the canvas look better. But I need just the specific div.
Chained methods can be messy when one of them is asychronous. Try this:
html2canvas(x).then(function(canvas) {
var data = canvas.toDataURL();
$('#image').attr('src', data);
$('#image').fadeIn(200);
});
Have also experienced this problem: solved by disabling the image smoothing (see also disabling imageSmoothingEnabled by default on multiple canvases)
Related
We know that there are several questions discussing this. However, we have not found anything that works for us. What we originally were looking for was a way to save a div as an image to be able to print it nicely. We then encountered html2canvas, which seemed perfect.
The only problem is that we use SVG elements (lines that connect our objects), and they will not appear in the image. This seams to be an issue for many more people, yet their problems appears to have been solved by the previous update. https://github.com/niklasvh/html2canvas/issues/95
We have tried to allow taint to get the SVGs (as suggested here) but it doesn't work.
We load both html2canvas and html2canvas.svg
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
This function is called when someone press the "Save to be able to print" button:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#object_container"), {
allowTaint: true
});
html2canvas($("#object_container"), {
onrendered: function(canvas) {
theCanvas = canvas;
var dataUrl = canvas.toDataURL();
window.open(dataUrl, "toDataURL() image", "width=800px, height=800px");
canvas.toBlob(function(blob) {
saveAs(blob, "savedImage.jpg");
});
}
});
});
});
Right now, we do not care about the saved file, only the image that is opened in a new window. In that image we can't see our svg lines.
Any suggestions? (Did we set the allowTaint properly?)
How to take screenshot of a DIV which contain more than one images? Actually I am dragging images into DIV and want to take screenshot using Jquery or Javascript but without using server side scripting language.
Assuming you have a button to click (to trigger the capture), and that the images are on the same domain, load the html2canvas JS file, then add this:
$('#btn').click(function() {
html2canvas($('#DIV'), {
onrendered: function(canvas) {
//do something with the canvas element - upload, append to a display element, etc. For example:
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
});
I have done the following code to convert HTML Content(DIV) to save as Image (JPEG, PNG,GIF Etc) with below code.
<pre>
html2canvas($(".mainbox"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
Canvas2Image.saveAsImage(canvas);
$("#FinalImage").append(canvas);
}
});
</pre>
I have also included html2canvas.js,base64.js and canvas2image.js in my page. At the end Image is shown in #FinalImage DIV and browser ask me to save it in my drive up to now all are working fine.
Now the question is name of the saved image has no Extension, every time I need to go to the image and assign the Extension(".jpg",".png" etc...). Is there any solution to set extension by default when user saves from the browser.
Thanks in advance.
I have done same functionality for capturing signature. This is different from your approach. but this code snippet may help you. plz comment if u need whole source code.
var canvas = document.getElementById(<canvas element id>)// get canvas element
var dataURL = canvas.toDataURL("image/png");// convert to img, specify extension
document.getElementById(<new image id>).src = dataURL; // write as an image
In line two I specified png.there you can change the extension of image. Hope it helps
I want to set a fill to my rectangle in Fabric.js like this:
myRect.fill = new fabric.Pattern({
source: myImg //myImg was loaded previously in another
//fabric.util.loadImage block
});
My image is being loaded correctly before this code block is run. I've looked up the demos for patterns at Fabric.js website. There the pattern is set within a fabric.util.loadImage block.
So the following code works fine for me:
fabric.util.loadImage('myImg.png', function(img) {
myRect.fill = new fabric.Pattern({
source: img
});
});
I want to understand why I can't set the source afterwards without using fabric.util.loadImage. Is there an option with setting the fill using an already loaded image?
Hey I am developing an app that could tag an image with the geolocation and the time stamp, using Phonegap. I have been able to tag the image by editing the image as a canvas. Now I need to save that edited image to the device Photo gallery/library as a new image or replace the image selected to be tagged. The purpose of using phonegap is that the application must function cross-platform. Is there any way this could be achieved ?
The following code edit the image as canvas and converts the image back to a Data URI.
var canvas = document.getElementById("canvasPnl");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj,0,0,300,300 );
context.fillStyle="#FFFFFF";
context.fillText('Latitude: '+ lat.toString()+' Longitude: '+ lon.toString(), 0, 10);
context.fillText(new Date(), 0, 20);
};
imageObj.src=imageURI;
dataURI= canvas.toDataURL();
Can this be converted to an image object and saved to phone gallery???
https://github.com/devgeeks/Canvas2ImagePlugin apparently does what you want, although I've not tried it.
I don't think you can make the image save in the gallery using just JavaScript but you can send the user to the image or display the image where the user can manually save it.
Maybe you could try the plugin I wrote for IOS (If you want to save a canvas element to photogallery, you could get the dataURI of the canvas the use the downloadWithUrl method below). Hope it works for you.
here is the git link: https://github.com/Nomia/ImgDownloader
Short Example:
document.addEventListener("deviceready",onDeviceReady);
//google logo url
url = 'https://www.google.com/images/srpr/logo11w.png';
onDeviceReady = function(){
cordova.plugins.imgDownloader.downloadWithUrl(url,function(){
alert("success");
},function(){
alert("error");
});
}
//also you can try dataUri like: 1px gif
//url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
you can also save a local file to image gallery use the download method