最近在做移动端遇到了一个问题就是:手机拍照后,图片过大如果上传到服务器务必会浪费带宽,最重要的是流量啊别慌,好事儿来了,务必就会有人去研究研究图片的压缩:
鄙人结合前人的经验,结合自己实战,总结出一个方法供大家参考:
/* *
*图片压缩,默认同比例压缩
* @param}{对象的路径
* pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
* @param}{对象obj
* obj对象有宽度、高度、质量(0 - 1)
* @param}{对象回调
*回调函数有一个参数,base64的字符串数据
*/函数dealImage(路径、obj回调){
var img=新形象();
img。src=https://www.yisu.com/zixun/path;
img。onload=function () {
var=这个;//默认按比例压缩
var w=that.width,
h=that.height,
规模=w/h;
w=obj。宽度| | w;
h=obj。高度| | (w/规模);
var质量=0.7;//默认图片质量为0.7//生成画布
画布var=document.createElement(“画布”);
var ctx=canvas.getContext (2 d);//创建属性节点
var出全新=document.createAttribute(“宽度”);
出全新。nodeValue=https://www.yisu.com/zixun/w;
var安=document.createAttribute(“高度”);
无水的。nodeValue=https://www.yisu.com/zixun/h;
canvas.setAttributeNode(出全新);
canvas.setAttributeNode(安);
ctx。drawImage (0, 0, w h);//图像质量
如果(obj。质量& & obj。质量<=1 & & obj。质量> 0){
质量=obj.quality;
}//质量值越小,所绘制出的图像越模糊
var base64=画布。toDataURL(“图像/jpeg”、质量);//回调函数返回base64的值
回调(base64);
}
}
当然返回的是一个base64的一个字符串;
如果可以试着测试一下压缩后的图片大小:
//调用函数处理图片
dealImage(“路径”,{//注意:在pc端可以用绝对路径或相对路径,移动端最好用绝对路径(因为用拍照后的图片路径,我没有试成功(如果有人试成功了可以分享一下经验))
宽度:200
},函数(基地){//直接将获取到的base64的字符串,放到一个图像标签中就可看到测试后的压缩之后的样式图了
. getelementbyid(“变换”)。src=https://www.yisu.com/zixun/base;
控制台。日志(“压缩后:“+基地。长度/1024 + " " +基地);
})
<>强PS:主要思想就是获取到图片,利用H5帆布技术进行图片数据化为base64的字符串,最后传到后台进行,后台将base64的字符串数据进行图像化储存。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
