今天回复我了吗
今天回复我了吗
  • 发布:2025-05-09 22:34
  • 更新:2025-05-09 23:20
  • 阅读:52

【报Bug】 bitmap.save 获取到i.target本地path 在image组件中展示不出来

分类:uni小程序sdk

产品分类: 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 {  
      // logo: logo(),  
      // topBackground: topBackground(),  
      // QrCode: QrCode(),  
      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  
      // console.log("base64data", base64data)  
      // return  
      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', // Cloudflare 要求字段名是 'file'  
                success: (uploadRes) => {  
                  uni.showToast({  
                    title: '上传成功7777' + JSON.stringify(uploadRes),  
                    icon: 'none'  
                  })  
                },  
                fail: (err) => {  
                  uni.showToast({  
                    title: '上传失败哦7777' + err,  
                    icon: 'none'  
                  })  
                }  
              })  

              return false  
              // 保存图片到相册  
              uni.saveImageToPhotosAlbum({  
                filePath: url,  
                success: function () {  
                  uni.showToast({  
                    title: '图片保存成功',  
                    icon: 'none'  
                  })  

                  // 图片保存成功后,将临时保存的图片删除  
                  plus.io.resolveLocalFileSystemURL(  
                    url,  
                    function (entry) {  
                      entry.getMetadata(function (metadata) {  
                        // console.log("fileCount=" + metadata.fileCount);  
                        entry.remove() //删除单个文件 _downloads/改文件名  
                      })  
                    },  
                    function (error) {  
                      // uni.showToast({ title: "下载文件" });  
                      console.log('error' + error)  
                    }  
                  )  
                  bitmap.clear()  
                }  
              })  
              bitmap.clear()  
            },  
            function (e) {  
              onsole.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'  
              })  
              // 转发图片到微信  
              // uni.share({  
              //   provider: 'weixin',  
              //   scene: 'WXSceneSession',  
              //   type: 2,  
              //   imageUrl: url,  
              //   success: function (res) {  
              //     console.log('success:' + JSON.stringify(res))  
              //     bitmap.clear()  
              //   },  
              //   fail: function (err) {  
              //     console.log('fail:' + JSON.stringify(err))  
              //   }  
              // })  
            },  
            function (e) {  
              onsole.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: {  
        // 获取设备的Dpr值  
        getDpr() {  
            if (window.devicePixelRatio && window.devicePixelRatio > 1) {  
                return window.devicePixelRatio;  
            }  
            return 1;  
        },  
        /**  
         * 将传入值转为整数  
         * @param value  
         * @returns {number}  
         */  
        parseValue(value) {  
            return parseInt(value, 10);  
        },  

           // 截图后保存到本地  
        generateImage(event, ownerInstance) {  
            // 获取想要转换的dom节点  
            var dom = document.getElementById('container');  
            html2canvas(dom, {  
                // allowTaint: false,  
                width: dom.clientWidth,  
                height: dom.clientHeight,  
                scrollY: 0,  
                scrollX: 0,  
                useCORS: true  
            }).then(function(canv) {  
                // 将canvas转换成图片渲染到页面上  
                let url = canv.toDataURL('image/jpg'); // base64数据  
                ownerInstance.callMethod('getSaveImg', {  
                    base64data: url  
                })  
            });  
        },  

           // 截图后分享给好友  
        generateImage_Share(event, ownerInstance) {  
            // 获取想要转换的dom节点  
            var dom = document.getElementById('container');  
            html2canvas(dom, {  
                // allowTaint: false,  
                width: window.clientWidth,  
                height: window.clientHeight,  
                useCORS: true,  
                dpi: 350  
            }).then(function(canv) {  
                // 将canvas转换成图片渲染到页面上  
                let url = canv.toDataURL('image/jpg'); // base64数据  
                ownerInstance.callMethod('getSaveImg_Share', {  
                    base64data: url,  
                })  
            });  
        },  
    }  
}  
</script>  

<style lang="scss" scoped>  
.content {  
  // display: flex;  
  // flex-direction: column;  
  // align-items: center;  
  // justify-content: center;  
}  

.card {  
  width: 100%;  
  background: #3f65f4;  

  // padding: 16px;  
  .topTitle {  
    background: url('data:image/png;base64,iVBORw0K...GgoK5CYII=') no-repeat; //这里想要图片能够截取清晰则必须使用base64  
    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>  

操作步骤:

点击保存到相册
获取到本地的url
hellourl复制有值,但是在image中展示不出来

预期结果:

想用本地文件在image组件中展示,但是展示不出来

可通过event.target(String类型)获取保存后的图片url路径,以"file://"开头,可直接在html页面中通过src属性引用,如Android平台"file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/a.jpg",iOS平台"file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png";

实际结果:

image展示不出来

bug描述:

获取本地文件路径后,用image标签 展示不出来

2025-05-09 22:34 负责人:无 分享
已邀请:
今天回复我了吗

今天回复我了吗 (作者) - uniapp 粉丝条

    uni.saveFile({  
                tempFilePath: i.target,  
                success: function (res) {  
                  // var savedFilePath = res.savedFilePath  
                  _this.hellourl4 = res.savedFilePath  
                }  
              })

使用这个方法可以展示, _documents/c.jpg"、"_downloads/d.jpg"
这俩个开头的不能展示,请问为什么

今天回复我了吗

今天回复我了吗 (作者) - uniapp 粉丝条

而且保存成功后, 系统相册也没找到该文件,但可以在image上展示

要回复问题请先登录注册