vue 使用 html2canvas 截图

https://blog.csdn.net/weixin_41854372/article/details/99671131

 

https://www.hangge.com/blog/cache/detail_2211.html

 

// html2canvas 是把页面中一个标签 生成一张图片 （一帮用于生成海报）
// 只要浏览器支持 Canvas 即可，包括：Firefox 3.5+、Google Chrome、Opera 新的版本、IE9 以上的浏览器。
// 移动端 也就是手机 本人实际操作也是可以兼容的

一、（1）首先到官网将 html2canvas.js 下载到本地。
官网地址：http://html2canvas.hertzen.com/

二、直接在index.html 直接 引入 下载好的包

<script type="text/javascript" src="js/html2canvas.js"></script>
（注意这里的 html2canvas.js 就是我下载好的   ）

• 1
• 2

或者： npm install --save html2canvas

三、组件使用：
组件引用： import html2canvas from ‘html2canvas’

 <div id="capture" style="padding: 10px; background: #f5da55; width: 200px;">
  <h4 style="color: #000; ">欢迎访问 hangge.com</h4>
</div>
<button type="button" name="button" onclick="convert()">开始生成</button>

//开始转换
  function convert() {
  //生成  canvas
    html2canvas(document.body).then(canvas => {
      document.body.appendChild(canvas)  
    });
 //生成海报
  html2canvas(document.querySelector("#capture")).then(canvas => {
        var imgUrl = canvas.toDataURL("image/png");
   }); 
  }

四、大概就是这样了 是不是很简单 ？ 什么你还是不会 ？ 好吧好吧 给你看看我参考的博客
http://www.hangge.com/blog/cache/detail_2211.html

五、 好了 现在我来说说我遇到的 bug吧 !!
1、生成好海报 成功后 ， 但是海报中没有图片 ， 本来是图片的位置 会留一片空白
解决方法：
①、检查是否是本地图片 因为 html2canvas 里面的运行机制 所以 如果是本地图片 就不会有这种问题
②、检查 你用的 网上路由照片 是否允许跨域访问
③、用canvas 把我们的url 照片路径转成 Base64
方法截图：

	  getBase64(){
     			   var url = this.imageUrl
        //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
			        var Img = new Image();
			        Img.crossOrigin = 'Anonymous'
			        Img.src = url + '?time=' + new Date().valueOf();
			        Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
			              var canvas = document.createElement("canvas"), //创建canvas元素
			                  width=Img.width, //确保canvas的尺寸和图片一样
			                  height=Img.height;
			                  canvas.width=width;
			                  canvas.height=height;
			                  canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
			                  var imgUrl = document.getElementById('handleLoad2')
			                  //这里的 imgUrl  就是你要截图里面的照片标签位置了
			                  imgUrl.src = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
			                  return
			        };
			    },  

前面三个都没问题但是还是 不可以bug 修复 ？看来只能用压箱底的绝招了
①、求助后台小哥给你可以 图片 转 Base64 的接口，把你生成图片 里面消失的图片 都转成 Base64 然后在生成海报就可以了 \ φ(．．)
2、生成海报后 图片 有时候 头部会有多余的空白
解决方法：
①、回到你要生成海报 的顶部 在进行生成

				 	setScrollTop(scroll_top) {
				      document.documentElement.scrollTop = scroll_top;
					      window.pageYOffset = scroll_top;
					      document.body.scrollTop = scroll_top;
					    },

			setScrollTop 函数是我自己写的回到顶部的方法
			
				 

还有不懂？ 加入qq一起讨论 2723934629；