将画布输出图像的大小调整为特定大小（宽度/高度） [英] Resize the canvas output image to a specific size (width/height)

问题描述

我有一个大画布（ 5000x5000 ），我想拍一张照片并在客户端创建一个缩略图。我可以使用 canvas.toDataURL 捕获图像，但是如何重新调整大小呢？我是否必须创建一个新的 $（< canvas>< / canvas>）元素，然后将该图像放入并运行 canvas2.toDataURL（）; 任何人都可以帮我这个吗？我无法理解如何做到这一点。

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 using canvas.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 the canvas2.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();
};

推荐答案

这样的事情应该有效，因为你没有对原始canvas元素有安全限制：

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");
var context = canvas.getContext("2d");

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

这篇关于将画布输出图像的大小调整为特定大小（宽度/高度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！