canvas生成海报

虽然之前也做过类似的生成海报的项目，但是这个项目我又网上查找了一下，发现一个插件挺好用的  html2canvas.js

http://html2canvas.hertzen.com/这里可以下载这个插件

用起来很方面

优先引入这个js

然后需要定义canvas容器，编写你需要生成的html

	//定义canvas
						
//生成图片展示的地方

//需要转换成图片的html
						
						

							
							
							
						
						

						
						
						

					

　　下面是如何使用js去把html生成图片

 var canvas = document.getElementById("myCanvas");
                                 var _canvas = document.querySelector('.wrap-con');
                                 var w = parseInt(window.getComputedStyle(_canvas).width);
                                 var h = parseInt(window.getComputedStyle(_canvas).height);
                                  //二倍图解决图片模糊
                                 canvas.width = w * 2;
                                 canvas.height = h * 2;
                                 canvas.style.width = w + "px";
                                 canvas.style.height = h + "px";

                                 var ctx = canvas.getContext("2d");

                                 ctx.scale(2, 2);
                                 html2canvas(document.querySelector('.wrap-con'), {canvas: canvas}).then(function (canvas) {
                                     //可以直接下载图片到本地
                                    /* document.querySelector(".down").setAttribute('href', canvas.toDataURL());*/
                                     //也可以直接将生成的图片放在img标签内，实现长按保存图片
                                     var url = canvas.toDataURL('image/jpg');
                                     console.log("url",url);这个就是生成的海报图片
                                     var pHtml = "";
                                    $(".bigImg").append(pHtml);
                                
                                 });

　　

 

 

转载于:https://www.cnblogs.com/kingsnowcan/p/H5_canvas20190422.html