html5使用canvas绘制图片并下载

一、简介
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.创建 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.创建图片的时候 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;
    }
    //创建压缩包对象 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;
                });
            }
        };
    })
}