能够把图片解析成base64码的格式,须求对图纸展开削减处理来优化上传功用

图片 1

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;

   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;

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

   img64 = canvas.toDataURL("image/jpeg", ratio);

   return img64;
 }

图片 2

var image = new Image();
image.src = "/img/test.jpg";

image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

 

近日做的APP项目涉及到手提式有线电话机拍录上传图片,因为手机拍片的图片经常都比较大,所以上传的时候就会非常的慢。为此,必要对图纸展开压缩处理来优化上传功能。以下是切实可行落实:

上传图片有三种方法:

注意:
压缩方法的调用以及图片src赋值必须放在图片的 onload
方法里面。因为只有等图片加载成功后才能展开压缩处理,从而转换为base64
进行赋值。 即便放在 onload
方法外面,则或者裁减代码无效,可能会生成一张纯浅深桔黄的图样。

2.canvas 
得以重复绘制一张图片,能够先把获得获得的图纸的blob放进canvas里面,再生成宽高和折射率的图形,然后转成相应的种类传到后台,近日支撑png和jpeg格式。

你恐怕感兴趣的篇章:

图片 3

  • 1 里面)越大图片质量越高。提议不要将图纸转为 png 格式,因为转为 png
    格式,图片的 base64 比转为 jpeg 的要长不少。上面是实际调用:

1.fileReader 
方可把图片解析成base64码的格式,简单残暴

如上那篇Js利用Canvas达成图片压缩成效正是笔者分享给咱们的全体内容了,希望能给我们一个参阅,也盼望大家多多援救脚本之家。

地点是1个图纸压缩函数,重临 base64 格式的图片数据。 当中压缩比率取值(0