微信小程序实现图片保存到相册,获取图片信息,预览和选择图片

微信小程序的图片操作
1.选择图片 chooseMedia
2.获取图片信息 getImageInfo
3.预览图片 previewImage
4.保存图片至手机相册 saveImageToPhotosAlbum
案例代码:
picture.wxml

<button bindtap="choose">选择图片</button>
<button bindtap="getInfo">获取图片信息</button>
<button bindtap="preview">预览图片</button>
<button bindtap="save">保存图片到相册</button>

<!-- 展示上传成功的图片 -->
<image src="{{loadSrc}}"></image>

picture.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        loadSrc:''
    },
    // 保存图片
    save(){
        var that=this;
        wx.saveImageToPhotosAlbum({
            filePath:that.data.loadSrc,
            success(res){
                console.log('save success!!!');
            }
        })
    },
    // 预览图片
    preview(){
        var that=this
        wx.previewImage({
            urls:[that.data.loadSrc],
            showmenu:true
        })
    },
    // getImageInfo
    getInfo(){
        var that=this;
        wx.getImageInfo({
            src:that.data.loadSrc,
            success(res){
                console.log(res,'ressuccess');

            }
        })
    },
    // 选择图片
    choose(){
        var that=this
        wx.chooseMedia({
            success(res){
                that.setData({
                    loadSrc:res.tempFiles[0].tempFilePath
                })
            },
            fail(res){
            },
            complete(res){
            }
        })
    },

})

这样就实现了一个简单的对于图片的操作,效果如下所示:


picture.png

点击选择图片就可以在本地选择一张已存在的图片,点击获取图片信息可以拿到图片大小,图片格式等信息,点击预览图片可以放大图片,点击保存到相册,就可以把我们的图片保存到你想要存放的路径那里了.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容