uniapp 生成二维码长按保存_动态个性化彩色二维码制作方法

前几天在网上学习了一个彩色动态二维码的制作方法,

对比静态的黑白二维码,这个彩色的动态二维码确实会更加吸引人的关注。也更加有个性化,可以自定义动图,二维码效果,我们看下成品。

bec3c663f087225fec24790d9512f1de.gif

绯红女巫

8b26d9b51a026d1ab30a634d7f1fcf93.gif

最爱的寡姐

c329dd394ff2ed755c078bf3f12096fc.gif

还有最近很火的哪吒

下面出一个教程:

第一:准备一个想要制作的二维码,要黑白的,

b7c66f08424543cb96c337c615a5d442.png

然后,打开草料二维码网站:https://cli.im/deqr,进行二维码解码。

055188f3de5d9c3ac13b33bd347e6c61.png

得到一个解码地址:http://weixin.qq.com/r/mUSSiqrEZPcbre7p9xGL

第二步:选择一张自己喜欢的 gif 背景图,素材自行百度。

然后打开全彩动态二维码制作网站:http://www.mobanma.com/visual,上传并准备好的 gif 背景图。

2a8591a316c4ed1ae809db989333dfbe.png

填入刚才解出的二维码网址,选择自己喜欢的码眼和元素,点击生成。

46bf2aa3de6fe205720e69387f1e5a08.png

鼠标右键进行保存。

b7ed7f19e547068b24093166ba57276c.png

最后一步,就是要将图片多余的部分去掉,

16ad5d9d33e0658eb3e80fda628cb8cc.png

提供一个soogif 网站:https://www.soogif.com。这个网站有一个在线剪辑 gif 图片的功能。

(会PS的可以直接跳过这一步)

21d763df67ab461282d5af4f9af63c27.png

上传保存好的 gif 图片,剪辑保留自己需要的部分即可。

e66b7f71d8b3ffd35881e3f4010f021b.png

直接下载,会有水印的,一天只可以下载一张,去水印下载是要充会员的

19fb79bf3485ae02828f3fafef70eb14.png

也可以用PS等工具来进行裁剪

37605a3fccb23a3a403b3e25bf8e7683.png

,来看看效果图。

15a786151c4df58fe89398e849b506fe.gif
bf9cfa85dd6822cb6a506fcc34ce9b97.gif

不会的朋友可以加我微信:KONGKIN1010,有空的可以帮你制作一个。

如果朋友们喜欢的请点击一下右下角的:在看。

提醒一句,动态二维码在手机微信上不能长按识别,只能添加表情,只能用手机扫描,QQ就可以把动图保存到手机上。

92755efc19a4a372c80228a81bba2560.png
382edeba4df7a2bd7a9d21877d05b283.gif

喜欢记得来一个

f7751992605be5b8e87d7a8075593494.gif

“ 想制作一个动态个性化二维码吗?

扫描上面的动态二维码

(PS:不能长按识别,只能手机扫描)

或加微信号:KONGKIN1010

备注二维码

你可以使用uniapp的插件来生成二维码保存。以下是一种实现方法: 1. 安装插件:在uniapp的项目目录下,使用npm或yarn安装uniapp-qrcode插件。 ``` npm install uniapp-qrcode --save ``` 2. 在需要生成二维码的页面引入插件: ```javascript import qrcode from 'uniapp-qrcode'; ``` 3. 在需要生成二维码的方法中调用插件生成二维码: ```javascript export default { methods: { generateQRCode() { const canvasId = 'qrcode-canvas'; // 在页面中定义一个canvas标签,并设置id为qrcode-canvas const text = 'https://example.com'; // 要生成二维码的文本内容 qrcode({ canvasId: canvasId, text: text, width: 200, // 二维码宽度,根据实际需求调整 height: 200 // 二维码高度,根据实际需求调整 }); } } } ``` 4. 在页面中使用canvas标签显示生成的二维码: ```html <template> <view> <canvas id="qrcode-canvas"></canvas> <button @click="generateQRCode">生成二维码</button> </view> </template> ``` 5. 如果需要保存生成的二维码图片,可以使用uniapp的saveImageToPhotosAlbum方法: ```javascript export default { methods: { saveQRCode() { uni.canvasToTempFilePath({ canvasId: 'qrcode-canvas', success: function(res) { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { uni.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); } }); } }); } } } ``` 在页面中添加一个按钮,点击按钮即可保存生成的二维码图片。 这样,你就可以在uniapp中生成并保存二维码了。记得根据实际需求调整二维码的大小和保存逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值