Reactjs: изменить размер с помощью nodeca / pica и загрузить - PullRequest
Новая
       18

Reactjs: изменить размер с помощью nodeca / pica и загрузить

0 голосов
/ 27 мая 2019

Я хочу: - выбрать изображение для загрузки - изменить его размер с помощью pica - загрузить его на сервер с помощью axios

У меня возникла проблема с пониманием работы с pica.

У кого-нибудь есть пример рабочего кода?

handleFileChange(e){

    var imageLoader = document.getElementById('imageLoader');
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');


    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     

    this.imgResize();

}

imgResize(){

const offScreenCanvas = document.createElement('canvas');
offScreenCanvas.height = 500;
offScreenCanvas.width = 500;


 pica.resize( document.getElementById('imageCanvas'), offScreenCanvas, {
      unsharpAmount: 80,
      unsharpRadius: 0.6,
      unsharpThreshold: 2
    })
    .then(result => console.log(`resize done!  ${result.toDataURL()}`))
    .catch(err => console.log(err))
}

Код перехватывает onChange и помещает изображение на холст, но изображение с измененным размером становится черным.Этот код является только тестом, если у кого-то есть пример с другим подходом, я действительно ценю каждую помощь.

Спасибо

...