Change image size without losing quality via html2canvas - javascript

I take screenshot of the div via html2canvas. I want to change the size of caption div but without losing quality.
Here is my code example:
$(".meme-submit").on('click',(function() {
html2canvas($(".meme-img-upload"), {
onrendered: function(canvas) {
var extra_canvas = document.createElement("canvas");
extra_canvas.setAttribute('width',canvas.width*3);
extra_canvas.setAttribute('height',canvas.height*3);
var ctx = extra_canvas.getContext('2d');
ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,canvas.width*3,canvas.height*3);
$("#img_val").val(extra_canvas.toDataURL("image/png"));
document.getElementById("upload-meme").submit();
}
});
}));
Is someone have idea?

Related

How to get an image of a div using html2canvas

I'm trying to use html2canvas to get an image of a div to the clipboard so that a user is able to then paste the image in an email or message chat. I've looked up multiple different ways of trying to do this but none of them are working for me.
The code I am using is below.
$(document).on("click", ".canvas-button", function (){
var div = document.getElementById($(this).data("div"));
var rect = div.getBoundingClientRect();
var canvas = document.createElement("canvas");
canvas.width = rect.width;
canvas.height = rect.height;
var ctx = canvas.getContext("2d");
ctx.translate(-rect.left,-rect.top);
html2canvas(div, {
canvas:canvas,
height:rect.height,
width:rect.width,
onrendered: function(canvas) {
var image = canvas.toDataURL("impage/png");
window.open(image);
var pHtml = "<img src="+image+" />";
$("#parent").append(pHtml);
}
});
});
This code is able to find the div but it doesn't give me the image of it. I'm not sure what to do from here. Any help is appreciated.

Div to image with jQuery/JavaScript

I am trying to convert div to image using html2canvas library. I tried but no success can't convert full div to image, the dropper is missing in image.
URL: https://www.makethatvape.com/ejuicecalc/
Tried with code:
html2canvas($("#widget")).then(function(canvas) {
bimg = canvas.toDataURL(); // by default png
});
So, any idea how to overcome this problem. I played with html2canvas and it work for text and CSS div to canvas conversion.
Try this
<div id="copyDiv"></div>
var element = $("#widget"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
$("#copyDiv").append(canvas);
getCanvas = canvas;
}
});
Note: If HTML markup contains an image tag, then for some browsers the above code will not be able to create the image of it. To make this work you need to use 2 parameters i.e. allowTaint, useCORS
Sample code :
html2canvas(document.getElementById("html-content-holder"), {
allowTaint: true, useCORS: true
}).then(function (canvas) {
var anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
document.getElementById("previewImg").appendChild(canvas);
anchorTag.download = "filename.jpg";
anchorTag.href = canvas.toDataURL();
anchorTag.target = '_blank';
anchorTag.click();
});
Detail Article: Convert HTML to image using jQuery / Javascript with live demos
Simpler way to do it:
var convertMeToImg = $('#myDiv')[0];
html2canvas(convertMeToImg).then(function(canvas) {
$('#resultsDiv').append(canvas);
});
https://html2canvas.hertzen.com/getting-started

Convert Canvas to image then download

I am trying to convert a section of my site into a downloadable image.
Firstly I convert the html to a canvas using:
$(function() {
$("#download").click(function() {
html2canvas($("#the-grid"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
$("#saved").append(canvas);
$("#saved canvas").attr('id', 'scan');
}
});
Which works fine the canvas get generated and all look's good.
I then want to turn that into an image which I can use for thumbnails later but also initiate a download of the image.
To do so I complete the function like this.
$(function() {
$("#download").click(function() {
html2canvas($("#the-grid"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
$("#saved").append(canvas);
$("#saved canvas").attr('id', 'scan');
var c=document.getElementById("scan");
var d=c.toDataURL("image/png");
var w=window.open('about:blank','Download Mix');
w.document.write("<img src='"+d+"' alt='Custom Blend'/>");
}
});
But it doesn't work.
The error's I get are totally irrelevant.
I am an experienced developer but I'm pretty new to Jquery so any help would be appreciated.
UPDATE
Got it to work.
Create image like this
$(function () {
$("#download").click(function () {
html2canvas($("#the-grid"), {
onrendered: function (canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
$("#saved").append(canvas);
$("#saved canvas").attr('id', 'scan');
var image = canvas.toDataURL("image/png");
$("#saved").append("<img src='"+image+"' alt='Custom Blend'/>");
}
});
image html ends up looking like
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Custom Blend">
Maybe this can help you :
var image = canvas.toDataURL("image/png"); // build url of the image
window.location.href=image; //activate download
image = "<img src='"+image+"'/>"; // set canvas image as source
Here's how I did this (note, there's no way to download a file in Safari and set the filename without pinging a server):
First, you need to get the canvas as a png: var img = canvas.toDataUrl('image/png');
Then, you'll want to convert that dataURL to a blob. For a good way to do that, see this function.
Now you want to download that blob. This will work in all browsers but Safari:
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, 'image.png');
} else {
var url = window.URL || window.webkitURL;
var objectURL = url.createObjectURL(blob);
var ele = $('<a target="_blank"></a>')
.hide()
.attr('download', 'image.png')
.attr('href', objectURL);
$('body').append(ele);
var clickEvent = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': false,
});
ele[0].dispatchEvent(clickEvent);
window.setTimeout(function() {
url.revokeObjectURL(objectURL);
ele.remove();
}, 1000);
}
This creates an invisible link and simulates a click on it. The click() function won't work in Firefox, so you have to create an event and dispatch it by hand. Finally, it does a bit of clean up by removing the invisible link after one second. In IE, it uses the method provided by Microsoft. This will download the image with the filename "image.png". It also has the benefit of being able to download any blob, if you need to be able to do more with your code. Hopefully this helps!

save image with text as a image to photo gallery in javascript

I have a temporary image which i want to copy to gallery using javascript(phonegap).
Any help?
function save() {
var image = document.getElementById("tempImg");
//upload image to gallery of mobile . But how??
}
My image contains photo and text together...
i just want to arrange all div data including image inside div with some text on it and save it as an full image with any format .jpg,png etc in javascript.
I referred this link but that is for canvas to image but i want div to image .
Canvas to PhotoLibrary [Phonegap]
You might want to check out this url: http://html2canvas.hertzen.com/.
Using this script, you can convert your div into a canvas, then use the "Canvas to PhotoLibrary [Phonegap]" to do the rest.
Your code would look something like this:
function save() {
var image = document.getElementById("tempImg");
html2canvas(image, {
onrendered: function(canvas) {
// use "Canvas to PhotoLibrary [Phonegap]" on the canvas variable
}
});
}
you save this using session storage(or)local storage
save:
var z1,z2,z3;
function save() {
var a=$("#theme1_text").val();
var b=$("#image_div").css("background-image");
var c=$("#background_theme1").css("background-image");
sessionStorage.z1=a;
sessionStorage.z2=b;
sessionStorage.z3=c;
};
view:
function view() {
$("#theme1_text").val(sessionStorage.z1);
$("#image_div").css("background-image",sessionStorage.z2);
$("#background_theme1").css("background-image",sessionStorage.z3);
};

How to save/export a DOM element to an image?

I have a web page which has a form element (with its ID known) and
inside the form there are multiple DIVs, and the position of each div
may be changed.
What I'd like to do is:
a) Save the current state of this form
// var currentForm=document.forms['myFrm'].innerHTML;
would probably suffice...
b) Save or export the entire form with the most current position of each DIV
to an image file.
// how to save/export the javascript var of currentForm to an image
file is the key question.
Any help/pointer would be appreciated.
After hours of research, I finally found a solution to take a screenshot of an element, even if the origin-clean FLAG is set (to prevent XSS), that´s why you can even capture for example Google Maps (in my case). I wrote an universal function to get a screenshot. The only thing you need in addition is the html2canvas library (https://html2canvas.hertzen.com/).
Example:
getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
// in the data variable there is the base64 image
// exmaple for displaying the image in an <img>
$("img#captured").attr("src", "data:image/png;base64,"+data);
}
Keep in mind console.log() and alert() won´t generate an output if the size of the image is great.
Function:
function getScreenshotOfElement(element, posX, posY, width, height, callback) {
html2canvas(element, {
onrendered: function (canvas) {
var context = canvas.getContext('2d');
var imageData = context.getImageData(posX, posY, width, height).data;
var outputCanvas = document.createElement('canvas');
var outputContext = outputCanvas.getContext('2d');
outputCanvas.width = width;
outputCanvas.height = height;
var idata = outputContext.createImageData(width, height);
idata.data.set(imageData);
outputContext.putImageData(idata, 0, 0);
callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
},
width: width,
height: height,
useCORS: true,
taintTest: false,
allowTaint: false
});
}
There is a library called Domvas that should do what you want.
It gives you the ability to take arbitrary DOM content and paint it to
a Canvas of your choice.
After that exporting an image from a canvas element should be pretty easy:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
Do you want to do it completely in JavaScript? If so, one possible solution could be to transform the HTML to an SVG. Or maybe you can use the <canvas> tag and draw it manually.

Categories