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

Question

I am trying to get a screenshot of a page using chrome extension and trying to crop the image. 我正在尝试使用chrome扩展名获取页面的屏幕截图，并尝试裁剪图像。 Upon taking the screenshot, I get a base64 dataUrl of the image. 截取屏幕截图后，我得到了图像的base64 dataUrl。

When I try to render the image using the dataURL, the image renders larger(appears zoomed in) than the original image. 当我尝试使用dataURL渲染图像时，该图像的渲染比原始图像更大（显示为放大）。 When I manually give the <img> object the original size it renders fine. 当我手动给<img>对象提供原始大小时，它可以很好地呈现。 But when I draw this image to a canvas, the canvas takes the enlarged size. 但是，当我将此图像绘制到画布上时，画布会放大。

I have been banging my head against the wall to get a solution for this problem but to no avail. 我一直在撞墙，以解决这个问题，但无济于事。 Any help is greatly appreciated. 任何帮助是极大的赞赏。

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

And here is the HTML code, I am removing the dataurl as it takes too much space, and pasting another URL. 这是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>

The following is the image(from the dataurl) I want to crop: 以下是我要裁剪的图像（来自dataurl）：

The following is the cropped image that I get. 以下是我得到的裁剪图像。 It is not the intended image because it appears enlarged(zoomed in). 这不是预期的图像，因为它看起来放大了（放大了）。 It is the top left section of the original image. 它是原始图像的左上部分。

For further reference, here is the jsbin link: https://jsbin.com/pomayowara/edit?output 进一步的参考，这里是jsbin链接： https ://jsbin.com/pomayowara/edit ? output

Answer 1

The base64 dataURL provided has information for an image of 2560 × 1356, but you rescaling the image to 1280x678. 提供的base64 dataURL具有2560×1356图像的信息，但是您将图像重新缩放为1280x678。 Your code is obtaining the original size of the image and is therefore being enlarged. 您的代码正在获取图像的原始大小，因此正在被放大。 You would need to send the canvas the original ratio of the image and not the resized dimensions of the image. 您需要向画布发送图像的原始比例，而不是图像的调整尺寸。

Answer 2

So, in case someone is facing a similar problem, this is what I did. 因此，如果有人遇到类似的问题，这就是我所做的。 I was trying to crop the screenshot of a webpage using the coordinates given. 我试图使用给定的坐标来裁剪网页的屏幕截图。 As pointed out by @mike-schultz, the problem that I was facing was the image dataUrl was showing the image size to be 2560x1356 where as my browser viewport size was 1280x678. 正如@ mike-schultz所指出的那样，我面临的问题是image dataUrl显示的图像大小为2560x1356，其中我的浏览器视口大小为1280x678。 This was producing a zoomed-in image when drawn on canvas. 在画布上绘制时，这会产生放大图像。

As per the suggestions of @mike0schultz, I doubled the sourceWidth and sourceHeight. 根据@ mike0schultz的建议，我将sourceWidth和sourceHeight加倍。 This worked like a charm in showing the correct cropped part of the screenshot. 在显示屏幕截图的正确裁剪部分时，这就像一种魅力。 The only problem was it was still blurry, not sharp at all. 唯一的问题是它仍然模糊，根本不清晰。 So I tried doing this: 所以我尝试这样做：

I doubled the width and height of the canvas through javascript, then resized the canvas using CSS and finally scaled the context to (2,2). 我通过javascript将画布的宽度和高度加倍，然后使用CSS调整画布的大小，最后将上下文缩放为（2,2）。 This gave me the perfect image as a result. 结果，这给了我完美的形象。

The code is as follows coords.width and coords.height are the intended dimensions of the image: 代码如下：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);

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-29 05:18:45

解决方案2
0 2016-02-29 09:51:10

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-29 05:18:45

解决方案2 0 2016-02-29 09:51:10

解决方案1
1 已采纳 2016-02-29 05:18:45

解决方案2
0 2016-02-29 09:51:10