微信小程序> 微信小程序canvas保存绘制图片

微信小程序canvas保存绘制图片

浏览量:600 时间: 来源:_52赫兹_

上篇文章大概写了一下canvas绘制图片的问题,那么接下来记录一下canvas保存图片的问题~

wx.canvasToTempFilePath()//把当前画布指定区域的内容导出生成指定大小的图片

那么我们首先来了解一下这个api的参数们:
小程序
除了起始位置及绘制图片的大小,那么需要注意的我已经标记出来了,其中很多其实也不能设置直接用默认值即可。
其中api的成功的回调中会返回生成文件的临时路径,那么我们拿到临时路径进行保存图片到本地就行了。

wx.saveImageToPhotosAlbum()//保存图片到系统相册。

保存图片到系统相册的api参数:
小程序
这个地方需要注意的是要保存的filePath,图片文件路径,可以是临时文件路径或永久文件路径,不支持网络图片路径

那么由canvas产生要保存的临时路径,然后用保存图片到系统的api进行保存即可,代码如下:

  canvasSave(){    let that = this;    //注意这个地方因为我绘制的大小就是我要保存的区域,所以我直接用了默认的横纵坐标和画布区域    wx.canvasToTempFilePath({      canvasId: 'firstCanvas',      success(res) {        console.log(res.tempFilePath);        saveImg(res)      },      fail: function() {        console.log('fail-downloadFile')      }    })    let saveImg = function(resourse) {      console.log("保存图片:",resourse);      wx.saveImageToPhotosAlbum({        filePath: resourse.tempFilePath,        success: function(res) {          console.log(res)          applyApi.toast('保存成功!')        },        fail: function(res) {          console.log(res)        }      })    }  }

这样就解决了用canvas绘制图片并保存到本地的问题。

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎