.drawimage() 只显示图像的左下角

Question

我正在尝试使用 Javascript 裁剪图像。我有 croppr.js，它正在发送数据，我试图裁剪图像，以便我可以将它保存到具有 Base 64 的存储服务器。我已经在线阅读了有关 .drawimage() 的信息。我试过：

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 Height Width 作为 JSON 数组。

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>

这是我在您的代码中看到的唯一问题。
不清楚的是你用来调用流程函数的数据

.drawimage() 只显示图像的左下角

.drawimage() is only showing the bottom left corner of an image

html

javascript

canvas

html2canvas