uniapp拍照

<template>
    <view>
        <view style="margin-top: 20px;">
            <button @click="xiaochengxu">小程序存图</button>
        </view>
        
        <view style="margin-top: 20px;">
            <button @click="takePhoto">微信内置h5浏览器拍照</button>
            <button @click="takePhoto1">456</button>
            <button @click="takePhoto2">999</button>
            <button @click="baocun">下下载载</button>
        </view>
        <view style="margin-top: 20px;">
            <button @click="saveImg('../../static/image/2.png')">手机自带h5浏览器另存为</button>
        </view>
        
        <view style="margin-top: 20px;">
            <button @click="takePhoto">app拍照</button>
        </view>
    </view>

</template>

<script>
    import { pathToBase64, base64ToPath } from '@/components/image-tools/index.js'
    export default {
        data() {
            return {
                folderName:'',
                picName:'',
                num: 1
            }
        },
        created() {

        },
        onLoad() {
            
        },
        mounted() {

        },
        methods: {
            //小程序运行测试和h5发布要注意账号问题
            //小程序还有一点值得注意的是，如果在最终调试的时候，遇到真机运行可以下载图片到本地，而正式版不行的问题，一定要在小程序的开发管理中去设置一下下载的合法域名。
            
            huoqu(){
                uni.getSavedFileList({
                  success: function (res) {
                    console.log(res.fileList);
                  }
                });
                uni.getSavedFileInfo({
                  filePath: '/static/', //仅做示例用，非真正的文件路径
                  success: function (res) {
                    console.log(res.size);
                    console.log(res.createTime);
                  }
                });
            },
            //微信小程序，拍照都存到手机路径Pictures/WeiXin/里了
            xiaochengxu(){
                var self = this
                uni.chooseImage({
                    count:1,
                  success: function (res) {
                    var tempFilePaths = res.tempFilePaths;
                    self.preservationImg(tempFilePaths[0])
                  }
                });
            },
            preservationImg(img) {
                let that = this
                uni.authorize({
                    /* scope.writePhotosAlbum 类型是保存到相册 */
                    scope: 'scope.writePhotosAlbum',
                    success() {
                        /* 已授权进入 */
                        /* 保存图片到相册方法方法 */
                        that.imgApi(img);
                    },
                    complete(res) {
                        /* 判断如果没有授权就打开设置选项让用户重新授权 */
                        uni.getSetting({
                            success(res) {
                                if (!res.authSetting['scope.writePhotosAlbum']) {
                                   /* 打开设置的方法 */
                                    that.opensit();
                                }
                            }
                        });
                    }
                });
            },
            imgApi(image) {
                /* 获取图片的信息 */
                uni.getImageInfo({
                    src: image,
                    success: function(image) {
                        console.log(image)
                        // var bitmap = new plus.nativeObj.Bitmap("test");
                        // console.log(bitmap)
                        /* 保存图片到手机相册 */
                        uni.saveImageToPhotosAlbum({
                            filePath: image.path,
                            success: function() {
                                uni.showModal({
                                    title: '保存成功',
                                    content: '图片已成功保存到相册',
                                    showCancel: false
                                });
                            },
                            complete(res) {
                                console.log(res);
                            }
                        });
                    }
                });
            },
            opensit() {
                uni.showModal({
                    content: '没有授权保存图片到相册,点击确定去允许授权',
                    success: function(res) {
                        if (res.confirm) {
                            /* 打开设置的API*/
                            uni.openSetting({
                                success(res) {
                                    console.log(res.authSetting);
                                }
                            });
                        } else if (res.cancel) {
                            uni.showModal({
                                cancelText: '取消',
                                confirmText: '重新授权',
                                content: '你点击了取消，将无法进行保存操作',
                                success: function(res) {
                                    if (res.confirm) {
                                        uni.openSetting({
                                            success(res) {
                                                /* 授权成功 */
                                                console.log(res.authSetting);
                                            }
                                        });
                                    } else if (res.cancel) {
                                        console.log('用户不授权');
                                    }
                                }
                            });
                        }
                    }
                });
            },
            
            
            //微信内置浏览器存储方法都没有起作用，只是拍照后存到了Pictures/WeiXin/里了，但没有被重命名
            // 主要的是将照片变为base64字符串然后调用bitmap.save方法存储到指定路径
            // 用了 imagetool这个插件（插件市场里面找）
            //第一步
            takePhoto() {
                // if (that.photoArr.length > that.photoArrCapacity) {
                // that.tips('超出限制咯~');
                // return 0;
                // }
                let _this = this; //作用域不同导致的
                uni.chooseImage({
                    // count: that.photoArrCapacity - that.photoArr.length,
                    count: 6, //可以几张
                    success(res) {
                        console.log('res ==>', res);
                        res.tempFilePaths.forEach(item => {
                            //默认照片存储位置 是在（内部存储->android->data->io.dcloud.HBuilder->apps->Hbuilder->doc->里面）
                            //根据路径将照片转换为base64 再将 base64 转换为 照片
                            console.log(item);
                            _this.imgUrlToBase64(item,0)
            
                        });
                    }
                });
            },
            takePhoto1() {
                // if (that.photoArr.length > that.photoArrCapacity) {
                // that.tips('超出限制咯~');
                // return 0;
                // }
                let _this = this; //作用域不同导致的
                uni.chooseImage({
                    // count: that.photoArrCapacity - that.photoArr.length,
                    count: 6, //可以几张
                    success(res) {
                        console.log('res ==>', res);
                        res.tempFilePaths.forEach(item => {
                            //默认照片存储位置 是在（内部存储->android->data->io.dcloud.HBuilder->apps->Hbuilder->doc->里面）
                            //根据路径将照片转换为base64 再将 base64 转换为 照片
                            console.log(item);
                            _this.imgUrlToBase64(item,1)
            
                        });
                    }
                });
            },
            takePhoto2() {
                // if (that.photoArr.length > that.photoArrCapacity) {
                // that.tips('超出限制咯~');
                // return 0;
                // }
                let _this = this; //作用域不同导致的
                uni.chooseImage({
                    // count: that.photoArrCapacity - that.photoArr.length,
                    count: 6, //可以几张
                    success(res) {
                        console.log('res ==>', res);
                        res.tempFilePaths.forEach(item => {
                            //默认照片存储位置 是在（内部存储->android->data->io.dcloud.HBuilder->apps->Hbuilder->doc->里面）
                            //根据路径将照片转换为base64 再将 base64 转换为 照片
                            console.log(item);
                            _this.imgUrlToBase64(item,2)
            
                        });
                    }
                });
            },
            //第2步
            imgUrlToBase64(url,num) {
                console.log("开始转换");
                if(num==0){
                    pathToBase64(url).then((base64) => {
                        console.log(base64)
                        //将base64 转换为 照片 并保存在自定义路径  
                        this.saveHeadImgFile(base64);
                    
                    }).catch(error => {
                        console.error(error)
                    })
                }else if(num==1){
                    pathToBase64(url).then((base64) => {
                        console.log(base64)
                        //将base64 转换为 照片 并保存在自定义路径  
                        
                        this.saveHeadImgFile1(base64);
                    }).catch(error => {
                        console.error(error)
                    })
                }else if(num==2){
                    pathToBase64(url).then((base64) => {
                        console.log(base64)
                        //将base64 转换为 照片 并保存在自定义路径  
                        
                        this.saveBase64Img(base64);
                    })
                }
                
                // 小程可用 APP不可用  
                // uni.getFileSystemManager().readFile({          
                // filePath: url, //选择图片返回的相对路径       
                // encoding: 'base64', //编码格式  
                // success: res => { //成功的回调                      
                //      console.log(res,'返回结果');  
                //          let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦  
                //                      this.imgURL=base64  
                //                  },fail: (e) => {  
                //                      console.log("图片转换失败");  
                //                }  
                //           })   
            
            },
            //第3步 我这里保存在 系统相册和 指定路径的文件夹
            //保存文件 
            //用法: HTML5+的plus对象,必须由click事件触发后,才能在普通网页中使用.所以在没有click的情况下,调用本文件可以解决问题!
            saveHeadImgFile(base64) {
                let _this = this; //作用域不同导致的  
                //最新的 方法 之前的 方法 不对 现在 应当使用 plus.io.moveto 方法
                plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS,fs => { // plus.io.PUBLIC_DOCUMENTS  文件系统中的根目录
                    // 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象  
                    //这里切记 这里不考虑 android的 路径形式了 直接写 /storage 就可以了 不用 file 加上  
                    var url = "/storage/emulated/0/tututu"; //android 的自定义路径  
                    fs.root.getDirectory(url, {create: true}, fileEntry => {// create: true 文件不存在则创建
                        // 文件在手机中的路径
                        alert(fileEntry.fullPath)
                        //移动文件   resolveLocalFileSystemURL判断本地文件是否存在  
                        plus.io.resolveLocalFileSystemURL(url, function(entry) {
            
                            // entry.getParent( function ( parent ) {  
                            // parent.getParent( function ( parent2 ) {  
                            entry.moveTo(fileEntry, "/" + url, function(file) {
                                alert("移动成功" + file)
                            }, function(e) {
                                alert(e.message);
                            });
                        })  
            
                    });  
                });
                
                
            },
            //本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，就是用户文件管理器能看到的了，之后我创建微垠作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
            saveHeadImgFile1(base64) {
                let _this = this; //作用域不同导致的  
                
                const bitmap = new plus.nativeObj.Bitmap("test");
                bitmap.loadBase64Data(base64, function() {
                    // const url = "_doc/" +"测试/"+"测试"+ new Date().getTime() + ".png";  // url为时间戳命名方式  
                    const url = "file://storage/emulated/0/tututu1/" + "oooo.jpg"; //保存为android 路径  
            
                    console.log('saveHeadImgFile', url)
                    bitmap.save(url, {overwrite: true}, (i) => {//overwrite: true, // 是否覆盖  // quality: 'quality'  // 图片清晰度  
            
                        //保存到系统相册  
                        uni.saveImageToPhotosAlbum({
                            filePath: url,
                            success: function() {
                                _this.uni.showToast({
                                    title: '图片保存成功',
                                    icon: 'none'
                                })
                                alert("图片保存成功");
                                bitmap.clear()
                            }
                        });
                        //保存到 指定文件夹  
                    }, (e) => {
                        _this.uni.showToast({
                            title: '图片保存失败',
                            icon: 'none'
                        })
                        alert("图片保存失败");
                        bitmap.clear()
                    });
                }, (e) => {
                    _this.uni.showToast({
                        title: '图片保存失败',
                        icon: 'none'
                    })
                    alert("图片保存失败");
                    bitmap.clear()
                });
                
            },
            saveBase64Img(base64){
                const bitmap = new plus.nativeObj.Bitmap("test");
                bitmap.loadBase64Data(base64,function(){
                    const url = '_doc/' + new Date() + '.png';//建议用时间命名
                    console.log('url:',url);
                    bitmap.save(url,{overwrite:true},(i)=>{
                        uni.saveImageToPhotosAlbum({
                            filePath:url,
                            success:function(){
                                console.log('保存成功')
                                bitmap.clear();
                            }
                        });
                    },(e)=>{
                        console.log('保存失败',e)
                        bitmap.clear();
                    });
                },(e)=>{
                    console.log('保存失败',e)
                    bitmap.clear();
                });
            },
            
            
            //手机自带浏览器访问h5页面，拍照没有存，下载的都在Download/Browser，但没有被重命名
            baocun(){
                var self = this
                uni.chooseImage({
                    count:1,
                  success: function (res) {
                    var tempFilePaths = res.tempFilePaths;
                    self.saveImg(tempFilePaths[0])
                  }
                });
            },
             saveImg(url) {
                 var oA = document.createElement("a");
                 oA.download = '123.jpg'; // 设置下载的文件名，默认是'下载'
                 oA.href = url;
                 document.body.appendChild(oA);
                 oA.click();
                 oA.remove(); // 下载之后把创建的元素删除
                //另存为方式
            },
            
            
            //app拍照，和上面的有重名函数
            init(){
                this.folderName = '照片文件夹'
                this.picName = '照片pic001'
            },
            //第1步
            takePhoto() {
                let self = this;
                uni.chooseImage({
                    count: 1, //可以几张
                    // crop:{quality:100},//设置后 sizeType 失效
                    sizeType: ['original'], //original 原图!!!，compressed 压缩图，默认二者都有
                    sourceType: ['camera', 'album'],//camera 使用相机,album 从相册选图,默认二者都有
                    success(res) {
                        res.tempFilePaths.forEach(item => {
                            self.imgUrlToBase64(item,1)
                        });
                    }
                });
            },
            imgUrlToBase64(url,num) {
                pathToBase64(url).then((base64) => { 
                    this.saveHeadImgFile(base64);
                }).catch(error => {
                    uni.showToast({
                        title: error,
                        icon: 'none'
                    })
                })
            },
            saveHeadImgFile(base64) {
                let self = this; 
                
                //设置文件夹和文件名规则
                this.num++
                this.picName = this.picName + this.num
                var folderName = self.folderName
                if(this.num%2==0){
                    folderName += '/子文件夹'
                }
                
                let bitmap = new plus.nativeObj.Bitmap("test");
                bitmap.loadBase64Data(base64, function() {
                    const url = "file://storage/emulated/0/" + folderName + '/' + self.picName + ".jpg";
                    bitmap.save(url, {overwrite: true,quality: 100}, (i) => {//overwrite: true, // 是否覆盖  // quality: 'quality'  // 图片清晰度
                        uni.showToast({
                            title: '图片保存成功',
                            icon: 'none'
                        })
                        }, (e) => {
                            uni.showToast({
                                title: '图片保存失败',
                                icon: 'none'
                            })
                            bitmap.clear()
                        }
                    );
                }, (e) => {
                    uni.showToast({
                        title: '图片保存失败',
                        icon: 'none'
                    })
                    bitmap.clear()
                });
            },
        }

    }
</script>
<style>
    
</style>