我正在尝试使用 chrome 扩展获取页面的屏幕截图并尝试裁剪图像。截取屏幕截图后，我得到了图像的 base64 dataUrl。
当我尝试使用 dataURL 渲染图像时，图像渲染得比原始图像大(看起来放大了)。当我手动给出 <img>对象它呈现的原始大小。但是，当我将此图像绘制到 Canvas 上时， Canvas 会采用放大的尺寸。
我一直在用头撞墙来解决这个问题，但无济于事。非常感谢任何帮助。
//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
最佳答案
所提供的 base64 dataURL 包含 2560∼∼∼1356 图像的信息，但您将图像重新缩放为 1280x678。您的代码正在获取图像的原始大小，因此正在放大。您需要向 Canvas 发送图像的原始比例，而不是图像调整后的尺寸。
关于javascript - 图像从javascript中的base64数据读取产生不同大小的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35691649/