vue.js纯前端实现图片下载/图片合并(插件html2canvas)

5,009 阅读1分钟

前言

产品经理提了个需求,要将一张二维码和不同海报合并,供客户下载扫描。这个时候咱们后端小姐姐偷懒了,觉得后端做太麻烦了,私下找我py一波,这个时候我又禁不住美女诱惑,没办法只能妥协前端来处理了。。。哎,做一个前端好累!!!话不多说,直接先上实现效果

实现效果

任选两张图片,布局成已经合并好的样子展示在前端页面上,如果需要下载则调用js方法

下载成功后的效果

原理

其实原理很简单主要就是利用canvas,将两张图片生成一张以及下载到本地

使用方法

1安装插件 yarn add html2canvas或npm install html2canvas

2组件引入 import html2canvas from 'html2canvas'

3代码示例

总结

总结啥总结的呀,功能实现后那必须到后端小姐姐那里去炫技一波呀,看哥这又给你解决一麻烦,还不给哥递茶,哈哈哈哈哈哈哈!!!