vue html2canvas页面生成图片

vue html2canvas页面生成图片

npm install html2canvas

页面引入

<template>
	<div class="shareImg" id="shareImg"></div>
	<div class="mask_main" id="posterId">需要生成图片的内容</div>
</template>
<script>
	import html2canvas from "html2canvas";
	export default {
	  data() {
	    return {}
	   },
	   mounted() {
	   let _this=this
	   //页面禁止滑动
	    _this.stopScroll();
	    setTimeout(function() {
            _this.generateImage();
          }, 3500);
	   },
	   methods: {
		   bodyScroll(event) {
		     event.preventDefault();
		    },
		    stopScroll() {
		      document.body.style.overflow = "hidden";
		      document.addEventListener("touchmove", this.bodyScroll, false);
		    },
		    startScroll() {
		      document.body.style.overflow = ""; // 出现滚动条
		      document.removeEventListener("touchmove", this.bodyScroll, false);
		    },
		    // 将传入值转为整数
		    parseValue: function(value) {
		      return parseInt(value, 10);
		    },
		    generateImage: function() {
		      //生成海报图片
		      var _this = this;
		
		      // 获取想要转换的dom节点
		      var dom = document.querySelector("#posterId");
		      var box = window.getComputedStyle(dom);
		
		      // dom节点计算后宽高
		      var width = _this.parseValue(box.width);
		      var height = _this.parseValue(box.height);
		
		      // 创建自定义的canvas元素
		      var canvas = document.createElement("canvas");
		
		      // 获取画笔
		      var context = canvas.getContext("2d");
		
		      // 将所有绘制内容放大像素比倍
		      // context.scale(scaleBy, scaleBy);
		
		      // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
		      var w = document.getElementById("posterId").style.width;
		      var h = document.getElementById("posterId").style.height;
		
		      html2canvas(dom, {
		        backgroundColor: "#bef0fb",//背景色，不要背景色时为null
		        canvas: canvas,
		        useCORS: true
		      }).then(function(canvas) {
		        // 将canvas转换成图片渲染到页面上
		        var url = canvas.toDataURL("image/png"); // base64数据
		        var image = new Image();
		        image.src = url;
		        var shareImg = document.getElementById("shareImg");
		        // console.log(shareImg);
		        image.style.width = "100%";
		        image.style.height = "100%";
		        shareImg.appendChild(image);
		
		        shareImg.style.opacity = "1";
		        //页面取消禁止滑动
		        _this.startScroll();
		        Indicator.close();
		      });
		    },
	   }
    }
</script>