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指出的那样，我面临的问题是图像dataUrl显示的图像大小为2560x1356，而我的浏览器视口大小为1280x678。这在画布上绘制时会生成放大的图像。

根据@ mike0schultz的建议，我将sourceWidth和sourceHeight加倍。这在显示屏幕截图的正确裁剪部分时起到了很大的作用。唯一的问题是它仍然是模糊的，根本不是尖锐的。所以我试着这样做：

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

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

var countSwitch = 0;
if(countSwitch == 0){
    $('.display-img').click(function(){
        countSwitch++;

        selectImg = $(this).find('img').attr('src');
        $(this).addClass('last-clicked');

        currentImg = $('.prime-img img').attr('src');

        $(this).find('img').attr('src', currentImg);

        $('.prime-img img').fadeOut(400, function() {
            $('.prime-img img').attr('src', selectImg);
        }).fadeIn(400); 
        console.log('eerste count', countSwitch);
        console.log('eerste');
    });
}
if(countSwitch >= 0){
    $('.display-img').click(function(){
        $('figure').removeClass('last-clicked');
        $(this).addClass('last-clicked');

        selectImg = $(this).find('img').attr('src');
        currentImg = $('.prime-img img').attr('src');

        $(this).find('img').attr('src', currentImg);

        $('.prime-img img').fadeOut(400, function() {
            $('.prime-img img').attr('src', selectImg);
        }).fadeIn(400); 
        console.log('2e');
        console.log('2e count', countSwitch);

    });
}

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

2 个答案: