uniapp微信小程序图片下载至本地

1,220 阅读2分钟

个人日常代码记录 不喜勿喷 通过图片链接的形式下载图片至本地

uni.downloadFile({
    url: url,//图片地址
    success: (res) =>{
    if (res.statusCode === 200){
          uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function() {
                          uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000, //提示的延迟时间,单位毫秒,默认:2500
                          })
                  },
                  fail: function() {
                          uni.showToast({
                                title: '保存失败',
                                icon: 'success',
                                duration: 2000, //提示的延迟时间,单位毫秒,默认:2500
                          })
                  }
          });
    } 
    }
})

通过后台数据流的形式存储图片

uni.request({
    url: "xxxxxxxxxxx" ,//请求地址
    method: 'POST',//请求类型
    responseType: 'arraybuffer', //需要设置响应类型
    success: function(res) {
        //将arraybuffer 转为base64的类型
        //以图片的形式展示
        const maskData = "data:image/png;base64," + uni.arrayBufferToBase64(res.data);
        var save = uni.getFileSystemManager();
        var number = Math.random();
        save.writeFile({
            //文件存储路径
            filePath: wx.env.USER_DATA_PATH + '/test' + number + '.png',
            //获取base64数据
            data: maskData.replace('data:image/png;base64,', ''),
            encoding: 'base64',
            success: res => {
              //保存为png格式到相册
              uni.saveImageToPhotosAlbum({ 
                    filePath: uni.env.USER_DATA_PATH + '/test' + number + '.png',
                    success: function (res) {
                          uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000, //提示的延迟时间,单位毫秒,默认:2500
                          })
                    },
                    fail: function (err) {
                    }
              })
            },
            fail: err => {
                that.canvasChe=true;
                uni.showModal({
                    content:"因您拒绝了授权,如需再次授权请前往设置手动授权!是否前往设置?",
                    cancelText:"不用了",
                    confirmText:"立即前往",
                    success(res){
                        if(res.confirm){
                            //询问获取授权
                            uni.openSetting({
                                success(res){
                                    //成功获取授权
                                    if(res.authSetting){
                                        console.log(res.authSetting)
                                    }
                                }
                            })
                        }
                    }
                })
                
            }
	})

    },fail:function(err) {
         uni.hideLoading()
         uni.showToast({
           title: '下载失败',
           icon: 'success',
           duration: 2000, //提示的延迟时间,单位毫秒,默认:2500
         })
    }
})

微信小程序通过画布绘制保存图片

const that = this;
uni.request({
    url: "xxxxxxxxxxx" ,//请求地址
    method: 'POST',//请求类型
    responseType: 'arraybuffer', //需要设置响应类型
    success: function(res) {
        //将arraybuffer 转为base64的类型
        //以图片的形式展示
        that.maskData= "data:image/png;base64," + uni.arrayBufferToBase64(res.data);
        
        const query = uni.createSelectorQuery();
        //获取canvas
        query.select('#shareCanvas').fields({node: true, size: true}).exec((res) => {
        this.myCanvas = res[0].node;
        //设置画布
        const ctx = this.myCanvas.getContext('2d');
        //创建图片
        let img = this.myCanvas.createImage();
        //图片地址
        img.src = that.maskData;
        img.onload = () => {
                //画布大小
                this.myCanvas.width = img.width;
                this.myCanvas.height = img.height;
                ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
                uni.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        width: img.width,
                        height: img.height,
                        destWidth: img.width,
                        destHeight: img.height,
                        canvas: this.myCanvas,
                        success: (res) => {
                             uni.saveImageToPhotosAlbum({
                              filePath: res.tempFilePath,
                              success: (data) => {
                                    that.canvasChe = true;
                                    uni.showToast({
                                      title: '图片保存成功',
                                      icon: 'success'    // 图标,只支持"success"、"loading"
                                    });
                                    uni.hideLoading()
                              },
                              fail: (res) => {
                                    that.canvasChe = true;
                                    uni.showToast({
                                      title: '下载失败,请开启小程序相册权限',
                                      icon: 'none'    // 图标,只支持"success"、"loading"
                                    });
                                    uni.hideLoading()
                              }
                            });
                        }
                })
            }
        })
    }
})