兼职 网站 小程序 建设,用html制作网站代码,网络营销概论,网站建设html模板下载添加图片注释#xff0c;不超过 140 字#xff08;可选#xff09;
这里有两张图片#xff0c;它们表面看上去是一模一样的#xff0c;但实际上各自所占用的内存大小相差了180倍。 添加图片注释#xff0c;不超过 140 字#xff08;可选#xff09; 添加图片注释…
添加图片注释不超过 140 字可选
这里有两张图片它们表面看上去是一模一样的但实际上各自所占用的内存大小相差了180倍。 添加图片注释不超过 140 字可选 添加图片注释不超过 140 字可选
可以看到右边的图片是22.3MB而左侧的图片只有127KB但是实际上这两张图片的大小都是22.3MB。
最近在开发中遇到这样的一个需求需要把用户上传的图片先进行一次压缩然后再保存到服务器这里我们除了优先考虑压缩图片的大小外还要顾及图片压缩后的清晰度问题。 添加图片注释不超过 140 字可选
经过对比图片并没有明显的失真情况下面给大家分享一下我的解决方法
这里我采用element的文件上传控件来上传图片
el-uploadclassavatar-uploader:actionGLOBAL.serverFileUrlnamefiledrag:show-file-listfalse:on-changebeforeAvatarUploadi classel-icon-plus avatar-uploader-icon/i
/el-upload定义了三个事件方法
//图片上传之前处理事件beforeAvatarUpload(file) {console.log(file);const isJpgPng file.raw.type image/jpeg || file.raw.type image/png;if (!isJpgPng ) {this.GLOBAL.messageEvent(error上传头像图片只能是 JPG/PNG 格式!);} else {this.compressImg(file.raw);}return isJpgPng;},
compressImg(file) {let that this;// ?通过FormData构造函数创建一个空对象let formData new FormData();let reader new FileReader();// ?将读取到的文件编码成DataURLreader.readAsDataURL(file);// ?压缩图片reader.onload function(ev) {try {// ?读取图片来获得上传图片的宽高let img new Image();img.src ev.target.result;img.onload function(ev) {// ?将图片绘制到canvas画布上进行压缩let canvas document.createElement(canvas);let context canvas.getContext(2d);let imgwidth img.width;let imgHeight img.height;// ?按比例缩放后图片宽高;let targetwidth imgwidth;let targetHeight imgHeight;// ?/如果原图宽大于最大宽度if (targetWidth targetHeight) {// ?原图宽高比例let scale targetHeight / 1280;targetHeight 1280;targetWidth targetwidth / scale;} else {// ?原图宽高比例let scale targetWidth / 1280;targetWidth 1280;targetHeight targetHeight / scale;}// ?缩放后高度仍然大于最大高度继续按比例缩小canvas.width targetwidth; //canvas的宽图片的宽canvas.height targetHeight; //canvas的高图片的高context.clearRect(0,0, canvas.width, canvas.height);context.drawImage(this, 0, 0, canvas.width, canvas.height);let data :// ?如果图片小于0.6Mb不进行压缩并返回二进制流if (file.size 628288) {data canvas.toDataURL(image/jpeg);formData.append(file file);that.handleChange(file);}// ?如果图片大于e.6Mb进行压缩并返回二进制流else {// todo 压缩文件大小比例data canvas.toDataURL(image/jpeg,0.4);let paper that.GLOBAL.dataURLtoFile(data, file.name);formData.append(file, paper);that.handleChange(paper);}};} catch (error) {console.log(出现错误error);}};},
// todo 调用上传接口 文件提交给后台handleChange(file) (let formData new FormData( );formData.append(file,file.raw || file);console.log(formData);brandServices.uploadFile(formData).then(res {if (res.data.errno 0) {this.imgUrl res.data.data;this.dialogImageUrl URL.createObjectURL(file);this.GLOBAL.messageEvent(successres.data.message);} else { this.GLOBAL .messageEvent(errorres .data.message);}});}总结
先进行图片上传前的验证接着再对图片实现压缩的操作最后就可以把文件流提交给后台。
具体的思路是通过FormData构造函数创建一个空对象将图片绘制到canvas画布上然后再进行压缩。用户上传的文件超过一定的大小后就可以执行压缩的操作当然如果图片太小的话我们就没必要再压了。建议采用宽高等比例的方式来压缩不然可能会出现图片变形的情况。
