Question

我一直在试图弄清楚如何调整画布内容的大小以获得大约100x100的缩略图并将其上传到服务器。我希望将现有画布保持当前大小，因为所有这些操作都必须对用户不可见。

我知道我可以使用toDataURL获取画布当前大小的内容，但是如何调整大小然后上传到服务器呢？

var image = canvas.toDataURL("image/png");

Answer 1

您可以在JS脚本中创建画布（不将其附加到DOM），然后在工作画布（您的图像）上绘制您的内容，在临时画布（Post about resizing in canvas）的上下文中调整它。然后才canvas.toDataURL("image/png");来调整图像大小。然后将其作为base64字符串发送，并以png文件的形式保存在服务器上。

Answer 2

感谢Alexander Kremenets我设法整理了我需要的代码。我使用了Hermite resize Alexander链接的question。此外，还提出了其他问题的代码：

var originalCanvas = document.getElementById("c");
// Create canvas for resizing
var resizeCanvas = document.createElement("canvas");
resizeCanvas.height = originalCanvas.height;
resizeCanvas.width = originalCanvas.width;

var resizeCtx = resizeCanvas.getContext('2d');
// Put original canvas contents to the resizing canvas
resizeCtx.drawImage(originalCanvas, 0, 0);

// Resize using Hermite resampling
resampleHermite(resizeCanvas, resizeCanvas.width, resizeCanvas.height, 150, 90);

// Use the resized image to do what you want
var image = resizeCanvas.toDataURL("image/png");

如何调整画布内容的大小并将图像上传到服务器？

2 个答案: