将画布输出图像的大小调整为特定大小(宽度/高度)

Question

我有一个大画布(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();
};

Answer 1

鉴于您对原始canvas元素没有安全限制,这样的东西应该可以工作:

var resizedCanvas = document.createElement("canvas");
var resizedContext = resizedCanvas.getContext("2d");

resizedCanvas.height = "100";
resizedCanvas.width = "200";

var canvas = document.getElementById("original-canvas");
var context = canvas.getContext("2d");

resizedContext.drawImage(canvas, 0, 0, 200, 100);
var myResizedData = resizedCanvas.toDataURL();