//图片预览以及压缩上传
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请求，向后...
