微信小程序--保存图片到相册功能实现

项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。废话不多说,直接上干货…

功能逻辑:

先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限并且授权了,那就保存图片,显示保存成功;如果请求过且拒绝授权,就跳到设置页,让用户重新授权。

上代码:

// wxml文件
<view bindtap='save'>保存图片到相册</view>
// js文件
//点击保存图片
  save () {
   
    let that = this
    //若二维码未加载完毕,加个动画提高用户体验
    wx.showToast({
   
      icon: 'loading',
      title: '正在保存图片',
      duration: 
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序实现保存图片功能的基本步骤如下: 1. 在小程序的页面中,首先需要引入 `wx.canvas` 用于绘制和保存图片。 2. 在页面中创建一个 `<canvas>` 标签,设置宽高和唯一的 `canvas-id`。 3. 在 `<canvas>` 中使用 `wx.createContext` 创建绘图上下文对象。 4. 使用绘图上下文对象的 `drawImage` 方法将图片绘制到 `<canvas>` 中。 5. 创建一个按钮或其他触发保存操作的交互元素,并在点击事件中编写保存图片的逻辑。 6. 在点击事件中,使用 `wx.canvasToTempFilePath` 方法将 `<canvas>` 中的内容保存为临时文件路径。 7. 使用 `wx.saveImageToPhotosAlbum` 方法将临时文件保存到用户相册中。 下面是一个实现保存图片功能的示例代码: ```javascript // 在页面中的 js 文件中 Page({ saveImage: function() { const ctx = wx.createCanvasContext('myCanvas', this); // 绘制图片到 canvas ctx.drawImage('/path/to/image.jpg', 0, 0, 300, 200); // 绘制完成后调用 draw 方法 ctx.draw(false, () => { // 将 canvas 中的内容保存为临时文件 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { // 保存临时文件到用户相册 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail: (err) => { console.error(err); } }); }, fail: (err) => { console.error(err); } }, this); }); } }); ``` 在上述代码中,点击 `saveImage` 按钮会执行保存图片的逻辑,将图片绘制到 `<canvas>` 中,然后将 `<canvas>` 中的内容保存为临时文件,并最终保存到用户的相册中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值