Resize the canvas output image to a specific size (width/height)
17,580
Something like this should work, given you don't have security restrictions on the original canvas element:
var resizedCanvas = document.createElement("canvas");
var resizedContext = resizedCanvas.getContext("2d");
resizedCanvas.height = "100";
resizedCanvas.width = "200";
var canvas = document.getElementById("original-canvas");
resizedContext.drawImage(canvas, 0, 0, 200, 100);
var myResizedData = resizedCanvas.toDataURL();
Author by
Kivylius
Just an average programmer. I'm not the best I love to program &*%^$ the rest.
Updated on June 24, 2022Comments
-
Kivylius almost 2 years
I have a big canvas (
5000x5000
) and I want to take a picture of it and create a thumbnail on client side. I can capture the image usingcanvas.toDataURL
but how do i re-size it? Do i have to create an new$("<canvas></canvas>")
element and then put that image inside and run thecanvas2.toDataURL();
Can anyone help me with this? I can't get my head around it how to do it.var canvas = document.getElementById("main"); var ctx = canvas.getContext("2d"); var tumbnail64 = null; var image = new Image(); image.src = canvas.toDataURL(); image.onload = function() { $c2 = $("<canvas></canvas>"); $c2[0].width=100; $c2[0].height=100; $c2[0].getContext("2d"); $c2[0].drawImage(image, 0, 0,100,100); tumbnail64 = $c2[0].toDataURL(); };