Холст для отсечения изображения - context.drawImage ()

Question

Я хочу показать четыре холста с одного изображения

Я работаю с изображением, которое мне нужно разделить на четыре части.Я не знаю фактических размеров изображения, поэтому мне нужно, чтобы оно было динамичным.Я уже зашел так далеко, и я думаю, что первая часть работает нормально, но я не знаю, почему она не работает для остальных частей.Не могли бы вы указать, где может быть ошибка?

Я недавно работаю с 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>

Я ожидаю, что размеры холста будут соответствовать размеру экрана, поэтому я установил для них половину ширины и высоты окон.

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 холста, вы можете использовать одно и то же в каждом раунде.

И, наконец, вы можете захотетьсохранить соотношение сторон изображения:

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>