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

Question

我正在尝试使用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

Answer 1

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

Answer 2

因此，如果有人遇到类似的问题，这就是我所做的。 我试图使用给定的坐标来裁剪网页的屏幕截图。 正如@ mike-schultz所指出的那样，我面临的问题是image 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);