如何定义图像 'Save As' 大小？

Question

我有一个页面在 256X256 的 Canvas 元素中构建二维码。通过调用 canvas toDataURL() 将相应 'blank' 图像标签的来源分配给它的内容。

客户希望图像在保存到他们的机器时为 156X156px。但是，当您右键单击以保存时，它会使用图像的自然分辨率 (256X256) 而不是 Image 标签定义的分辨率来保存它。

如何使用 JavaScript 缩小它或强制浏览器以特定尺寸保存它？

在我将其设为 URL 之前设置 canvas 的宽度或高度似乎破坏了 canvas 并且图像只是白色 space .

Answer 1

您可以使用 context.scale 重新缩放 canvas 上的所有新内容。

因此，假设您的原始 canvas 是 256x256，您可以像这样绘制一个 156x156 版本的二维码：

// 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();

关于您的 "white space"：调整 canvas 的大小会自动清除 canvas 上的所有内容。

Answer 2

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

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

本站也有小demo。保存调整大小后的图片后，您会发现它实际上和您在屏幕上看到的一样小，与上传前的大小无关。

如果您搜索 "javascript client side image resizing".

等术语，您会找到更多图书馆

Answer 3

在我看来，您好像正在使用一个库来生成 QR 码，以防万一，也许可以选择设置结果的大小。

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

创建一个新的 canvas 您需要的尺寸：

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

设置结果大小：

canvas.width = canvas.height = 156;

将二维码画进去：

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

然后用这个canvas替换DOM中的图像（如果它被注入）。如果浏览器确实允许右键单击保存 canvas:

，则可能需要额外的步骤

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>

如何定义图像 'Save As' 大小？

How to define image 'Save As' size?

html

javascript

css

jquery

canvas