圖片預(yù)覽以及壓縮上傳

//圖片預(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}})
                }
            }
        }
    }
最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容