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

Я видел эту интересную тему среди многих других: Изменение размера изображения Base-64 в JavaScript без использования canvas

Однако, когда я создаю холст вне экрана, используя

const canvas = document.createElement('canvas');

Результирующее изображение прозрачно, а размер даже не соответствует параметрам. Если я рисую на холсте из дома, все работает отлично 

const canvas = document.getElementById('canvas');

Вот моя функция изменения размера, которая сохраняет соотношение входных изображений: 

resizeImage(file) {
    const canvas = document.createElement('canvas');
    // const canvas = document.getElementById('canvas');
    const context = (<HTMLCanvasElement>canvas).getContext('2d');
    // set maximum width and height of output image
    const maxW = 400;
    const maxH = 400;
    const img = new Image;

    img.onload = function () {
        const iw = img.width;
        const ih = img.height;
        const scale = Math.min((maxW / iw), (maxH / ih));
        const iwScaled = iw * scale;
        const ihScaled = ih * scale;
        console.log(iwScaled + ' ' + ihScaled);
        (<HTMLCanvasElement>canvas).width = iwScaled;
        (<HTMLCanvasElement>canvas).height = ihScaled;
        context.drawImage(img, 0, 0, iwScaled, ihScaled);
    }
    img.src = URL.createObjectURL(file);
    // retrieve output img in base64 format
    console.log((<HTMLCanvasElement>canvas).toDataURL());
}

Он принимает файл (файл) из HTML-ввода в виде параметр. Любая помощь будет признательна, спасибо.

1 3
javascript typescript image-resizing

1 ответ:

Вы получаете образ Base-64, когда загрузка завершена.

function resizeImage(file) {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var maxW = 400;
      var maxH = 400;
      var img = document.createElement('img');

      img.onload = function() {
        var iw = img.width;
        var ih = img.height;
        var scale = Math.min((maxW / iw), (maxH / ih));
        var iwScaled = iw * scale;
        var ihScaled = ih * scale;
        canvas.width = iwScaled;
        canvas.height = ihScaled;
        context.drawImage(img, 0, 0, iwScaled, ihScaled);
        console.log(canvas.toDataURL());
        document.body.innerHTML+=canvas.toDataURL();
      }
      img.src = URL.createObjectURL(file);
    }
    document.getElementById("file").addEventListener("change", function() {
      file = file.files[0];
      if (file) {
        resizeImage(file);
      }
    });
<input id="file" type="file">
4