移动端压缩图片并且上传基本流程:
1、input file上传图片时,用URL方法将file赋值给img对象
2、将img绘制到canvas上,调用canvas.toDataURL对图片进行压缩
3、获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再上传
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<title>移动前端图片压缩上传</title>
<style>
*{margin:0; padding:0;}
</style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="file" accept="image/*" @change="getImage"/>
</div>
<script src="vue.js"></script>
<script>
//创建一个Vue实例(ViewModel): 负者连接View与Model
let app = new Vue({
el: '#app',
data: {message: '图片压缩!'},
methods: {
/*第一步:获取 file 对象, file --> img*/
getImage: function(event){
let self = this;
let file = event.target.files[0];
let img = new Image();
/*img.src 如果用FileReader异步读取获取file的base64数据赋值,在
移动端base64数据过大时,会导致赋值过程很慢*/
img.src = URL.createObjectURL(file);
img.onload = function(){
self.imgToCanvas(img);
}
},
/*第二步:img -->canvas,调用canvas.toDataURL压缩,返回压缩后的base64数据*/
imgToCanvas: function(img){
let self = this;
//ios 拍摄的照片大于5M时,同比例缩小
let width = img.width;
let height = img.height;
let ratio = width*height/5000000;
if(ratio > 1){
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
}else{
ratio = 1;
}
let cvs = document.createElement('canvas');
let ctx = cvs.getContext('2d');
ctx.drawImage(img,0,0,width,height);
//压缩比例:0.5,可根据实际情况设置
let compressData = cvs.toDataURL('image/jpeg',0.5); // 访问的网站域名与服务器域名一致
/*计算压缩后文件大小:22 base64前缀 2 base64最后的2个等号
dataStr/8*2: base64字符流每8个字符有2个0补充
let dataStr = compressData.substring(22).length-2;
console.log(parseInt(dataStr-(dataStr/8)*2));*/
self.upload(compressData);
},
/*第三步:上传压缩后的图片数据*/
upload: function(){
}
}
});
</script>
</body>
</html>
Dom元素保存成图片
// 图片保存到本地(必须同源:访问的网站域名与服务器域名一致)
downs() {
let alink = document.createElement("a");
alink.href = this.shop.shoppic_url;
alink.download = "pic"; // 图片名
alink.click();
}
// 图片保存到本地(不同源)
downloadIamge(imgsrc, name) {//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
downs(){
this.downloadIamge(this.pic.url, 'pic')
}
参考: https://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/
https://blog.csdn.net/qq_30100043/article/details/78462950
https://segmentfault.com/a/1190000011478657