zoukankan      html  css  js  c++  java
  • uniapp 实现base64格式图片保存到相册

    开发过程中的一个需求:后端返回的一个base64格式的图片显示在页面上,需要点击保存该图片到系统相册。

    uni-app将图片存入系统的官方api是 uni.saveImageToPhotosAlbum(OBJECT),需要给定一个文件路径filePath,但是这个路径我们是没办法拿到的。

    解决思路:需要用到Bitmap,把base64转成bitmap文件对象,保存到系统相册(但是此时某些手机上无法显示出来,其实是保存成功的),然后使用uni.saveImageToPhotoAlbum方法将图片成功保存并显示。

    1、Bitmap是原生图片对象,其有个方法是loadBase64Data;于是我们首先创建一个bitmap对象:

    2、然后使用loadBase64Data将base64字符串转换为bitmap文件对象:

    3、调用bimap.save方法,将图片文件存入手机存储(记得bitmap.clear(),比较占内存)

    4、uni.saveImageToPhotoAlbum方法将图片成功保存并显示

    整体代码如下:

    saveHeadImgFile() {
        let base64 = this.qrImgUrl;
        const bitmap = new plus.nativeObj.Bitmap("test");
        bitmap.loadBase64Data(base64, function() {
            const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
            console.log('saveHeadImgFile', url)
            bitmap.save(url, {
                overwrite: true,  // 是否覆盖
                // quality: 'quality'  // 图片清晰度
            }, (i) => {
                uni.saveImageToPhotosAlbum({
                    filePath: url,
                    success: function() {
                        uni.showToast({
                            title: '图片保存成功',
                            icon: 'none'
                        })
                        bitmap.clear()
                    }
                });
            }, (e) => {
                uni.showToast({
                    title: '图片保存失败',
                    icon: 'none'
                })
                bitmap.clear()
            });
        }, (e) => {
            uni.showToast({
                title: '图片保存失败',
                icon: 'none'
            })
            bitmap.clear()
        });
    }
  • 相关阅读:
    PacificA协议小结
    raft协议小结
    python爬虫抓取图片
    composer 的使用和常用命令大全
    php批量同步数据
    VMware虚拟机的安装与配置
    国家和地区代码表
    js判断h5页面地址的打开方式(微信、pc、移动端)
    phpexcel图片获取
    python的文件操作及简单的用例
  • 原文地址:https://www.cnblogs.com/Alioo/p/13985412.html
Copyright © 2011-2022 走看看