如何使用画布二维码将微信小程序保存到手机相册

前言

用画布画海报的过程中，不建议用原生来画图片，因为默认不支持rpx像素，px也不会自适应。

推荐的插件画师

Github地址

Github.com/Kujiale-Mob(本地下载)…

配置非常简单易用，无论是画矩形还是把图片合成画布；或者定义自己的文字；很方便。

附上一个简单的例子

painter : custom style=' custom style ' : palette=' imgDraw '///const _ this=this；wx . getsystem info({ success(RES){ _ this . draw canvas(RES . window height)；} }) drawCanvas(height) {//这里Canvas的高度是动态获取装备的高度，这样const that=这是自适应的；让heightVal=height * 2 ' rpxthis . imgdraw={ width : ' 750 rpx '，height: heightVal，background: '#fff '，view :[{ type : ' rect '，css: { top: '20rpx '，left: '130rpx '，color: '#1A1A1A '，width: ' 660rpx '，height : ' 2220/a.jpg '、css: { top: '36rpx '、left: '16rpx '、width: '188rpx '、height: '188rpx' }、{ type: 'text '、text: ' '、Css: {top:' 54rpx '、left:' 260rpx '、fontsize: ' 48rpx ' URL : '/icon-location . png '，css: { top: '275rpx '，left: '260rpx '，width: '26rpx '，height: '168rpx' }，{ type: 'image '，Url:' QR code.png '，CSS : {top:' 646rpx '，left 3: showtoast ({//title : '保存成功'，//icon : '成功'，//duration 3360 800，//mask : true//})；}，fail(RES){//mpvue . show toast({//title : ' save failed '，//icon :' fail '，//duration 3360 800，//mask : true//})；} });}，这涉及到绘制二维码。如果你的二维码图片不是在线链接，需要做一些小操作。

我的项目中二维码的图片是一个流，所以默认情况下我可以用img的src发送get请求来获取这个图片。

因此，url将直接发送get请求来获取图片。

画布的层次

画布的层次最高，底部的共享块会被覆盖。这时，你需要使用两种方案，一种是纯显示，用普通html编写，并向用户展示名片。

下载或分享时，使用canvas制作想要的图片，然后调用微信的save api下载或分享图片。

让{ path : _ _ path }=mpvue . getstoragesync(' createImagePath ')mpvue . save imagetotopsalbum({ file path : _ _ path，Success (RES) {//mpvue。showtoast ({//title : '保存成功'，//icon : '成功'，//duration 3360 800，//mask : true//})；}，fail(RES){//mpvue . show toast({//title : ' save failed '，//icon :' fail '，//duration 3360 800，//mask : true//})；}});这时，保存名片的功能就可以顺利完成了。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。