js组合图片(在图上画二维码)

原创
02/23 21:52
阅读数 104

总的有两个依赖, jquery和jquery.qrcode 。实现原理其实就是图层的堆叠。做二维码推广的时候要用到此方法

<body>

	<div class="" id="qrcode" style="display: none;"></div>
	<canvas id="sec_canvas"  ></canvas>
	<img id="bg_pic" src="/pic/tgdt1.jpg" />
	<img class="canimg" />	

</body>
<script type="text/javascript">
	
	 //获取可显示区域的宽和高
	 var width = $('.user_cont').width(); //宽度 
	 var height = $('.user_cont').height(); // 高度
	//设置底图显示大小
	 var bg_pic = document.getElementById("bg_pic");
	 bg_pic.style.width = width+'px';
	 bg_pic.style.height = height+'px';
	
	 //先把二维码内容画出来,不然等下太慢了
      new QRCode(document.getElementById("qrcode"), {
          text: location.origin+'?dl='+sessionStorage.getItem('id'),
          width: 800,
          height: 800
      });  
      //获取二维码图片
       var qr_canvas1=document.getElementsByTagName('canvas')[0];
       var image = new Image(); 
       image.src = qr_canvas1.toDataURL("image/png");
	
	 
	 //因为是要在背景图上画东西,所以要等背景图加载完成后才能继续下一步
	 bg_pic.onload = function() { //必须等待图片加载完成
		 //弄张画布出来
		 var c = document.getElementById("sec_canvas");
		 c.width = width
		 c.height = height
		 //获取画布,然后就可以开始画了
		 var ctx = c.getContext("2d");
		 
		 //先把背景图先画上去
		 {
			 ctx.drawImage(bg_pic, 0, 0, width, height); //绘制图像进行拉伸
		 }
		 //画二维码
		 {
             //要等二维码的图片生成后才能画 ,如果画出来的是空白,可以能是图片还没生产好可以使用onload方法  
             //img.onload = function() {}
		     ctx.drawImage(image, width*0.3, height*0.69, width*0.4,  height*0.225); 
	         
		 }
		 {
			 //写点文字上去
			 ctx.font = 'bold '+height*0.028+'px sans-serif';
			 ctx.fillStyle = '#fcde04';
			 ctx.fillText('【长按】保存/转发', width*0.25, height*0.96);
		 }
		 //绘制完成,转为图片
		 setTimeout(function() { //在ios上无法在画完之后取到整个画布内容,加了个settimeout
			 var bigcan = $('canvas')[0];
			 let images = new Image();
			 images.src = bigcan.toDataURL("image/png");
			 //alert(bigcan.toDataURL("image/png"))
			 images.setAttribute("crossOrigin", 'Anonymous')
			 {
				 var cc1=document.getElementsByTagName('canvas')[1];
			     cc1.toDataURL("image/png"); 
			     
			  $('.canimg').css('width',  width);
			  $('.canimg').css('height',  height);
			  $('.canimg').attr('src',  cc1.toDataURL("image/png"));
			  //图画好,画图过程使用的垫子全部都要隐藏起来
			  c.style.display = 'none';
			  bg_pic.style.display = 'none';
			  
			 }
			 }, 0
		 )
		 
	}
	 
</script>

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部