将画布输出图像调整为特定尺寸（宽度/高度）

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();
};

- Kivylius

Answer 1

如果原始的画布元素没有安全限制，那么类似这样的代码应该可以工作：

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();

- Nick

---

var context 用在哪里？ - Alcalyn

@Alcalyn 没有地方。原始代码中已经有了它，所以假设它在后续的某个地方被使用。但它不是调整大小所必需的。 - Nick