前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序之保存图片到相册的几种方法

小程序之保存图片到相册的几种方法

作者头像
honey缘木鱼
发布于 2018-07-04 10:16:23
发布于 2018-07-04 10:16:23
3.5K00
代码可运行
举报
文章被收录于专栏:娱乐心理测试娱乐心理测试
运行总次数:0
代码可运行

保存图片到本地有两种方法,其一是网络图片保存到相册,其二本地图片保存到相册。

官方文档

保存图片前需要授权,因此我们先授权,代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//获取相册授权
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope:'scope.writePhotosAlbum',
success() {
console.log('授权成功')
}
})
}
}
})
//此方法可以写在app.js中,也可以写在调用保存按钮时。

获取授权

第一种方法,网络图片保存:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var imgSrc = "http://yijiao.oss-cn-qingdao.aliyuncs.com/images/http://tmp/wx1b4e5e756cd48af1.o6zAJsws4grEQvYrWTjBigy-6QaU.0llhudiKSF2V955a1c48350d9328ef064b4d36d12746.jpg"
    wx.downloadFile({
      url: imgSrc,
      success: function (res) {
        console.log(res);
        //图片保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (data) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function (err) {
            console.log(err);
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              console.log("当初用户拒绝,再次发起授权")
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
                  } else {
                    console.log('获取权限失败,给出不给权限就无法正常使用的提示')
                  }
                }
              })
            }
          },
          complete(res){
            console.log(res);
          }
        })
      }
    })

第二种方法:选择相册图片存入本地

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.chooseImage({
count:1,// 默认9
sizeType: ['original','compressed'],// 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'],// 可以指定来源是相册还是相机,默认二者都有
success:function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
console.log("choose image")
console.log(res)
var tempFilePath = res.tempFilePaths[0]
wx.getImageInfo({
src: tempFilePath,
success:function (res) {
console.log("get image info")
console.log(res)
wx.saveImageToPhotosAlbum({
filePath: res.path,
success(res) {
console.log("保存图片成功")
console.log(res)
wx.showToast({
title:'保存成功',
icon:'success',
duration:2000
})
},
fail(err) {
console.log('失败')
console.log(err)

if (err.errMsg == "saveImageToPhotosAlbum:fail cancel"){
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting["scope.writePhotosAlbum"]) {
console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
}else {
console.log('获取权限失败,给出不给权限就无法正常使用的提示')
}
}
})
}
}
})
}
})
}
})

如有疑问,请简信。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.06.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序保存图片到相册取消授权、拒绝授权到再授权
感觉比较坑的地方就是,授权取消——拒绝授权——取消保存图片这3种状况都要考虑。奇葩的是前2种错误格式还不一样。
hotqin888
2019/03/21
4.8K0
小程序保存图片到相册取消授权、拒绝授权到再授权
干货 | 微信小程序长按保存图片
微信浏览器打开h5页面如果是img标签的话,长按会弹出保存图片的选项。但是微信小程序里面不可以,需要自己写这个功能。 这个功能有两个点,一个是长按,一个是保存图片到本地。 1. 微信小程序关于图片长按的解释,有两种: 因此我们选用 bindlongpress 事件 2. 保存图片接口 微信小程序同样提供了保存图片的接口,是wx.saveImageToPhotosAlbum() 3. 值得说的是,保存的接口,两个需要注意的地方: ① 需要先授权,调用 wx.getSetting()方法
腾讯NEXT学位
2020/02/10
4.5K0
干货 | 微信小程序长按保存图片
利用云开发优化博客小程序(三)——生成海报功能
周末花了点时间把小程序版博客中的生成海报的功能给完成了,对于新手的我来说遇到的问题还是挺多的,这里简单记录下坑。
Bug生活2048
2018/10/18
1.1K0
利用云开发优化博客小程序(三)——生成海报功能
微信小程序向本地保存
image 提示框: wx.showToast(OBJECT) 显示消息提示框 wx.saveImageToPhotosAlbum({ filePath : "./test.png", //这个只是测试路径,没有效果 success(res) { console.log("success"); }, fail : function(res) { console.log(res); } }) wx.showToast({ title: '成功', icon: '
达达前端
2019/07/03
1.2K0
微信小程序向本地保存
基于云开发的小程序海报功能的实现
其实在最早之前的小程序中已经实现了一次,具体可以参考利用云开发优化博客小程序(三)——生成海报功能,主要还是使用原生的cavans进行组装,原本想代码copy过来改改就行了,但总觉得原来的代码写的不是特别好。
Bug生活2048
2019/05/16
1.3K0
基于云开发的小程序海报功能的实现
小程序如何生成海报分享朋友圈
项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。
super.x
2019/07/02
1.5K0
微信小程序之分享海报生成
为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。
IMWeb前端团队
2019/12/03
3.5K0
微信小程序之分享海报生成
【小程序】728- 小程序如何生成海报分享朋友圈
https://segmentfault.com/a/1190000019083548
pingan8787
2020/09/30
1.4K0
【小程序】728- 小程序如何生成海报分享朋友圈
Canvas绘图在微信小程序中的应用:生成个性化海报
从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样的新媒体盛行。企业的广告投入开始从电视等传统媒体向基于圈层文化的新媒体精准营销转移,甚至很多企业尤其互联网企业开始思考如何利用用户的自传播这种方式去宣传企业、实现商业目标。而用户的自传播很好的途径就是生产个性化的海报。举个最常见的例子,我第一次使用Keep是因为在朋友圈看到朋友分享她运动量的一个截图,当时在我看来非常酷,有心率脉搏呀、时速运动量啊、消耗的卡路里等,还有一个二维码,然后我就点了下载了Keep,这整个获客成本几乎为0,秒秒钟就多了一个用户。而实现这一过程的技术手段就可以用canvas。所以,canvas的盛行,与企业的精准营销和用户的自传播有很大的关系。 如极客时间的一些实现案例:
胡琦
2021/09/09
1.5K0
小程序图片下载授权|用户拒绝授权后如何引导用户重新发起授权
在小程序中,当用户想要保存图片时,一般需要用户授权相册权限,否则将无法保存,通常在保存接口被调用时需要先判断用户是否授权。
梦溪
2023/03/06
2.2K0
小程序图片下载授权|用户拒绝授权后如何引导用户重新发起授权
手把手教你撸一个小程序带太阳码的海报分享
我们都知道,微信小程序目前还不支持转发朋友圈,可能现在Android是支持了,iOS还不支持,但总的来说还不能支持普遍机型。这样假如我们需要推荐某个心仪的商品到朋友圈就没法分享出去,于是就可以使用生成海报的形式,让商品详情页的信息显示在一张图片上,保存到手机相册,然后发朋友圈,朋友可以长按识别海报上的小程序码直达该商品详情页面,从而达到如同直接分享商品详情页的效果。
悟空码字
2021/03/23
2.1K0
用小程序·云开发打造功能全面的博客小程序丨实战
实现文章的一些操作功能,最主要的还是评论,这是作者和读者之间沟通的桥梁,评论功能的衍生无非是细化作者和读者之间的互动,或者增加文章的传播,所以在动手开发时需要思考下你期望实现哪些功能,并对应功能进行细化。
腾讯云开发TCB
2019/08/26
1.2K0
小程序 — canvas图片合成
前言:这章我们为图片添加一些小物件,然后用canvas合成并导出到本地。 GitHub:https://github.com/Ewall1106/miniProgramDemo 我们先看看图片合成
Ewall
2018/09/30
7.1K1
小程序 — canvas图片合成
微信小程序权限接口
  部分接口需要经过用户授权统一才能调用。我们把这些接口按使用范围分成多个scope,用户选择对scope进行授权,当授权给一个scope之后,其对应的所有接口都可以直接使用,此类接口调用时:
别团等shy哥发育
2023/02/25
2.8K0
微信小程序权限接口
小程序生成图片并保存
自己做过几个小程序生成图片并保存的功能,觉得做这个功能用到的还挺多的,记录一下。 总体可以分为: 前端处理:后端返回数据,前端自己将图片、文字等画到 canvas 上,然后转图片。 后端处理:后端直接返回图片,前端只做保存功能。 #前端处理 #绘制 Canvas 并保存 小程序有强大的 canvas 可以转成图片并保存,具体API看 文档 。 但是 canvas 的原生操作过于啰嗦,比如画一个字上去: const ctx = wx.createCanvasContext('myCanvas') ctx.s
九旬
2020/10/23
2.9K0
小程序入门,看这一篇就够了!
文章为实战中踩坑经历,以及解决方案。同时是自己的一个项目回顾,在这里分享给大家,希望能帮助到大家。文章内代码需要左右滑动噢~ 登录授权 授权(基本信息,手机号码 )必须使用小程序原生的的button组件,然后指定open-type 后通过回调才能拿到用户信息。代码入下: index.wxml<vi
腾讯NEXT学位
2019/11/18
8420
小程序入门,看这一篇就够了!
小程序 — 保存图片到手机相册②(用户授权等)
(1)如果用户第一次点击的时候,对弹出来的微信授权弹窗点击了拒绝,那么之后点击保存图片就没用了:
Ewall
2018/09/30
3.1K0
小程序 — 保存图片到手机相册②(用户授权等)
微信小程序实现canvas生成海报保存到本地
效果图 <view> <canvas class="canvas" style="width: {{canvas_width}}px;height:{{canvas_height}}px;
明知山
2020/09/03
1.9K3
微信小程序webview保存图片
在小程序的 webview 里保存图片. 因为微信的 js-sdk 没有提供 saveImageToPhotosAlbum 方法
chuchur
2022/10/25
3.5K0
小程序 — 保存图片到手机相册
(1)要保存图片到手机相册中,所以首先我们来看看保存图片的api方法是什么? 我们使用的是wx.saveImageToPhotosAlbum(OBJECT)这个api方法,其中OBJECT的参数可以是:
Ewall
2018/09/30
3.4K0
小程序 — 保存图片到手机相册
推荐阅读
相关推荐
小程序保存图片到相册取消授权、拒绝授权到再授权
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验