如何调整 canvas 内容的大小并上传图片到服务器？

Question

我一直在想办法调整 canvas 内容的大小以获得大约 100x100 的缩略图并将其上传到服务器。我想将现有的 canvas 保持在当前大小，因为所有这些操作都必须对用户不可见。

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

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

Answer 1

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

Answer 2

感谢 Alexander Kremenets，我设法将我需要的代码放在一起。我用的是Hermite resize from the 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");

如何调整 canvas 内容的大小并上传图片到服务器？

How to resize canvas contents and upload image to server?

javascript

canvas

resize-image

html5-canvas