威宁热线

威宁团菜到家

[教程分享] 微信公众号项目使用html2canvas来生成海报(生成图)的例子

[复制链接]
威宁热线 发表于 2021-2-16 00:15:54 | 显示全部楼层 |阅读模式
经常做一些类似的微信公众号项目的话,肯定会遇到生成图这个东西,我们可以用原生canvas写,但是用html2canvas的话更方便简单,也为了偷懒吧…
但是这个插件,遇到ios设备简直是噩梦,比如某些ios手机,系统版本过高,这个插件就容易不起效果…emm,只能将就了

首先
  1. <p>npm install html2canvas --save </p><p>npm install jquery --save</p>
复制代码
为什么要在vue里面用jquery,因为用jquery写这个html2canvas好些一点吧…(虽然我知道这是不对的)

在项目页面
  1. <p>var $ = require( "jquery" );</p><p>var html2Canvas = require("html2canvas")</p>
复制代码
在html上
  1.   <img src="" alt="" class="canvas">
复制代码

然后我们在mounted生命周期里面使用,你也可以用一个方法包裹它,然后再调用
  1. <p>mounted() {</p><p>  // var scale = 2; //放大倍数</p><p>     html2Canvas(document.querySelector(".lowder"),{</p><p>      // backgroundColor:'#ffffff',</p><p>      // scale:scale,</p><p>      useCORS: true, // 允许图片跨域</p><p>      // dpi: window.devicePixelRatio * 2, // dpi  如果模糊的话 就把dpi和scale缩放的值调大 dpi越高生成的图片越大</p><p>      // height: document.documentElement.clientHeight</p><p>    }).then(function(canvas) {</p><p>        var a = canvas.toDataURL();</p><p>        $('.canvas').attr("src", a)</p><p>    });</p><p>},</p>
复制代码

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

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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表