版权声明:欢迎转载,可Chat交流,写博不易请标明出处: https://blog.csdn.net/JackJia2015/article/details/86703803
效果展示
wx.saveImageToPhotosAlbum(Object object)
保存图片到系统相册。调用前需要 用户授权 scope.writePhotosAlbum
saveImageToPhotosAlbum参数
wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
previewImage参数
wx.getImageInfo(Object object)
获取图片信息。网络图片需先配置download域名才能生效。
getImageInfo参数
object.success 回调函数参数res
res.orientation 的合法值
wx.compressImage(Object object)
压缩图片接口,可选压缩质量(暂时不好用,官方未回应)
compressImage参数
wx.chooseMessageFile(Object object)
从客户端会话选择文件。
chooseMessageFile参数
object.type 的合法值
object.success 回调函数参数 res
res.tempFiles 的结构
type 的合法值
wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
chooseImage参数
object.sizeType 的合法值
object.sourceType 的合法值
object.success 回调函数 参数 Object res
res.tempFiles 的结构
示例:
效果展示
代码
先在最外层创建文件夹,拖入图片命名为image.jpg
index.wxml
<image src='{{src}}'></image>
<button bindtap='btnClick1' type="primary">保存图片到系统相册</button>
<button bindtap='btnClick2' type="primary">在新页面中全屏预览图片</button>
<button bindtap='btnClick3' type="primary">获取图片信息</button>
<button bindtap='btnClick4' type="primary">压缩图片接口,可选压缩质量</button>
<button bindtap='btnClick5' type="primary">从客户端会话选择文件</button>
<button bindtap='btnClick6' type="primary">从本地相册选择图片或使用相机拍照</button>
index.wxss
button{
margin: 20rpx
}
image{
margin-left: 100rpx;
}
index.js
Page({
data: {
src:'../../images/image.jpg'
},
//自定义提示框
alertView: function(text){
wx.showToast({
title: text,
icon:'none'
})
},
//保存图片到系统相册
btnClick1:function(){
var that = this
wx.saveImageToPhotosAlbum({
filePath:"images/image.jpg",
success(res) {
that.alertView('保存成功')
}
})
},
//在新页面中全屏预览图片,可多张图片
btnClick2: function () {
wx.previewImage({
// 需要预览的图片http链接列表
urls: ['https://img2.woyaogexing.com/2018/12/31/645fc061ebfe8fa0!600x600.jpg', 'https://img2.woyaogexing.com/2018/12/31/972fe23faa9a3105!600x600.jpg','https://img2.woyaogexing.com/2018/12/31/c303577c48b1c397!600x600.jpg'],
// 当前显示图片的http链接
current: 'https://img2.woyaogexing.com/2018/12/31/645fc061ebfe8fa0!600x600.jpg',
})
},
//获取图片信息。
btnClick3: function () {
var that = this
wx.getImageInfo({
src: "../../images/image.jpg",
success(res) {
that.alertView('图片信息'+ res.width + '--' + res.height + '--' + res.path + '--' + res.orientation + '--' + res.type)
console.log(res.width)
console.log(res.height)
console.log(res.path) //图片的本地路径
console.log(res.orientation) //拍照时设备方向
console.log(res.type) //图片格式
}
})
},
//压缩图片(暂时不好用,官方未回应)
btnClick4: function () {
var that = this
wx.compressImage({
src: "../../images/image.jpg", // 图片路径
quality: 50 ,// 压缩质量范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)。
success(){
that.alertView('压缩成功')
},
fail(){
that.alertView('压缩失败')
}
})
},
//从客户端会话选择文件。
btnClick5: function () {
var that = this
wx.chooseMessageFile({
count: 10,
type: 'image',
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})
},
//从本地相册选择图片或使用相机拍照。
btnClick6: function () {
var that = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
that.setData({
src: tempFilePaths
})
}
})
}
})