Question

我有一个在256X256的Canvas元素中构建QR码的页面。指定相应“空白”的来源。使用canvas toDataURL（）调用将图像标记到其内容中。

客户希望将图像保存到计算机时为156X156像素。但是，右键单击以保存，因为它使用图像的自然分辨率（256X256）保存，而不是使用Image标签定义的分辨率。

如何缩小或强制浏览器使用JavaScript将其保存在特定维度？

在我将其设为URL之前设置画布的宽度或高度似乎会破坏画布并且图像仅仅是空白区域。

Answer 1

您可以使用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();

关于您的＆＃34;空格＆＃34; ：调整画布大小会自动清除画布上的所有内容。

Answer 2

听起来好像您正在使用库来生成QR代码，以防万一可能会选择设置结果的大小。

如果没有，你总是可以做一个中间步骤，因为改变画布的大小之后会在你发现的时候清除它。

创建一个所需尺寸的新画布：

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)

你可以把它包装成这样的函数：

（仅假设方形尺寸）

function reduceImage(oldImage, newSize) {

  var parent = oldImage.parentNode,
      canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d"),
      newImage = new Image();

  canvas.width = canvas.height = newSize;
  ctx.drawImage(oldImage, 0, 0, newSize, newSize);

  parent.removeChild(oldImage);

  newImage.src = canvas.toDataURL();
  parent.appendChild(newImage);
}

// -- just for demo below --
window.onload = function() {
  var oldImg = document.getElementById("oldImage"),
      btnRepl = document.getElementById("btnRepl");
  btnRepl.onclick = function() {reduceImage(oldImg, 156)}
};

div {border: 2px solid #999}

<button id="btnRepl">Click to reduce size</button><br>
<div><img id="oldImage" src="http://i.imgur.com/duh6Lco.jpg" crossOrigin=""></div>

Answer 3

这是一个包含markE提到的context和canvas.toDataUrl()的脚本：

http://webreflection.blogspot.ch/2010/12/100-client-side-image-resizing.html

在这个网站上也是一个小小的演示。保存已调整大小的图片后，您会看到它在屏幕上看到的效果一样小，与上传前的图片大小无关。

如果您搜索“javascript客户端图像大小调整”这样的术语，您会找到更多库。

如何定义图像＆＃39;另存为＆＃39;尺寸？

3 个答案: