vue 使用 html2canvas 截图

2020-12-22 17:30:52 阅读：233 来源： 互联网

标签：截图 vue Img canvas 生成 html2canvas document 图片

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 就是我下载好的   ）

或者： 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；

标签：截图,vue,Img,canvas,生成,html2canvas,document,图片
来源： https://blog.csdn.net/wwf1225/article/details/111562516

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 使用 html2canvas 截图

vue 使用 html2canvas 截图