关于appgallery-connect:教你如何实现长按图片保存到相册

41次阅读

共计 2054 个字符，预计需要花费 6 分钟才能阅读完成。

场景形容
微信小程序中，存在一个很不便的性能，即长按图片能够保留到手机相册，目前华为快利用没有间接的接口能够实现，如下介绍如何通过事件触发来实现该性能。

实现思路
快利用组件均反对通用事件 longpress（长按），于是思考用 image 组件渲染图片，而后在 image 组件上实现 longpress 事件，触发图片保留到手机相册的性能。

解决办法
代码如下：

<template>
  <div class="doc-page">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>
    <div class="item-container">
      <text class="item-title">Remote
        image:https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1</text>
      <div class="item-content">
        <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" id="image" style="object-fit:cover" onlongpress="onImageLongpress"></image>
      </div>
    </div>
  </div>
</template>
<style>
  .doc-page {
    flex: 1;
    flex-direction: column;
  }
  .item-container {
    margin-top: 40px;
    margin-bottom: 40px;
    flex-direction: column;
  }
  .item-title {
    padding-left: 30px;
    padding-bottom: 20px;
    color: #aaaaaa;
  }
  .item-content {
    height: 200px;
    justify-content: center; 
  }
  #image {
    width: 240px;
    height: 160px;
    object-fit: contain;
  }
</style>
<script>
import prompt from'@system.prompt'
import media from '@system.media'
export default{
  private: {
        componentName:"长按如下图片保留",
    inputImageURL: 'https: //tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1'
  },
  onInit(){this.$page.setTitleBar({text: '长按图片保留示例'});
  },
  onImageLongpress(){
        var that=this;
    prompt.showDialog({
      message: '长按是否保留图片',
      buttons: [{
        text: '确定',
        color: '#33dd44'
      },
      {
        text: '勾销',
        color: '#33dd44'
      }],
      success: function(data){console.log("handling callback",data);
                if(data.index===0)
                {that.$element("image").toTempFilePath({
                        fileType: 'jpg', 
                        quality: 1.0, 
                        success: function (ret) {console.log('toTempFilePath success:tempFilePath=' + ret.tempFilePath)
                            media.saveToPhotosAlbum ({
                                uri: ret.tempFilePath,
                                success:function(data)
                                {console.log("save picture success");
                                },
                                fail: function(data, code) {console.log("handling fail, code=" + code);
                                }
                            })
                        }, 
                        fail: function (msg, code) {console.log('toTempFilePath failed:code=' + code + '; msg=' + msg);
                        }, complete: function (ret) {console.log('toTempFilePath complete');
                        }
                    })
                }
      },
      cancel: function(){console.log("cancel");
      }
    })
  }
}
</script>

更多参考

快利用 API 文档参考：

https://developer.huawei.com/…

原文链接：https://developer.huawei.com/…
原作者：Mayism

正文完