canvas 做商品二维码分享图片

//html  部分
<div id="qrcode" style="display: none;"></div>
  <canvas id="test" width="400" height="560">

  </canvas>
  <img id='imgShow' src="" alt="">
  //javascript 部分
{!js::import($webRoot.'qrcode.min.js')}
<script type="text/javascript">
		/**
		 * 生成圆形 方法封装
		 */
	function roundedRect(ctx,x,y,width,height,radius){
	　　ctx.beginPath();
	　　ctx.moveTo(x,y+radius);
	　　ctx.lineTo(x,y+height-radius);
	　　ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
	　　ctx.lineTo(x+width-radius,y+height);
	　　ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
	　　ctx.lineTo(x+width,y+radius);
	　　ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
	　　ctx.lineTo(x+radius,y);
	　　ctx.quadraticCurveTo(x,y,x,y+radius);
	　　ctx.stroke();
	};
	var qrcode = new QRCode("qrcode", {
		text: "{$shareurl}",//这里是二维码内容
		width: 140,
		height: 140,
		colorDark : "#000000",
		colorLight : "#ffffff",
		correctLevel : QRCode.CorrectLevel.H
	});
		var mycanvas = document.getElementById('test');
		var ctx = mycanvas.getContext('2d');
		　ctx.fillStyle="#f3af4c";//背景色
		　ctx.fillRect(0,0,400,560);//背景位置与宽高
			//团标题 开始
			ctx.font = "20px SimHei";
			ctx.fillStyle = "#fff";
			ctx.fillText("{$title}", 10, 28);
			//团标题 结束
		  　//白色矩形部分 开始
		  　　ctx.moveTo(40,203);
		  　　ctx.strokeStyle = 'rgba(255,255,255,1)';
		  　　ctx.fillStyle = 'rgba(255,255,255,1)';
		  　　roundedRect(ctx,10,34,380,480,10*2);
		  　　ctx.fill();
		  　　ctx.closePath();
		  //白色矩形部分 结束
		  //产品展示 开始
			var imgPorduct = new Image();
				imgPorduct.src = '{$productpic}';//商品图片路径
				imgPorduct.onload = function(){
          ctx.save();//保存当前画面状态，必须是在画图片前，而且后续的绘画必须在该函数下
					ctx.drawImage(imgPorduct,90,40,200,200);
          //邀请二维码 开始
          var codeCanvas=document.getElementById("qrcode").getElementsByTagName("canvas")[0];
         var codeContext =codeCanvas.getContext("2d");
         var imgsSrc1 =codeCanvas.toDataURL('image/jpg');
          var imgQRcode = new Image();
         imgQRcode.src = imgsSrc1; // 设置图片源地址
         imgQRcode.onload = function(){
                 ctx.save();//保存当前画面状态，必须是在画图片前，而且后续的绘画必须在该函数下
                 ctx.drawImage(imgQRcode,120,250);
                 //参团描述 开始
                 ctx.font = "14px SimHei";
                 ctx.fillStyle = "#333";
                 var content = '{$content}';//这里是内容字符串
                 //自动换行
                 let textareaWidth = Math.ceil(mycanvas.width/14); //画布宽度除以字号
                 let text = [];//存放切割后的内容
                 while (content.length > 0) {
                  text.push(content.substr(0, textareaWidth));
                  content = content.substr(textareaWidth, content.length);
                 }
                 //输出描述文字
                 let h = 404;
           for (let i = 0; i < text.length; i++) {
               h += 20;
               ctx.fillText(text[i], 28, h);
           }
                 //参团描述 结束
                 //提示语 开始
                 ctx.font = "16px SimHei";
                 ctx.fillStyle = "#fff";
                 ctx.fillText("发送图片给好友，邀请加入团购", 40, 540);
                 //提示语 结束
                 //canvas 画完图 一定要生成图片流，作为img 的src属性值，同时隐藏canvas，只展示img 手机才能下载，或分享图片

           　　　　　　var _imgSrc = mycanvas.toDataURL("image/png",1);
                       mycanvas.style.display="none";
           　　　　　　var imgShow = document.getElementById('imgShow');
           　　　　　　imgShow.setAttribute('src', _imgSrc);
         }
         //邀请二维码 结束
				}
		  //产品展示 结束


	 </script>

希望对你有帮助，打完收工