html2canvas生成图片

在项目中引入html2canvas插件

 

Html

<!--所要生成图片的区域-->
<div ref="capture">
    <div>内容区</div>
</div>

 

Js

save() {
      //this.$refs.capture指的是所要生成图片的区域
      //useCORS: true解决跨域问题
      html2canvas(this.$refs.capture, { useCORS: true }).then((canvas) => {
        this.images = [];
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        //将图片显示出来
        this.images.push(image.src);
        this.show = true;
      });
    },

 

 

 

注意：在生成图片的时，可能会遇到问题， 比如：生成图片的区域中存在头像（或者其他图片），生成的图片中图片不显示，

           如下图：头像以及二维码均未显示，

　　　解决方法：对图片进行base64转码，请查看 https://www.cnblogs.com/dreamstartplace/p/14602188.html