首页技术博客 技术教程 正文

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

3周前 ( 02-14 ) 73 0条评论

经常做一些类似的微信公众号项目的话,肯定会遇到生成图这个东西,我们可以用原生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简直…一言难尽


文章版权及转载声明

本文作者:符文浩 网址:http://fuwenhao.com/post/350.html发布于 3周前 ( 02-14 )
文章转载或复制请以超链接形式并注明出处。

发表评论

评论列表 (暂无评论,73人围观)参与讨论

还没有评论,来说两句吧...

取消
支付宝二维码
支付宝二维码
微信二维码