jsjq来封装一个图片文字合成图案的方法

这里首先做个说明
项目里使用到用canvas生成海报，在toDataURL报了这个错误Tainted canvases may not be exported。
toDataURL本身是没什么问题的，这个不用担心，但是你项目不能直接用文件的形式打开。
要用：http://localhost:8080/index.html 这种形式打开，不然会报以上错误，这点切记。

接着直接上封装代码，大神一看就懂的，请把凳子让给新手，哈哈
注意:为了简单的获取DOM元素，封装的代码就依赖于jQuery来写了，这里就先贴上一个jQuery的cdn

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
	crossorigin="anonymous"></script>

	//主要的调用方法，如果不用合成字体textStatus传值false;
	function createToImage(canvasId, canvasWidth, canvasHeight, imgSrc, imgX, imgY, imgW, imgH, imgContainer, textStatus, txt, txtX, txtY, font, color) {
			var canvasHtml = '<canvas width="' + canvasWidth + '" height="' + canvasHeight + '" id="' + canvasId + '" hidden="hidden"></canvas>';
			$('body').append(canvasHtml);//创建一个canvas Dom对象
			var canvasObject = getCanvasContext(canvasId);
			canvasObject.clearRect(0, 0, canvasWidth, canvasHeight);//在给定的矩形里清空画布的内容
			var imgI = 0;
			var imgL = imgSrc.length;
			var txtI = 0;
			var txtL = txt.length;
			createImgTocanvas(canvasObject, imgSrc, imgX, imgY, imgW, imgH, imgI, imgL, function () {
				if (textStatus == false) {
					var mycanvas = document.getElementById(canvasId);
					var image = mycanvas.toDataURL("image/png");
					$(imgContainer).attr('src', image);
				} else {
					createTextTocanvas(canvasObject, txt, txtX, txtY, font, color, txtI, txtL, function () {
						var mycanvas = document.getElementById(canvasId);
						var image = mycanvas.toDataURL("image/png");
						$(imgContainer).attr('src', image);
						setTimeout(function () {
							$('#' + canvasId).remove()
						}, 500)
					})
				}
			})
		}
		
		//创建文本绘画
		function createTextTocanvas(canvasObject, txt, x, y, font, color, startI, length, callBack) {
			canvasObject.font = font[startI];
			canvasObject.fillStyle = color[startI];
			canvasObject.fillText(txt[startI], x[startI], y[startI]);
			startI += 1;
			if (startI != length) {
				createTextTocanvas(canvasObject, txt, x, y, font, color, startI, length, callBack)
			} else {
				if (typeof callBack == 'function') {
					callBack()
				}
			}
		}

	//创建调用getCanvasContext 绘画的上下文
		function getCanvasContext(id) {
			return document.getElementById(id).getContext("2d")
		}

		function createImgTocanvas(canvasObject, src, x, y, width, height, startI, length, callBack) {
			var starImg = new Image();
			starImg.src = src[startI];
			starImg.onload = function () {
				canvasObject.drawImage(starImg, x[startI], y[startI], width[startI], height[startI]);
				//starImg规定要使用的图像、画布或视频。
				//x[startI]在画布上放置图像的 x 坐标位置。
				//y[startI]在画布上放置图像的 y 坐标位置。
				//width[startI]可选。要使用的图像的宽度。（伸展或缩小图像）
				//height[startI]可选。要使用的图像的高度。（伸展或缩小图像）
				startI += 1;//调用完之后+1，调用下一张图片
				if (startI != length) {
					createImgTocanvas(canvasObject, src, x, y, width, height, startI, length, callBack)
				} else {
					if (typeof callBack == 'function') {
						callBack()
					}
				}
			}
		}

//接着是调用,这里给定两张图片两个文本，分别进行宽高，位置，文本内容，字体大小，颜色的设置。
//zscanvas表示新创建的图片的id，#im表示输出的img的图片的id
//不过页面必须先给出一个<img>标签
	var ims = ['winter.jpg', 'summer.jpg'];
	var imgXs = [0, 50];
	var imgYs = [0, 100];
	var imgWs = [300, 100];
	var imgHs = [400, 100];
	var txts = ['我是一个文本', '我是更多文本'];
	var txtXs = [20, 0];
	var txtYs = [50, 200];
	var fonts = ['20px 微软雅黑', '30px 微软雅黑'];
	var colors = ['#000', '#ff0000'];
	createToImage('zscanvas', 300, 400, ims, imgXs, imgYs, imgWs, imgHs, '#im', true, txts, txtXs, txtYs, fonts, colors);

	
	//页面DOM元素只需要给定这个img标签即可
	<img src="" id="im" />
	

这里给定一个效果图：