（简单详细）uniapp实现自定义海报内容并生成海报二维码图片（可拖拽，可调节大小）

雨点打透心脏的1/2处 2023-10-09 14:59 9阅读 0赞

## 实现效果 ##

![cff1744df9284898a1cad2902b0dc278.png][]![9ad69179726c4247bd54b03c0bd831c7.png][]![92c3a20f3f9741f2a1444deeba040dd9.png][]

## 应用场景 ##

公司遇到一个需要实现自定义海报才可以满足客户需求的问题，实现自定义海报内容，同时上传的二维码可以自动调节，需要用到canvans的知识，如果没有，那么可以直接使用我的这个案例即可

## 案例地址 ##

[https://download.csdn.net/download/qq\_59747594/86782679][https_download.csdn.net_download_qq_59747594_86782679]

## 扩展1 ##

可以根据这个案例做扩展功能，例如下面这个插件可以根据内容自动生成二维码图片，与我们的插件结合变成，二维码内容可以自定义输入，并且拼接在海报上

[（最简单）uniapp微信小程序生成二维码图片插件\_\_揽的博客-CSDN博客\_uniapp生成二维码插件][uniapp_-CSDN_uniapp]

## 扩展2 ##

给大家推荐一个巨好使用的海报插件，基本可以满足正常的需求

[生成分享海报 可点击切换主题色 可生成二维码 h5小程序可用 - DCloud 插件市场][_ _ h5_ - DCloud]

[cff1744df9284898a1cad2902b0dc278.png]: https://img-blog.csdnimg.cn/cff1744df9284898a1cad2902b0dc278.png
[9ad69179726c4247bd54b03c0bd831c7.png]: https://img-blog.csdnimg.cn/9ad69179726c4247bd54b03c0bd831c7.png
[92c3a20f3f9741f2a1444deeba040dd9.png]: https://img-blog.csdnimg.cn/92c3a20f3f9741f2a1444deeba040dd9.png
[https_download.csdn.net_download_qq_59747594_86782679]: https://download.csdn.net/download/qq_59747594/86782679
[uniapp_-CSDN_uniapp]: https://blog.csdn.net/qq_59747594/article/details/126187589?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166616080816782248594315%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166616080816782248594315&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-126187589-null-null.nonecase&utm_term=%E4%BA%8C%E7%BB%B4%E7%A0%81&spm=1018.2226.3001.4450
[_ _ h5_ - DCloud]: https://ext.dcloud.net.cn/plugin?id=4018#detail