Question

我试图在上传时自动调整图像大小。单击按钮时，我首先检查文件，它包括：

lastModified: 1540955349935
lastModifiedDate: Wed Oct 31 2011 11:09:09 GMT+0800 (Singapore Standard Time) {}
name: "3rd.jpg"
size: 4372841
type: "image/jpeg"
webkitRelativePath: ""

我搜索了一个可用于将based64转换为blob的脚本，这就是我所发现的。

function b64toBlob(b64, onsuccess, onerror) {
    var img = new Image();

    img.onerror = onerror;

    img.onload = function onload() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width/4;
        canvas.height = img.height/4;

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

        canvas.toBlob(onsuccess);
    };

    img.src = b64;

}

但是首先我需要将文件转换为based64。然后调用该函数将其转换为blob。

$('input[type=file]').on('change',function () {
   var files = $(this).files;
   console.log(files[0])
   var fileReader = new FileReader();

   fileReader.readAsDataURL(files[0]);

   fileReader.onload = function () {
       uploadFile = fileReader.result;
       b64toBlob(uploadFile, function(blob) {
           console.log(blob);
           var url = _URL.createObjectURL(blob);
       }, function(error) {

       }


   }
})

但是当我在转换后检查文件时，这仅包括大小和类型。与转换之前的数据不同。

size: 1070433
type: "image/png"

所以发生什么事是当我单击“提交”时，正在存储的图像已缩小/无法查看。

我想做的是，当我上传较大的文件图像时，它将自动缩小尺寸，并且转换后的图像将不存储在原始文件中。

使用javascript上传时如何自动缩小图像尺寸

0 个答案: