Javascript 将画布输出图像调整为特定大小（宽度/高度）

我有一个大画布（

5000x5000

），我想为它拍照，并在客户端创建一个缩略图。我可以使用canvas.toDataURL拍摄图像，但是如何重新调整图像的大小？我是否必须创建一个新的

$（“”）

元素，然后将该图像放入其中并运行

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 canvas=document.getElementById（“main”）；
var ctx=canvas.getContext（“2d”）；
var tumbnail64=null；
var image=新图像（）；
image.src=canvas.toDataURL（）；
image.onload=函数（）{
$c2=$（“”）；
$c2[0]。宽度=100；
$c2[0]。高度=100；
$c2[0].getContext（“2d”）；
$c2[0].drawImage（图像，0100100）；
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();

哪里使用了
var context
？@Alcalyn Nowhere。OP在最初的代码中有它，所以我们假设它是在后面的某个地方使用的。但调整大小时不需要它。