微信小程序使用canvas绘图，并保存下载到本地。圆形头像，虚线网络图片

最新推荐文章于 2024-07-22 18:18:11 发布

肖肖肖丽珠

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量1k

点赞数

分类专栏：小程序文章标签：微信小程序 linq javascript

本文链接：https://blog.csdn.net/qq_33769914/article/details/125148615

版权

本文介绍了如何在微信小程序中利用canvas绘制圆形头像，并结合虚线和文字信息生成个性化海报，同时讲解了如何将生成的图片保存并提供下载。通过示例代码展示了从网络图片加载到绘制完成再到图片转换与下载的完整过程。

摘要由CSDN通过智能技术生成

wxml

<canvas type="2d" id="shareCanvas" style="height: 1372rpx;width:728rpx;position: fixed;z-index: -100; left: -99999rpx"></canvas>

<view class="share-mask" wx:if="{ {share}}" bindtap="hideshareShow">
<image src="{ {canvasImg}}" mode='widthFix' style="width: 600rpx;height:1644rpx;border-radius:20rpx;" show-menu-by-longpress="true"></image>
<button class="downLoad-btn" catchtap="download">下载图片</button>
</view>

data: {
       canvasImg: '',
       share: false, //是否分享
       base64Qr:'',//二维码接口获取的base64的图片
       drawing: false, //是否绘制海报中
       loading: false, //点击分享时，是否绘制海报中
        picInvitebg2:"https://wechat/static/pages_ailive/invitebg2.png"//网络图片
   },

//显示遮罩层
   shareShow() {
       setTimeout(() => {
               this.setShareCanvas();// 分享绘图
       }, 800)
       this.setData({
           loading: true
       })
       wx.showLoading({
           title: '海报生成中',
       })
   },

setShareCanvas() {
       const self = this;
       const info = this.data.info;
       const query = wx.createSelectorQuery();
       query.select('#shareCanvas')
           .fields({
               node: true,
               size: false
           }).exec((res) => {
               const canvas = res[0].node;
               const ctx = canvas.getContext('2d');
               canvas.width = 728;
               canvas.height = 1372;
               self.setData({
                   drawing: true,
               })
               new Promise(function (resolve) {
                   // 绘制背景图片
                   wx.getImageInfo({
                       src: self.data.picInvitebg2, //网络图片
                       success(res) {
                           const img = canvas.createImage();
                           img.src