изменить размер изображения с помощью JavaScript создает пустое изображение холста - PullRequest
Новая
       66

изменить размер изображения с помощью JavaScript создает пустое изображение холста

1 голос
/ 21 сентября 2019

Я изменяю размеры изображений, используя javascript и canvas, но некоторые из измененных размеров имеют черный фон.

Ниже приведен код: 

function resizeImage(input, maxWidth, maxHeight, callback) {
  var data;
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
          var oc = document.createElement('canvas'), octx = oc.getContext('2d');
          oc.width = img.width;
          oc.height = img.height;
          octx.drawImage(img, 0, 0);
          oc.width = maxWidth;
          oc.height = maxHeight;
          if (img.width > maxWidth) {
            octx.drawImage(oc, 0, 0, oc.width, oc.height);
            octx.drawImage(img, 0, 0, oc.width, oc.height);
            data = oc.toDataURL("image/jpeg", 0.7);
          } else {
            data = oc.toDataURL("image/jpeg", 0.7);
          }
          callback(data);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(input.files[0]);
    }
}

function run() {
    resizeImage(
      document.getElementById('image'), 
      600, 600, 
      function(dat) { 
  		document.getElementById('preview').src= dat; 
      }
    )
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Resize</title>
</head>
<body>
  <p>Use this image to upload - <a href="https://i.imgur.com/ckNzNNR.jpg">https://i.imgur.com/ckNzNNR.jpg</a> to see the bug.</p>

  <input id="image" type="file" onchange="run()">
  <img id="preview" src="">
  
  <p><b>It creates blank image, works fine for some of the image </b></p>
  
</body>
</html>

Вот корзина JS в реальном времени, если вы хотите проверить в реальном времени - https://jsbin.com/kivojewuti/edit?html,js,output

Это работает для некоторых изображений, ноне для всех изображений.Одно из изображений, где не работает изменение размера изображения, связано в коде.

Почему это не удается для некоторых изображений?

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Почему вы устанавливаете oc.width / oc.height дважды, с инструкцией отрисовки между ними?(Изменение размеров холста очистит холст, поэтому после того, как вы его измерили, вам обычно не нужно трогать эти размеры , если вы не хотите четко очистить холст)

Вместо этого загрузите изображение, а затем в его обработчике загрузки:

  1. сначала проверьте, какие размеры использовать (либо ширину / высоту img, либо уменьшенную на основе maxw / maxh), затем
  2. создайте свой холст, установите его ширину / высоту, , затем получите 2d контекст.Затем
  3. используйте ctx.drawImage(0,0,cvs.width,cvs.height), что теперь автоматически изменит размер при необходимости, и, наконец,
  4. получит (возможно измененный размер) изображение в качестве URL-адреса данных.
0 голосов
/ 29 сентября 2019

Код ниже поможет вам.Имейте в виду, что это не учитывает исходное соотношение изображений, если оно было слишком большим.Это просто сожмет это в коробке 600x600. 

function resizeImage(input, maxWidth, maxHeight, callback) {
    var data;
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var oc = document.createElement('canvas'), octx = oc.getContext('2d');

                if (img.width > maxWidth || img.height > maxHeight) {
                    // Image is too big -> resize
                    oc.width = maxWidth;
                    oc.height = maxHeight;
                } else {
                    // Image will fit - use original sizes
                    oc.width = img.width;
                    oc.height = img.height;
                }

                octx.drawImage(img, 0, 0, oc.width, oc.height);
                data = oc.toDataURL("image/jpeg", 0.7);

                callback(data);
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
...