.drawimage() 只顯示圖像的左下角

Question

我想用 HTML 畫布裁剪圖像。 canvas 僅顯示圖像的左下角。 我將如何修復它以顯示整個圖像？ 我試過的：

function process(data) {
    console.log("DATA:" + data)
            var canvas = document.getElementById("canvas")
      var context = canvas.getContext('2d');
      var imageObj = new Image();
            var zoom 
          imageObj.onload = function() {

                context.width = data.width
                context.height = data.height

                // draw cropped image
                var sourceX = data.x;
                var sourceY = data.y;
        var sourceWidth = data.width / 2;
        var sourceHeight = data.height / 2; 
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX =  0;
        var destY =  0;
        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
                var dataurl = canvas.toDataURL('image/jpeg', 1.0)
                console.log(dataurl)
            };
      imageObj.src = document.getElementsByTagName("img")[0].src;
            console.log(imageObj.src)
}

data返回 X、Y、高度、長度

Answer 1

首先我看到的是：

context.width = data.width
context.height = data.height

您是否打算改為執行 canvas ？

這是一個例子：

 function process(data) { var canvas = document.getElementById("canvas") var context = canvas.getContext('2d'); var img = new Image(); img.onload = function() { canvas.width = data.width canvas.height = data.height // draw cropped image var w = data.width / 2; var h = data.height / 2; context.drawImage(img, data.x, data.y, w, h, 0, 0, w, h); }; img.src = data.src; } process({x:0, y:0, width:600, height: 600, src: "http://i.stack.imgur.com/UFBxY.png"})

 <canvas id="canvas"></canvas>

這不是我在您的代碼中看到的唯一問題。
不清楚的是你用來調用進程function的數據