有关vue html2canvas生成海报功能的实现
有关vue html2canvas生成海报功能的实现
这是我第一篇csdn文章，作为一名前端，而且现在电商比较流行的情况下 很多电商公众号商城都用到了生成海报图片长按保存到相册然后可以转发给好友或者分享到朋友圈 在Web前端中，生成图片非Canvas莫属 而html2canvas.js就是一款非常优秀的插件
就比如我们想实现下面的这样的一个效果 它现在是一张图片 用户长按就会弹出系统的保存到手机的弹窗
1.首先我们要布局
上面就是整个html代码了 css代码就省略了
这一段代码呢 就是当canvas执行完成之后html代码将会隐藏 在原来位置会将图片展示上去 然后用户可以长按保存 我们用到了v-show
2 使用canvas生成图片
首先我们肯定要npm 下载和导入
下面一段是html2canvas执行的函数了
在执行时我们要确保页面都加载完毕 所以我们最好是在页面里面的图片加载完毕之后去执行这个函数
也就是在这种图片load完成时去执行 为了防止页面出现空白，同时我们加上了loading图 为了给用户更好的体验 很多人会遇到跨域的情况 这是我们可以加入一些配置 例如useCORS：true; allowTanit:true;表示我们允许跨域 下面是官网提供的一些配置信息
官网链接: link.
3.过程中可能会遇到的问题
1.图片不显示这个可能的原因就是上面说的图片跨域了，设置下面两个为true就好了
2 清晰度问题 当你觉得生成的图片不清晰时 我们可以配置他的scale属性来调节它的清晰度
3.我也是最近才遇到这个问题就是代码没变 突然就是ios14不能使用了 没反应 最后在我各方打听下原来也不是哦我们的问题 我们只需要讲html2canvas的版本降级就好了 下面是版本信息
由于是第一次在csdn上写文章 有需要改进的地方请指出 我会改进的