[英]Resize the canvas output image to a specific size (width/height)
我有一个大画布( 5000x5000
),我想给它拍照并在客户端创建一个缩略图。 我可以使用canvas.toDataURL
捕获图像,但如何调整它的大小? 我是否必须创建一个新的$("<canvas></canvas>")
元素,然后将该图像放入其中并运行canvas2.toDataURL();
谁能帮我这个? 我不知道该怎么做。
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();
};
鉴于您对原始画布元素没有安全限制,这样的事情应该可行:
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.