1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | $( function () { draw( function () { //生成之后的回调 $( '#img' )[0].innerHTML= '<img src="' +base64[0]+ '">' ; //将base生成图片 }); }); var data=[图片1地址,图片2地址,图片3地址]; base64=[]; //用于保存生成之后的base64 function draw(fn) { var img1= new Image; img1.src = data[0]; img1.onload = function () { //这步必须,因为图片加载是异步的,必须等图片加载完成才开始下面的这些步骤 var c = document.createElement( 'canvas' ), ctx = c.getContext( '2d' ); c.width = img1.naturalWidth; c.height = img1.naturalHeight; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff' ; ctx.fill(); //生成一张图片1的底图 /*下面是为底图增加上文字*/ ctx.drawImage(img1, 0, 0, c.width, c.height);(绘制图片资源,x坐标,y坐标,宽,高) //设置字体样式 ctx.font = "24px Courier New" ; //设置字体填充颜色 ctx.fillStyle = "write" ; //从坐标点(92,800)开始绘制文字 ctx.fillText( "这是文字内容" , 92, 800); /*上面是增加文字,可以无限加*/ var img2= new Image; img2.src = data[1]; img2.onload = function () { //同理,如果是加载图片的话,需要等图片加载出来再下一步,所以要加onload ctx.drawImage(img2, 245, 660, 150, 150);(绘制图片资源,x坐标,y坐标,宽,高) base64.push(c.toDataURL( "image/jpeg" , 1)); //如果绘制完成了,就把base64数据填进数组,然后回调,没完成则继续这步 fn(); //回调 }; }; } ///如果是坐标相同,或者觉得代码这样不美观的,可以使用递归方法实现onload的步骤,例如: function draw(fn) { a(0); fn(); } function a(i){ if (i == 0) { var img1= new Image; img1.src = data[0]; img1.onload = function () { var c = document.createElement( 'canvas' ), ctx = c.getContext( '2d' ); c.width = img1.naturalWidth; c.height = img1.naturalHeight; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff' ; ctx.fill(); //生成一张图片1的底图 /*下面是为底图增加上文字*/ ctx.drawImage(img1, 0, 0, c.width, c.height);(绘制图片资源,x坐标,y坐标,宽,高) //设置字体样式 ctx.font = "24px Courier New" ; //设置字体填充颜色 ctx.fillStyle = "write" ; //从坐标点(92,800)开始绘制文字 ctx.fillText( "这是文字内容" , 92, 800); /*上面是增加文字,可以无限加*/ a(1); //到第2个步骤 } } else if (i == 1) { var img2= new Image; img2.src = data[1]; img2.onload = function () { //同理,如果是加载图片的话,需要等图片加载出来再下一步,所以要加onload ctx.drawImage(img2, 245, 660, 150, 150);(绘制图片资源,x坐标,y坐标,宽,高) base64.push(c.toDataURL( "image/jpeg" , 1)); //如果绘制完成了,就把base64数据填进数组,然后回调,没完成则a(2)到第三步; return ; }; } } |