微信公众号项目使用html2canvas来生成海报(生成图)

经常做一些类似的微信公众号项目的话，肯定会遇到生成图这个东西,我们可以用原生canvas写，但是用html2canvas的话更方便简单，也为了偷懒吧…

但是这个插件，遇到ios设备简直是噩梦，比如某些ios手机，系统版本过高，这个插件就容易不起效果…emm，只能将就了

首先

npm install html2canvas --save
npm install jquery --save

为什么要在vue里面用jquery,因为用jquery写这个html2canvas好些一点吧…(虽然我知道这是不对的)

在项目页面

var $ = require( "jquery" );
var html2Canvas = require("html2canvas")

在html上

  <img src="" alt="" class="canvas">

然后我们在mounted生命周期里面使用，你也可以用一个方法包裹它，然后再调用

mounted() {
  // var scale = 2; //放大倍数
     html2Canvas(document.querySelector(".lowder"),{
      // backgroundColor:'#ffffff',
      // scale:scale,
      useCORS: true, // 允许图片跨域
      // dpi: window.devicePixelRatio * 2, // dpi  如果模糊的话 就把dpi和scale缩放的值调大 dpi越高生成的图片越大
      // height: document.documentElement.clientHeight
    }).then(function(canvas) {
        var a = canvas.toDataURL();
        $('.canvas').attr("src", a)
    });
},

document.querySelector(".lowder")这个我要特别解释一下，他这个就是你里面写哪个标签，它就会把这个标签里面所有的内容导出为一张生成图

最后给一个建议，能用原生canvas就尽量用吧，因为ios简直…一言难尽