//图片预览以及压缩上传
const previewPic = function(event,id) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let ctxW,ctxH,dataURL;
let file = event.target.files[0];
let imgSrc = '';
if(file){
let r = new FileReader();
r.readAsDataURL(file);
r.onload = function(e) {
imgSrc = this.result;
let img = new Image();
img.src = imgSrc;
img.onload = function(){
let width = img.width,height = img.height;
let scale = width / height;
if(width>=height){
ctxW = 226 * scale;
ctxH = 226;
}else{
ctxW = 343;
ctxH = 343/scale;
}
canvas.width = ctxW;
canvas.height = ctxH;
//图片压缩
ctx.drawImage(img,0,0,width,height,0,0,ctxW,ctxH);
imgSrc = canvas.toDataURL("image/jpeg",0.7);
document.getElementById("PIC"+id).setAttribute("src",imgSrc);
dispatch({type:"productEditList/previewPic",payload:{id,imgSrc}})
}
}
}
}
图片预览以及压缩上传
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 一、图片预览 图片预览有两种方式: 用 FileReader把图片转化为base64格式的数据嵌入到HTML中。 ...
- 代码还在优化,后续会进行更新,该组件引用了element-ui的弹出框样式,使用axios库进行ajax请求,向后...