canvasピクチャペイント

H 5のimgラベルは携帯電話側で自動的に保存できますが、私のニーズはこのようなもので、1枚の画像には割引コードがあり、コピーをクリックすることができ、合成された写真があり、長押しすると全体的に保存されます.だからcanvas画像合成の機能を使いました.描画する前に、canvasの描画方法について説明します.HTML 5には、drawImageメソッドでcanvasに他の画像(imgおよびcanvas要素)を挿入できる新しい要素canvasが導入されています.drawImage関数には、3つの関数のプロトタイプがあります.

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

最初のパラメータimageは、HTML ImageElement、HTML CanvasElementまたはHTML VideoElementをパラメータとして使用できます.dxとdyはcanvasでimageが位置決めする座標値である.dwおよびdhは、canvasにおいて描画される領域(dxおよびdy座標に対するオフセット量)の幅および高さの値である.sxおよびsyはimageが描画する開始位置であり、swおよびshはimageが描画する領域(imageのsxおよびsy座標に対するオフセット量)の幅および高さの値である.次からコードをつけます

	drawimg() {
		var that = this;
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = 624;//canvas     
		canvas.height = 1103;//canvas    
		var img1 = new Image();
		img1.crossOrigin = "";//    
		img1.src = 'http://morefun.image.alimmdn.com/neateest/background.png'
		img1.onload = function () {
		//     canvas 
			ctx.drawImage(
				this, 0, 0
			);
			var img2 = new Image();
			img2.crossOrigin = "";
			img2.src = "http://morefun.image.alimmdn.com/youmai/xuxu/photo.png"
			img2.onload = function () {
				ctx.drawImage(
					this, 12, 12
				)
				//canvas    
				ctx.font = "bold 44px       ";
				ctx.fillStyle = "#890a0a";
				for (var i = 0; i < that.promocode.length; i++) {
					ctx.fillText(that.promocode[i], 40 + i * 37, 997);
				}
				that.canvasimg = canvas.toDataURL("image/png")//      base64  ，ios        ，         base64    url    
			}
		}

これでcanvasが描画されます.