从javascript中的base64数据读取图像会产生不同大小的图像答案

【问题标题】：Image Reading from base64 data in javascript produces image of different size从javascript中的base64数据读取图像会产生不同大小的图像
【发布时间】：2016-06-12 00:36:58
【问题描述】：

我正在尝试使用 chrome 扩展获取页面的屏幕截图并尝试裁剪图像。截屏后，我得到了图像的 base64 dataUrl。

当我尝试使用 dataURL 渲染图像时，图像渲染得比原始图像更大（看起来放大了）。当我手动为 <img> 对象提供原始大小时，它呈现得很好。但是当我将此图像绘制到画布上时，画布会采用放大的尺寸。

我一直在努力寻找解决此问题的方法，但无济于事。非常感谢任何帮助。

//Here is the JS code:
var image = document.getElementById("image");
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

image.onload = function() {
    var sourceX = 0;
    var sourceY = 0;
    var sourceWidth = 150;
    var sourceHeight = 80;
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = 0;
    var destY = 0;

    context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

这里是 HTML 代码，我正在删除 dataurl，因为它占用太多空间，并粘贴另一个 URL。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <img height = "678" width = "1280" id = "image" src = "http://s12.postimg.org/7r9q3h2vx/ss2.jpg"/>
  <canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

以下是我要裁剪的图片（来自dataurl）：

以下是我得到的裁剪图像。这不是预期的图像，因为它看起来被放大（放大）。它是原始图像的左上角。

更多参考，这里是jsbin链接：https://jsbin.com/pomayowara/edit?output

【问题讨论】：

标签： javascript html image css html5-canvas

【解决方案1】：

提供的 base64 dataURL 包含 2560 × 1356 图像的信息，但您将图像重新缩放为 1280x678。您的代码正在获取图像的原始大小，因此正在被放大。您需要向画布发送图像的原始比例，而不是图像调整后的尺寸。

【讨论】：

我正在截取网页可见部分的屏幕截图并发送 window.innerWidth 和 window.innerHeight。我觉得 2560x1356 可能是因为我使用的是 Macbook Retina 显示器。有没有解决办法，因为最终我希望我的图像适合屏幕。
查看您的 jsBin，如果您将 sourceWidth 和 sourceHeight (300, 160) 加倍并将 destWidth 和 destHeight (150, 80) 减半，它将保持源图像的纵横比。如果您需要提高下采样的质量，这可能会有所帮助：stackoverflow.com/questions/19262141/…
谢谢，这有帮助！！

【解决方案2】：

所以，如果有人遇到类似的问题，这就是我所做的。我试图使用给定的坐标裁剪网页的屏幕截图。正如@mike-schultz 所指出的，我面临的问题是图像 dataUrl 显示图像大小为 2560x1356，而我的浏览器视口大小为 1280x678。这会在画布上绘制时生成放大的图像。

根据@mike0schultz 的建议，我将 sourceWidth 和 sourceHeight 加倍。这在显示屏幕截图的正确裁剪部分时就像一个魅力。唯一的问题是它仍然模糊不清，一点也不清晰。所以我尝试这样做：

我通过 javascript 将画布的宽度和高度加倍，然后使用 CSS 调整画布大小，最后将上下文缩放为 (2,2)。结果，这给了我完美的形象。

代码如下 coords.width 和 coords.height 是图片的预期尺寸：

var c = document.createElement("canvas");
c.id = "myCanvas";
c.width = coords.width*2;
c.height = coords.height*2;
c.style.width = coords.width+"px";
c.style.height = coords.height+"px";
c.getContext("2d").scale(2,2)
var ctx = c.getContext("2d");
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(image, 
    coords.left*devRes, coords.top*devRes,
    coords.width*devRes, coords.height*devRes,
    0,0,
    coords.width, coords.height);

【讨论】：