点击图片预览

长按图片保存

点击按钮保存到手机相册

view:

<!--wxml-->
<text>点击图片预览、长按保存图片、点击按钮保存到系统相册</text>
<image class="img" src="{{item}}" bindtap='previewImage' wx:for="{{src}}" wx:key="{{item.index}}"></image>
<button bindtap='saveImg'>Save</button>

js:

Page({

  /**
* 页面的初始数据
*/
data: {
src: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
]
},
/**
* 长按预览保存图片到本地
*/
previewImage:function(e){
var that = this;
wx.previewImage({
current: that.data.src,//当前显示图片的http链接
urls: that.data.src, //要预览的图片
})
wx.getImageInfo({
src: that.data.src[0],
success(res){
console.log(res)
console.log(res.width)
console.log(res.height)
}
})
}, /**
* saveImg:点击按钮保存图片到本地
*/
saveImg: function() {
var imgSrc = "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"
wx.downloadFile({
url: imgSrc,
success: function(res) {
console.log(res);
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,//图片文件路径
success(res){
//接口调用成功
wx.showToast({
title: '保存成功',
duration:1000,//提示延迟时间
})
},
fail(err){
console.log(err)
//需要用户授权设置
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny"){
console.log('用户一开始拒绝了,我们想再次发起授权')
console.log('打开设置窗口') // 用户授权设置
wx.openSetting({
success(settingdata){
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
} else {
console.log('获取权限失败,给出不给权限就无法正常使用的提示')
}
}
}) }
}
}) }
}) },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) { },
})
---------------------
作者:Judy1623
来源:CSDN
原文:https://blog.csdn.net/weixin_39100915/article/details/82878867

Wx-小程序-图片预览、保存的更多相关文章

  1. 小程序图片预览 wx.previewImage

      list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg', 'http://i ...

  2. 微信小程序-图片预览

    仅供参考: 1,wxml: <view class="foot" bindtap="previewImage">我的小程序码</view> ...

  3. TODO:小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...

  4. 微信小程序手机预览请求不到数据(最后一条不明所以)

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  5. 微信小程序H5预览页面框架(二维码不隐藏)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。

    这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...

  8. 微信小程序——网盘图片预览

    微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...

  9. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

随机推荐

  1. SpringBoot整合RabbitMQ出现org.springframework.amqp.AmqpException: No method found for class

    @Component @RabbitListener(queues="my_fanout") public class Consumer {     @RabbitHandler  ...

  2. 10个Python 初学者必知编码小技巧

          技巧 #1   字符串翻转 >>> a = "codementor" >>> print "Reverse is" ...

  3. spring 切点表达式

    spring切点表达式: 1.*通配符:该通配符主要用于匹配单个单词. 例如:execution(* com.bonnie.Controller.TestController.*()) 上述表达式表示 ...

  4. spring微服务实战 - 1 一个完整的HTTP JSON REST服务

    import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.Spr ...

  5. gets(), getline(), cin.getline()

    gets(str), getline(cin, s), cin.getline(str, len),这三个函数都是读入一行字符串的函数,下面是这三个函数的区别 1. gets() 函数是 C 语言的函 ...

  6. linux下部署Mono oracle配置,oracle客户端安装

    一.Mono,apache安装,配置网站(以 centos 7 +apache 2为例): 安装教程以官网的教程为追,百度来的多少有版本问题. mono官网连接: 1. Mono的安装:https:/ ...

  7. grunt里面将es6转为es5,遇到的坑

    今天看了一下grunt的官方文档,就按照教程来自己创建一个demo,发现grunt要把es6转化为es5需要安装babel,然后就按照grunt-babel的文档进行了一系列操作,等我要兴致勃勃的运行 ...

  8. 实用 SQL 语句

    1. 创建 1.1 创建数据库 语法:create database db_name 示例:创建应用数据库 awesome_app sqlcreate database `awesome_app` 复 ...

  9. 计算机网络,HTTP - 如何查看一个网站是否使用HTTP/2?

    方法 HTTP/2用":authority"头部代替"Host"头部. Chrome F12里面,HTTP/1.1有"view source" ...

  10. P1582 倒水(贪心 + lowbbit)

    https://www.luogu.com.cn/problem/P1582 #include <bits/stdc++.h> using namespace std; #define i ...