Question

当尝试使用Chrome压缩照片时，我得到了很好的结果，其中800万张照片在台式机上变成了120万张。

在Safari iPhone上尝试进行相同操作时，照片大小几乎保持不变，甚至会大100kb。

//read input , where minSize is 2, and photos are larger
function getURLS(inputs,index,compressed,callback,minSize) {
  for (let k=0;k<inputs.files.length;k++)
  {
        var reader = new FileReader();
              reader.onload = function(e)
              {
               let file =  e.target.result;
               var newIndex = k ;
               if(index > -1 ) newIndex=index;
               var dic = {};
               dic["index"]=newIndex;
               dic["base64"]=file;
               dic["file"]=inputs.files[k];
               console.log("size before:", inputs.files[k].size/1024/1024),dic["index"] ;
                 if(compressed===true){
                   let sizeMB = Math.abs(inputs.files[k].size/1024/1024);
                       if(sizeMB<minSize) callback(dic);
                       else startCompression(dic,callback);
                 }
                 else{
                    callback(dic);
                 }
              }
        reader.readAsDataURL(inputs.files[k]);
   }
}



function startCompression(dic,callback){
  var file = dic["base64"];
  var img = new Image();
  img.onload = function(){
    var canvas = compressImg(img);
     canvas.toBlob(function(blob) {
       //var finalsrc = URL.createObjectURL(blob);
                   var reader = new FileReader();
                   reader.readAsDataURL(blob);
                   reader.onloadend = function() {
                        var finalblob = blob;
                        finalblob.lastModifiedDate = new Date();
                        finalblob.name = "r"+ simpleUnique();
                        dic["file"]=finalblob;
                        dic["base64"]=reader.result;
                        let sizeMB =  blob.size/1024/1024 ;
                        console.log("compressed to:",sizeMB,dic["index"]);
                        canvas.parentElement.removeChild(canvas);
                         callback(dic);
                  }
     }, 'image/jpeg', 0.9);
  };
  img.src = file;
}



function compressImg(img){

  var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d'),
  oWidth = img.naturalWidth,
  oHeight = img.naturalHeight,
  ratio = oWidth / oHeight,
  width = oWidth,
  height = Math.round(width / ratio);
  canvas.width = width;
  canvas.height = height;
  canvas.className = 'temp-cnv';
  document.body.appendChild(canvas);
  ctx.drawImage(img, 0, 0, width, height);
  return canvas;
}

iPhone上的结果示例：

[Log] size before: – 0.5767936706542969 – 4  
[Log] size before: – 2.6416501998901367 – 1  
[Log] size before: – 3.1758155822753906 – 0  
[Log] size before: – 3.703227996826172 – 2  
[Log] size before: – 3.3884010314941406 – 3  
[Log] compressed to: – 2.669351577758789 – 1   
[Log] compressed to: – 3.197432518005371 – 0   
[Log] compressed to: – 3.7769737243652344 – 2   
[Log] compressed to: – 3.4392786026000977 – 3

我在这里做错了什么？我会测量尺寸错误吗？我需要进一步降低质量吗？

Answer 1

通过将canvas的宽度/高度更改为比原始照片小来解决。都是一样的，所以事情并没有太大改变。

使用画布压缩图像在移动设备上不起作用

1 个答案: