Блог

Главная - Вопросы по программированию - проблемы с изображением на холсте, результат белый, только определенное изображение

проблемы с изображением на холсте, результат белый, только определенное изображение

#canvas #drawimage

#холст #drawimage

Вопрос:

Пытаюсь использовать canvas для рисования изображения. при использовании этого изображения результат белый, при использовании других изображений он работает нормально. Пожалуйста, просветите меня. есть ли [1]: https://i.stack.imgur.com/TesBY.jpg (если вы увеличите масштаб, появится изображение …)

           const img = document.createElement('img');
          img.src = reader.resu<
          img.onload = () => {

            const canvas = document.createElement('canvas');
            canvas.width = img.width
            canvas.height = img.height
            const ctx = canvas.getContext('2d');
         
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);


            canvas.toBlob(resolve);
          };
        };

Комментарии:

1. само изображение, похоже, повреждено или использует некоторые плохо поддерживаемые функции, так как исходное изображение для меня тоже выглядит белым, как только я меняю уровень масштабирования в браузере.

Ответ №1:

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

импорт * как imageConversion из ‘image-conversion’;

    let compressIm = new Promise(resolve => {imageConversion.compress(imgObj,{
            quality: 1,
            type: "image/jpeg",
            width: 800,
            height: 600,
            orientation:2,
            scale: 0.5,
          })
        })