Question

我想： -选择要上传的图片 -用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并将图像放置在画布上，但是调整大小后的图像是黑色的。这段代码只是一个测试，如果有人使用不同方法的示例，我将非常感谢您的帮助。

谢谢

React.js：使用nodeca / pica调整大小并上传

0 个答案: