//圖片預(yù)覽以及壓縮上傳
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}})
}
}
}
}
圖片預(yù)覽以及壓縮上傳
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 導(dǎo)語 本篇文章使用H5實(shí)現(xiàn)圖片預(yù)覽,壓縮上傳的功能,主要用到了以下知識點(diǎn)。 使用 獲取上傳的圖片文件 使用H5 F...
- 這里的 標(biāo)簽是用來預(yù)覽圖片的: 讀取上傳文件: 利用canvas進(jìn)行圖片的壓縮: 我們比較兩張圖片壓縮前后的區(qū)別:
- 一、圖片預(yù)覽 圖片預(yù)覽有兩種方式: 用 FileReader把圖片轉(zhuǎn)化為base64格式的數(shù)據(jù)嵌入到HTML中。 ...
- 代碼還在優(yōu)化,后續(xù)會進(jìn)行更新,該組件引用了element-ui的彈出框樣式,使用axios庫進(jìn)行ajax請求,向后...