Проблема загрузки картинок javascript

Question

Мне понадобилось загружать картинку с компа на сайт, немного преобразовывать её с помощью canvas и закидывать на страницу. Но вот в чём проблема: некоторые картинки нормально загружаются, некоторых просто не видно(причем иногда видно, иногда нет), а вместо третьих - значок, мол изображение отсутствует. Совсем не понимаю, что с этим делать. Вот скрипт:

let file,
    img  = new Image(),
    rotatedImg = new Image(),
    rectangles = [],
    rectangles2 = [];
    
function fileLoaded(input){
       file = input.files[0];
       let reader = new FileReader();
    
       reader.onload = function () {
        img.src = reader.result;

        rectangles = [{ left: Math.round(0.19175*img.width),        
              top: Math.round(0.0843*img.height), 
              width: Math.round((0.927835-0.19175)*img.width), 
              height: Math.round((0.12936-0.0843)*img.height) 
            }];
        
        let canvas = document.createElement('canvas');  //создаем повёрнутое изображение
        canvas.width = img.height;
        canvas.height = img.width;
        let ctx = canvas.getContext('2d');
        ctx.rotate(-90*Math.PI/180);
        ctx.drawImage(img,-img.width,0);
        rotatedImg.src = ctx.canvas.toDataURL();

        rectangles2 = [{ left: Math.round(0.113372*rotatedImg.width),
                top: Math.round(0.01*rotatedImg.height), 
                width: Math.round((0.39244-0.113372)*rotatedImg.width), 
                height: Math.round((0.07-0.01)*rotatedImg.height)
              }];

        let canvas2 = document.createElement('canvas');  
        canvas2.width = img.width;
        canvas2.height = img.height;
        let ctx2 = canvas2.getContext('2d');
        ctx2.drawImage(img,0,0,img.width,img.height);
        for (let i = 0; i < rectangles.length; i++) {
            ctx2.strokeRect(rectangles[i]["left"], rectangles[i]["top"], rectangles[i]["width"], rectangles[i]["height"]);
        }
        
        let preview = document.getElementById("preview");
        preview.src = ctx2.canvas.toDataURL();
            
        let canvas3 = document.createElement('canvas');  
        canvas3.width = rotatedImg.width;
        canvas3.height = rotatedImg.height;
        let ctx3 = canvas3.getContext('2d');
        ctx3.drawImage(rotatedImg,0,0,rotatedImg.width,rotatedImg.height);
        for (let i = 0; i < rectangles2.length; i++) {
            ctx3.strokeRect(rectangles2[i]["left"], rectangles2[i]["top"], rectangles2[i]["width"], rectangles2[i]["height"]);
        }
        
        let preview2 = document.getElementById("preview2");
        preview2.src = ctx3.canvas.toDataURL();
      }

      reader.readAsDataURL(file);
 }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script async src="scripts.js"></script>
    <title>PassportScanner</title>
</head>
<body>
    <form onsubmit="event.preventDefault(); fileAccepted()">
        <label><strong>Выбор файла</strong></label>
        <br/>
        <input id='fileLoader' type="file" onchange="fileLoaded(this)" /><!--required-->
        <br/>
        <img src="" id="preview" height="800"></div>
        
        <img src="" id="preview2" width="800"></div>
        <br/>
        <button type="submit">Далее</button>
    </form>
    <div id="output"></div>
</body>
</html>

причем все картинки весят менее мегабайта и все в разрешении .jpg.

Answer 1

Надо использовать событие onload для Image.

let file,
  img = new Image(),
  rotatedImg = new Image(),
  rectangles = [],
  rectangles2 = [];

function fileLoaded(input) {
  file = input.files[0];
  let reader = new FileReader();

  reader.onload = function() {
    img.onload = function() {
      rectangles = [{
        left: Math.round(0.19175 * img.width),
        top: Math.round(0.0843 * img.height),
        width: Math.round((0.927835 - 0.19175) * img.width),
        height: Math.round((0.12936 - 0.0843) * img.height)
      }];

      let canvas = document.createElement('canvas'); //создаем повёрнутое изображение
      canvas.width = img.height;
      canvas.height = img.width;
      let ctx = canvas.getContext('2d');
      ctx.rotate(-90 * Math.PI / 180);
      ctx.drawImage(img, -img.width, 0);
      rotatedImg.src = ctx.canvas.toDataURL();

      rectangles2 = [{
        left: Math.round(0.113372 * rotatedImg.width),
        top: Math.round(0.01 * rotatedImg.height),
        width: Math.round((0.39244 - 0.113372) * rotatedImg.width),
        height: Math.round((0.07 - 0.01) * rotatedImg.height)
      }];

      let preview = document.getElementById("preview");
      preview.src = ctx.canvas.toDataURL();
    }
    img.src = reader.result;

  }

  reader.readAsDataURL(file);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script async src="scripts.js"></script>
  <title>PassportScanner</title>
</head>

<body>
  <form onsubmit="event.preventDefault();">
    <label><strong>Выбор файла</strong></label>
    <br/>
    <input id='fileLoader' type="file" onchange="fileLoaded(this)" />
    <!--required-->
    <br/>
    <img src="" id="preview" height="800">
  </form>
  <div id="output"></div>
</body>

</html>

БЛОГ НА HUSL

Проблема загрузки картинок javascript

Ответы (1 шт):