js簡單實現(xiàn)圖片本地預(yù)覽效果

omgdog 發(fā)布于2019-08-22 15:59 / 2029人閱讀

摘要：預(yù)覽效果不廢話，貼源碼讀取文件導(dǎo)出文件地址取到圖片原始尺寸解決透明圖片，出現(xiàn)黑色背景的問題如果不存在，或者異常錯誤，不影響后續(xù)執(zhí)行根據(jù)設(shè)置的，進行尺寸壓縮對預(yù)覽圖進行質(zhì)量壓縮導(dǎo)出的圖片路徑調(diào)用

預(yù)覽效果：

不廢話，貼源碼：

f.getFileAsUrl = function(file, back) {
    var reader = new FileReader();
    // 讀取文件base64
    reader.readAsDataURL(file);
    reader.onload = function(evt) {
        // 導(dǎo)出文件地址
        back(evt.target.result);
    }
};
f.getBase64 = function(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
};
f.zipImgBackUrl = function(base64Img, back, size) {
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var img = new Image();
    img.src = base64Img;
    img.onload = function() {
        // 取到圖片原始尺寸
        var w = img.width;
        var h = img.height;
        if (size.width && size.height) {
            if (size.width > size.height) {
                size.height = false;
            } else {
                size.width = false;
            }
        }
        if (!size) {
            c.width = w;
            c.height = h;
        } else if (size.width) {
            if (size.width < w) {
                c.width = size.width;
                c.height = h * size.width / w;
            } else {
                c.width = w;
                c.height = h;
            }
        } else if (size.height) {
            if (size.height < h) {
                c.height = size.height;
                c.width = w * size.height / h;
            } else {
                c.width = w;
                c.height = h;
            }
        }

        // 解決透明圖片，出現(xiàn)黑色背景的問題
        var opacityImg = new Image();
        var base64 = localStorage.getItem("opacityImg");
        var hasLocal = base64 && /^data:image/.test(base64);
        if (hasLocal) {
            opacityImg.src = base64;
        } else {
            opacityImg.src = "/images/opacity-bg.jpg";
        }
        opacityImg.onload = function() {
            if (!hasLocal) {
                base64 = f.getBase64(opacityImg);
                localStorage.setItem("opacityImg", base64);
            }
            ctx.fillStyle = ctx.createPattern(opacityImg, "repeat");
            fillImg(ctx,c,img,back);
        };
        //如果opacityImg不存在，或者異常錯誤，不影響后續(xù)執(zhí)行
        opacityImg.onerror = function(){
            ctx.fillStyle = "#f0f0f0";
            fillImg(ctx,c,img,back);
        };

        function fillImg(ctx,c,img,back){
            ctx.fillRect(0, 0, c.width, c.height);
            // 根據(jù)設(shè)置的size，進行尺寸壓縮
            ctx.drawImage(img, 0, 0, w, h, 0, 0, c.width, c.height);
            //對預(yù)覽圖進行質(zhì)量壓縮
            var src = c.toDataURL("image/jpeg", 0.5);
            // 導(dǎo)出base64的圖片路徑
            back(src);
        }
    };
};

調(diào)用：