從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);

從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