將網頁圖片轉base64打包導出實戰和踩坑

背景

最近有一個需求，需要生成一個用戶所有的信息的二維碼頁面，並且支持下載下來和全部導出二維碼。方便用戶打印

一開始有想過后端導出，但是又想到這樣一個問題，圖片已經全部渲染生成過一次了。如果全部導出還要再去后台反復請求，生成二維碼圖片，壓縮再導出，相當的消耗性能，然后又想到，既然圖片已經在瀏覽器渲染好了，那為什么不直接利用已經渲染好的圖片進行批量下載導出呢？這樣不需要請求后台，節省性能，並且方便。

思路

首先可以知道，圖片已經在瀏覽器已經生成了，所以我們可以給所有的二維碼圖片的img標簽一個name屬性，然后通過name屬性獲取所有的img標簽的src屬性，通過該屬性，我們可以拿到當前頁面所有的圖片src，通過src可以得到圖片，接下來只需要將圖片轉成base64編碼，再生成圖片放進壓縮包就可以了。

實踐

在網上找相關的案例的時候，大多數博客圖片轉base4都是采用的這種代碼實現

    for (var i = 0; i < imgs.length; i++) {
            var src = imgs[i].getAttribute("src");
            var suffix = src.substring(src.lastIndexOf("."));
            imageSuffix.push(suffix);

            getBase64(imgs[i].getAttribute("src"))
                .then(function (base64) {
                    imgBase64.push(base64.substring(22));

                    //console.log(base64);//處理成功打印在控制台
                }, function (err) {
                    console.log(err);//打印異常信息
                });

        }


//傳入圖片路徑，返回base64
    function getBase64(img) {
        function getBase64Image(img, width, height) {//width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小
            var canvas = document.createElement("canvas");
            canvas.width = width ? width : img.width;
            canvas.height = height ? height : img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            var dataURL = canvas.toDataURL();
            return dataURL;
        }
        var image = new Image();
        //設置這個可實行跨域請求圖片資源，但是在別人的服務器沒設置可跨域時是無法下載的，自己的服務器設置后才可以
        image.crossOrigin = 'Anonymous';
        image.src = img;
        var deferred = $.Deferred();
        if (img) {
            image.onload = function () {
                deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理
            }
            return deferred.promise();//問題要讓onload完成后再return sessionStorage['imgTest']
        }
    };

但是經過本人的實踐發現，這種方式轉base64的時候，會出現一個異步問題。因為我的需求是圖片是要命名的。出現了異步問題之后會出現一個圖片名和圖片對應不上的問題。這種方式是可以，但是不符合我的需求。這個問題困擾了我一整天加一個晚上。最后通過定位找到了一個解決的代碼，核心js代碼如下：

html：

  <ul class="ul clearfix">
        <li class="li" v-for="(user, key, index) in userData">
            <div class="item">
                <div class="img-box">
                    <img id="codeImg" v-bind:src="user.url" name="codeImg" width="100%" alt=""/>
                    <input name="imgName" v-bind:value="user.deptName+'_'+user.realName+'_二維碼'" type="hidden">
                </div>

                <div class="bottom clearfix">
                    <div class="left ">
                        <p class="name">{{user.realName}}</p>
                        <p class="txt-over">{{user.deptName}}</p>
                        <p>工號：{{user.jobNumber}}</p>
                    </div>
                    <div class="right ">
                        <p class="download ">
                        	<a v-bind:href="user.url" v-bind:download="user.deptName+'_'+user.realName+'_二維碼.png'">下載圖片</a>
                        </p>
                    </div>
                </div>
            </div>
        </li>
    </ul>

js代碼：

<script type="text/javascript" src="https://cdn.bootcss.com/jszip/3.2.0/jszip.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script type="text/javascript">
     var userName = [];
    var userId = [];
    var base64=[];
    function packageImages() {
        var imgs = $('img');
        var imgBase64 = [];
        var zip = new JSZip();
        var img = zip.folder("二維碼");
        for (var i = 0; i < imgs.length; i++) {
            var src = imgs[i].getAttribute("src");
            console.log(src)
            convertImgToBase64(imgs[i].getAttribute("src"), function(base64Img){
                //轉化后的base64
                console.log(base64Img)
                imgBase64.push(base64Img.substring(22));
            });
        }
        
        function toZip() {
            setTimeout(function () {
                var imgname = document.getElementsByName("imgName");
                if (imgs.length == base64.length) {
                    for (var i = 0; i < imgname.length; i++) {
                        img.file(imgname[i].value +".png", base64[i], { base64: true });
                    }
                    zip.generateAsync({ type: "blob" }).then(function (content) {
                        // see FileSaver.js
                        saveAs(content, "二維碼.zip");
                    });
                } else {
                    toZip();
                }
            }, 100);
        }
        
        toZip();
    };
//會出現問題的代碼在於這一段，因為onload是異步的
     function  convertImgToBase64(url, callback, outputFormat){
        var canvas = document.createElement('CANVAS'),
            ctx = canvas.getContext('2d');
           let img = new Image;
        // img.crossOrigin = 'Anonymous';
            img.onload = function(){
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img,0,0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                base64.push(dataURL)
               var id =  getQueryVariable("url",url);
               userId.push(id);
                callback.call(this, dataURL);
                canvas = null;
            };
//這里的設置url一定要放在onload后面
        img.src = url;
    }
    function getQueryVariable(variable,query)
    {
         query = query.substring(1);
        var vars = query.split("?");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
</script>