bitmap.save 获取到i.target本地path 在uni-app image组件中展示不出来

产品分类

uni小程序SDK

手机系统

Android

手机系统版本号

iOS 16

手机厂商

苹果

手机机型

12 pro max

页面类型

vue

SDK版本号

4.3.6

示例代码：

<template>  
  <view>  
    <view id="container" class="content">  
      <view ref="imageDom" class="card h-200rpx">截图内容</view>  
    </view>  
    <view class="buttonArea">  
      <view class="buttonItem" @click="canvasToImage.generateImage_Share">  
        <image src="@/static/common/add-number.png" class="buttonImg"></image>  
        <view class="buttonTxt">分享给朋友</view>  
      </view>  
      <view class="buttonItem" @click="canvasToImage.generateImage">  
        <image src="@/static/common/add-number.png" class="buttonImg"></image>  
        <view class="buttonTxt">保存到相册</view>  
      </view>  
    </view>  

    <view>  
      图片成功展示哦:hellourl: {{ hellourl }}  
      <image :src="hellourl" class="buttonImg"></image>  
    </view>  

  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      hellourl: '',  

      data: {  
        type: '',  
        titleTime: '',  
        Slogan: []  
      },  
      info: {},  
      name: uni.getStorageSync('nickname'),  
      avatar: uni.getStorageSync('avatar')  
    }  
  },  

  mounted() {},  
  methods: {  
    getSaveImg(data) {  
      let _this = this  
      uni.showLoading({  
        mask: true  
      })  

      let base64data = data.base64data  
      _this.hellourl3 = base64data  
      let bitmap = new plus.nativeObj.Bitmap('test')  
      bitmap.loadBase64Data(  
        base64data,  
        function () {  
          console.log('加载Base64图片数据成功')  
          let time = Date.now()  
          let url = '_downloads/yflPic' + time + '.png'  
          _this.hellourl2 = url  
          uni.hideLoading()  
          bitmap.save(  
            url,  
            {},  
            function (i) {  
              console.log('保存图片成功：' + JSON.stringify(i))  
              uni.showToast({  
                title: '保存图片成功：' + JSON.stringify(i),  
                icon: 'none'  
              })  
              _this.hellourl = i.target  

              uni.uploadFile({  
                url: 'https://upload.imagedelivery.net/dY7HqO6nhLXDP8slbpx2Xw/minipgm%2Fgtl8aa%2Fcommon_image%2F1746799866936',  
                filePath: i.target,  
                name: 'file',  
                success: (uploadRes) => {  
                  uni.showToast({  
                    title: '上传成功7777' + JSON.stringify(uploadRes),  
                    icon: 'none'  
                  })  
                },  
                fail: (err) => {  
                  uni.showToast({  
                    title: '上传失败哦7777' + err,  
                    icon: 'none'  
                  })  
                }  
              })  

              uni.saveImageToPhotosAlbum({  
                filePath: url,  
                success: function () {  
                  uni.showToast({  
                    title: '图片保存成功',  
                    icon: 'none'  
                  })  
                  plus.io.resolveLocalFileSystemURL(  
                    url,  
                    function (entry) {  
                      entry.getMetadata(function (metadata) {  
                        entry.remove()  
                      })  
                    },  
                    function (error) {  
                      console.log('error' + error)  
                    }  
                  )  
                  bitmap.clear()  
                }  
              })  
              bitmap.clear()  
            },  
            function (e) {  
              console.log('保存图片失败：' + JSON.stringify(e))  
              bitmap.clear()  
            }  
          )  
        },  
        function () {  
          console.log('加载Base64图片数据失败：' + JSON.stringify(e))  
          bitmap.clear()  
        }  
      )  
    },  

    getSaveImg_Share(data) {  
      uni.showLoading({  
        mask: true  
      })  
      let base64data = data.base64data  
      let bitmap = new plus.nativeObj.Bitmap('test')  
      bitmap.loadBase64Data(  
        base64data,  
        function () {  
          console.log('加载Base64图片数据成功')  
          let time = Date.now()  
          let url = '_downloads/yflPic' + time + '.png'  
          uni.hideLoading()  
          bitmap.save(  
            url,  
            {},  
            function (i) {  
              console.log('保存图片成功：' + JSON.stringify(i))  
              uni.showToast({  
                title: '保存图片成功：' + JSON.stringify(i),  
                icon: 'none'  
              })  
            },  
            function (e) {  
              console.log('保存图片失败：' + JSON.stringify(e))  
              bitmap.clear()  
            }  
          )  
        },  
        function () {  
          console.log('加载Base64图片数据失败：' + JSON.stringify(e))  
          bitmap.clear()  
        }  
      )  
    }  
  }  
}  
</script>  

<script module="canvasToImage" lang="renderjs">  
import html2canvas from 'html2canvas';  
export default {  
    data() {  
        return {}  
    },  
    methods: {  
        getDpr() {  
            if (window.devicePixelRatio && window.devicePixelRatio > 1) {  
                return window.devicePixelRatio;  
            }  
            return 1;  
        },  

        parseValue(value) {  
            return parseInt(value, 10);  
        },  

        generateImage(event, ownerInstance) {  
            var dom = document.getElementById('container');  
            html2canvas(dom, {  
                width: dom.clientWidth,  
                height: dom.clientHeight,  
                scrollY: 0,  
                scrollX: 0,  
                useCORS: true  
            }).then(function(canv) {  
                let url = canv.toDataURL('image/jpg');  
                ownerInstance.callMethod('getSaveImg', {  
                    base64data: url  
                })  
            });  
        },  

        generateImage_Share(event, ownerInstance) {  
            var dom = document.getElementById('container');  
            html2canvas(dom, {  
                width: window.clientWidth,  
                height: window.clientHeight,  
                useCORS: true,  
                dpi: 350  
            }).then(function(canv) {  
                let url = canv.toDataURL('image/jpg');  
                ownerInstance.callMethod('getSaveImg_Share', {  
                    base64data: url,  
                })  
            });  
        },  
    }  
}  
</script>  

<style lang="scss" scoped>  
.content {  
}  

.card {  
  width: 100%;  
  background: #3f65f4;  
  .topTitle {  
    background: url('data:image/png;base64,iVBORw0K...GgoK5CYII=') no-repeat;  
    background-size: 100% 100%;  
    width: 100%;  
    height: 151px;  
    padding: 16px;  

    .title {  
      font-weight: 600;  
      font-size: 36px;  
      color: #f5f5f7;  
    }  

    .time {  
      margin-top: 15px;  
      font-weight: 500;  
      font-size: 12px;  
      color: #fff;  
    }  
  }  
}  
.buttonImg {  
  width: 100px;  
  height: 100px;  
}  
</style>