html5使用canvas绘制图片并下载

原文参考：https://www.swiftui.work/category/java/

简介

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

新的如何构建画布、绘制图片、通过a标签进行下载

1.绘制画布

ar 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属性，属性值为下载的图片的名称
};

4.图片跨域问题处理方法

a.创建图片的时候 img.crossOrigin = ‘Anonymous’;
b.在请求图片的时候添加请求头

绘制图片 代码片.

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);
		};

	}

下载图片（使用压缩包的方式下载图片）

##a.引入对应的工具包

<!--将文件压缩成zip-->
	<script src="/javascript/activity/js_zip/FileSaver.js"></script>
	<script src="/javascript/activity/js_zip/jszip.min.js"></script>

##b.批量下载海报

/**
 * 批量下载海报
 */
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;
				});
			}
		};
	})
}