一藏姐、簡介
HTML5 <canvas> 元素用于圖形的繪制拷况，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器瀑晒，您必須使用腳本來繪制圖形维苔。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓采郎、字符以及添加圖像千所。
二、如何構建畫布蒜埋、繪制圖片淫痰、通過a標簽進行下載
1.繪制畫布

           var canvas = document.createElement('canvas');
        canvas.height = 1334;
        canvas.width =750;
        canvas.style.width = 750 + "px";
        canvas.style.height = 1334 + "px";

2.創(chuàng)建 context 對象

               var ctx = canvas.getContext('2d');

3.生成一張圖片_img1

                  var img = new Image();
                  img.crossOrigin = 'Anonymous'; 
                  img.src=$('#backGroundImg').attr('src'); //如果圖片跨域了需要解決圖片跨域問題

4.圖片加載以后對圖片進行繪制

  //QRwidth為img2設置的圖片的長和寬
  img.onload = function () {
            ctx.drawImage(img, 0, 0,750,1334);
            var QRleft1 = (Number(QRleft))  + 10; 
            var QRtop1 = (Number(QRtop))  + 10;
            /*var QRleft1 = QRleft +10;
            var QRtop1 = QRtop +10;*/
            var QRwidth1 = (Number(QRwidth))  - 20;
            ctx.fillStyle="#ffffff";
            ctx.fillRect(QRleft,QRtop,QRwidth,QRwidth); //
            var img2 = document.getElementById('qrCodeImg'); //獲取img2
            ctx.drawImage(img2, QRleft1, QRtop1,QRwidth1,QRwidth1);//將img2按照坐標繪制在畫布上
            $("#downloadPoster1").attr('href', canvas.toDataURL("image/png")); //將畫布轉成圖片路徑賦值給a標簽的href
            var activityName = $("#activityName").val();
            var downloadLink = $('#downloadPoster1').attr("download", activityName);//給a標簽添加download屬性，屬性值為下載的圖片的名稱
        };

5.點擊a標簽下載繪制好的圖片

6.圖片跨域問題處理方法
a.創(chuàng)建圖片的時候 img.crossOrigin = 'Anonymous';
b.在請求圖片的時候添加請求頭

image.png

三整份、整體代碼

繪制圖片

function canvasPosterImg(){
        $("#qrCodePoster  img").attr("style","display: none");
        $("#qrCodeImg").attr("style","width: 100%;height: auto;display: block");
        $("#qrCodeImg").attr('src',$("#qrCodePoster img").attr('src'));
        //解決跨域待错，將跨域圖片路徑轉為base64格式
        var img = new Image();
        var canvas = document.createElement('canvas');
        canvas.height = 1334;
        canvas.width =750;
        canvas.style.width = 750 + "px";
        canvas.style.height = 1334 + "px";
        var ctx = canvas.getContext('2d');
        img.crossOrigin = 'Anonymous';
        img.src=$('#backGroundImg').attr('src');
        img.onload = function () {
            ctx.drawImage(img, 0, 0,750,1334);
            //ctx.createPattern(img,'no-repeat');
            var QRleft1 = (Number(QRleft))  + 10;
            var QRtop1 = (Number(QRtop))  + 10;
            /*var QRleft1 = QRleft +10;
            var QRtop1 = QRtop +10;*/
            var QRwidth1 = (Number(QRwidth))  - 20;
            ctx.fillStyle="#ffffff";
            ctx.fillRect(QRleft,QRtop,QRwidth,QRwidth);
            var img2 = document.getElementById('qrCodeImg');
            ctx.drawImage(img2, QRleft1, QRtop1,QRwidth1,QRwidth1);
            $("#downloadPoster1").attr('href', canvas.toDataURL("image/png"));
            var activityName = $("#activityName").val();
            var downloadLink = $('#downloadPoster1').attr("download", activityName);
        };

    }

四、下載圖片（使用壓縮包的方式下載圖片）代碼

<!--引入對應的工具包-將文件壓縮成zip-->
    <script src="/javascript/activity/js_zip/FileSaver.js"></script>
    <script src="/javascript/activity/js_zip/jszip.min.js"></script>

/**
 * 批量下載海報
 */
function brachDownLoadPoster(activitySharePageInfoList){
    //獲取渠道二維碼的列表
    //activitySharePageInfoList 為需要下載的圖片列表的詳情信息
    if(activitySharePageInfoList == null || activitySharePageInfoList.length < 1){
        $("#ma-Updata").modal('hide');
               consol.log("沒有需要下載的圖片" );
        return;
    }
    //創(chuàng)建壓縮包對象 jszip.js
    var zip = new JSZip();
    var zipNo = 0;
    //獲取到所有已經生成好的二維碼
    var size = activitySharePageInfoList.length ;
    var zipNo = 0;
     //遍歷需要下載的圖片信息烈评，逐一進行繪制然后放入壓縮文件
    $.each(activitySharePageInfoList, function (i, shareInfo) {
        var shareInfoId = shareInfo.id ;
        var shareName = shareInfo.name;
        var img = new Image();
        var canvas = document.createElement('canvas');
        canvas.height = 1334;
        canvas.width =750;
        canvas.style.width = 750 + "px";
        canvas.style.height = 1334 + "px";
        var ctx = canvas.getContext('2d');
        img.crossOrigin = 'Anonymous';
        img.src=$('#backGroundImg').attr('src');
        img.onload = function () {
            zipNo += 1;
            ctx.drawImage(img, 0, 0,750,1334);
            var QRleft1 = (Number(QRleft))  + 10;
            var QRtop1 = (Number(QRtop))  + 10;
            var QRwidth1 = (Number(QRwidth))  - 20;
            ctx.fillStyle="#ffffff";
            ctx.fillRect(QRleft,QRtop,QRwidth,QRwidth);
            //var img2 = document.getElementById('qrCodeImg');
            var img2 = $('#qrCode'+shareInfoId+' img')[0];
            ctx.drawImage(img2, QRleft1, QRtop1,QRwidth1,QRwidth1);
            var url =  canvas.toDataURL("image/png")
            // 構造a標簽并模擬點擊
            var imgData = url.split('base64,')[1];
            zip.file(shareName+"圖片.png", imgData , { base64:true });
            if(zipNo==size ){
                //下載壓縮包
                var activityName = $("#activityName").val();
                zip.generateAsync({ type: "blob" }).then(function (content) {
                    saveAs(content, "批量下載_"+i+"-圖片.zip");
                    $("#ma-Updata").modal('hide');
                    zipNo = 0;
                });
            }
        };
    })
}