Javascript 如何定义图像'；另存为'；尺寸？

我有一个页面，它在画布元素256X256处构建了一个二维码。使用canvas toDataURL（）调用将相应的“blank”图像标记的源分配给其内容

客户端希望在将映像保存到其计算机时，映像为156X156px。但是，当您右键单击“另存为”时，它将使用图像的自然分辨率（256X256）而不是“按图像”标记定义的分辨率进行保存

如何使用JavaScript缩小它的大小或强制浏览器以特定的维度保存它

---

在我将画布设置为URL之前设置画布的宽度或高度似乎会破坏画布，图像显示为空白

您可以使用

context.scale

重新缩放画布上的所有新内容。

因此，假设您的原始画布是256x256，您可以绘制156x156版本的QR，如下所示：

// resize the canvas to 156x156
canvas.width=156;
canvas.height=156;

// scale all future drawings to 156x156 instead of 256x256
var scale=156/256;
context.scale(scale,scale);

// now redraw the QR just as before
// No changes in size/coordinates needed

// After drawing the QR, just export as usual
// (it will now be 156x156)
var dataURL=canvas.toDataURL();

---

关于您的“空白”：调整画布的大小会自动清除画布上的所有内容。

下面是一个脚本，它包装了markE提到的

上下文和
画布。toDataUrl（）
：


在这个网站上也有小演示。保存一张大小调整过的图片后，你会发现它实际上和你在屏幕上看到的一样小，与上传前的大小无关

如果搜索“javascript客户端图像大小调整”之类的术语，您会发现更多库。
我觉得您好像在使用库来生成二维码，在这种情况下，可能需要选择设置结果大小

如果没有，则始终可以进行中间步骤，因为更改画布的大小后，将在发现时清除画布

创建所需大小的新画布：

var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

设置结果大小：

canvas.width = canvas.height = 156;

将QR图像绘制到其中：

ctx.drawImage(qrImage, 0, 0, 156, 156);

然后用这个画布替换DOM中的图像（如果已注入）。如果浏览器不允许右键单击保存画布，则可能需要执行其他步骤：

var newQR = new Image();
newQR.src = canvas.toDataURL();
// insert into DOM (replacing the old if necessary)

您可以将其封装在如下函数中：

（仅假设方形尺寸）


函数还原图像（旧图像，新闻大小）{
var parent=oldImage.parentNode，
canvas=document.createElement（“canvas”），
ctx=canvas.getContext（“2d”），
newImage=新图像（）；
canvas.width=canvas.height=newSize；
drawImage（oldImage，0，0，newSize，newSize）；
parent.removeChild（旧图像）；
newImage.src=canvas.toDataURL（）；
parent.appendChild（newImage）；
}
//--仅用于下面的演示--
window.onload=函数（）{
var oldImg=document.getElementById（“oldImage”），
btnRepl=document.getElementById（“btnRepl”）；
btnRepl.onclick=function（）{reduceImage（oldImg，156）}
};
div{border:2px solid#999}
单击以缩小尺寸

这不是我的专业领域，但我不愿意认为你找不到一个小型的库或插件可以help@charlietfl它在我的后口袋里，很难相信这不能用canvas/js天真地完成。