javascript - 用于图像裁剪的 Canvas - context.drawImage()

Question

我想显示同一图像的四个 Canvas

我正在处理一张图像，需要将其分成四 block 。我不知道图像的实际尺寸，所以我需要它是动态的。我已经走到这一步了，我认为第一部分工作正常，但我不知道为什么它不适用于其余部分。您能指出错误可能出在哪里吗？

我是 Canvas 新手，所以我的代码基于这个答案: https://stackoverflow.com/a/8913024/6929416

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
image.onload = cutImageUp;

function cutImageUp() {

  var natW = image.width / 2;
  var natH = image.height / 2;

  var widthOfOnePiece = jQuery(window).width() / 2;
  var heightOfOnePiece = jQuery(window).height() / 2;

  var imagePieces = [];
  for (var x = 0; x < 2; ++x) {
    for (var y = 0; y < 2; ++y) {
      var canvas = document.createElement('canvas');
      canvas.width = widthOfOnePiece;
      canvas.height = heightOfOnePiece;
      var context = canvas.getContext('2d');
      context.drawImage(image,
        x * natW, y * natH,
        natW, natH,
        x * canvas.width, y * canvas.height,
        canvas.width, canvas.height
      );
      /*drawImage(image,
      	sx, sy,
      	sWidth, sHeight,
      	dx, dy,
      	dWidth, dHeight);*/
      imagePieces.push(canvas.toDataURL());
    }
  }

  // imagePieces now contains data urls of all the pieces of the image

  // load one piece onto the page
  var anImageElement = document.getElementById('testing');
  var anImageElement2 = document.getElementById('testing2');
  var anImageElement3 = document.getElementById('testing3');
  var anImageElement4 = document.getElementById('testing4');

  anImageElement.src = imagePieces[0];
  anImageElement2.src = imagePieces[1];
  anImageElement3.src = imagePieces[2];
  anImageElement4.src = imagePieces[3];
}

img{ border: 1px solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<img id="testing" src="">
<img id="testing2" src="">
<img id="testing3" src="">
<img id="testing4" src="">
</section>

我希望 Canvas 尺寸适合屏幕，因此我将它们设置为窗口宽度和高度的一半。

Answer 1

drawImage 的参数是

drawImage(
  source,
  sourceX, sourceY, sourceWidth, sourceHeight,
  destinationX, destinationY, destinationWidth, destinationHeight
)

在您的代码中，您将destinationX设置为x * canvas.width，将destinationY设置为y * canvas.height。这意味着，对于 x 或 y 不为 0 的每次迭代，您都在目标区域之外绘制，即对于每个部分但第一个。

只需将 destinationX-Y 硬编码为 0 即可。

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
image.onload = cutImageUp;

function cutImageUp() {

  var natW = image.width / 2;
  var natH = image.height / 2;

  var widthOfOnePiece = jQuery(window).width() / 2;
  var heightOfOnePiece = jQuery(window).height() / 2;

  var imagePieces = [];
  for (var x = 0; x < 2; ++x) {
    for (var y = 0; y < 2; ++y) {
      var canvas = document.createElement('canvas');
      canvas.width = widthOfOnePiece;
      canvas.height = heightOfOnePiece;
      var context = canvas.getContext('2d');
      context.drawImage(image,
        x * natW, y * natH,
        natW, natH,
        0, 0,
        canvas.width, canvas.height
      );
      /*drawImage(image,
      	sx, sy,
      	sWidth, sHeight,
      	dx, dy,
      	dWidth, dHeight);*/
      imagePieces.push(canvas.toDataURL());
    }
  }

  // imagePieces now contains data urls of all the pieces of the image

  // load one piece onto the page
  var anImageElement = document.getElementById('testing');
  var anImageElement2 = document.getElementById('testing2');
  var anImageElement3 = document.getElementById('testing3');
  var anImageElement4 = document.getElementById('testing4');

  anImageElement.src = imagePieces[0];
  anImageElement2.src = imagePieces[1];
  anImageElement3.src = imagePieces[2];
  anImageElement4.src = imagePieces[3];
}

img{ border: 1px solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <img id="testing" src="">
  <img id="testing2" src="">
  <img id="testing3" src="">
  <img id="testing4" src="">
</section>

但请注意，几乎不应该使用toDataURL。相反，人们应该总是更喜欢更快的非阻塞和内存友好的 toBlob()。
另外，无需在此处创建 4 个 Canvas ，您可以在每一轮中重复使用相同的 Canvas 。

最后，您可能想保留图像的纵横比:

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png';
image.onload = cutImageUp;

function cutImageUp() {

  var natW = image.width / 2;
  var natH = image.height / 2;

  var widthOfOnePiece = jQuery(window).width() / 2 - 20;
  // preserve aspect ratio
  var heightOfOnePiece = widthOfOnePiece * (natH / natW);

  var canvas = document.createElement('canvas');
  canvas.width = widthOfOnePiece;
  canvas.height = heightOfOnePiece;
  var context = canvas.getContext('2d');
  var promises = [];
  for (var y = 0; y < 2; ++y) {
    for (var x = 0; x < 2; ++x) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(image,
        x * natW, y * natH,
        natW, natH,
        0, 0,
        canvas.width, canvas.height
      );
      promises.push(new Promise(function(resolve, reject) {
        canvas.toBlob(function(blob) {
          if (!blob) reject();
          resolve(blob);
        });
      }));
    }
  }

  return Promise.all(promises).then(function(blobs) {
    // imagePieces now contains data urls of all the pieces of the image

    // load one piece onto the page
    var anImageElement = document.getElementById('testing');
    var anImageElement2 = document.getElementById('testing2');
    var anImageElement3 = document.getElementById('testing3');
    var anImageElement4 = document.getElementById('testing4');

    anImageElement.src = URL.createObjectURL(blobs[0]);
    anImageElement2.src = URL.createObjectURL(blobs[1]);
    anImageElement3.src = URL.createObjectURL(blobs[2]);
    anImageElement4.src = URL.createObjectURL(blobs[3]);
  })
}

img {
  border: 1px solid;
  display: inline-block;
}
body{margin: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <img id="testing" src="">
  <img id="testing2" src="">
  <img id="testing3" src="">
  <img id="testing4" src="">
</section>