关于图片的几个API的用法

简介: 建议使用真机测试       一.my.chooseImage: 拍照或从手机相册中选择图片,默认1张,可以设置参数count来选择 上限9张;点击完成后成功返回apFilePaths数组,里面包含图片的类型和base64编码的图片路径信息;      代码示例如下:  my.

建议使用真机测试     

  一.my.chooseImage: 拍照或从手机相册中选择图片,默认1张,可以设置参数count来选择 上限9张;点击完成后成功返回apFilePaths数组,里面包含图片的类型和base64编码的图片路径信息;      代码示例如下: 


 my.chooseImage({
    chooseImage: 2,
    success: (res) => {
        img.src = res.apFilePaths[0];
    },
});

     二. my.previewImage: 预览图片;当前图片索引默认为0,current设置预览的图片数量,urls接收一个数组类型的图片链接列表;         代码示例如下: 

my.previewImage({ 
    current: 2, 
    urls: [ 
              'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg', 
              'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg', 
              'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg' 
     ], 
});

    三. my.saveImage:

        1.  保存在线图片到手机相册:      代码示例: 

my.saveImage('https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg');

        2.  图片上传: 使用my.chooseImage拍照或从手机相册中选择图片接口得到返回的图片路径信息,通过调用my.uploadFile文件上传接口可以使用来实现图片的上传服务器落库等操作;为了更好的体验可以使用my.previewImage预览图片接口查看选中的图片,从而选择是否增删;代码示例: 

//使用my.chooseImage选择图片,得到返回的图片路径信息
my.chooseImage({ 
     count:9, 
     success: function(res){ 
     //调用my.uploadFile文件上传接口 
     my.uploadFile({ 
         url: 'xxx', // 开发者服务器地址 
         filePath:'xxx', // 要上传文件资源的本地定位符 
         fileName: 'xxx', // 文件名,即对应的 key, 开发者在服务器端通过这个 key 可以获取文件二进制内容 
         fileType: 'image', // 文件类型,image/video 
         success: function(res){ 
             //成功执行 
         }, 
         complete: function(res){ 
            //不管成不成功都执行 
         }, 
       }); 
     }, 
   });

   注意:文件上传fileType目前只支持image和video两种类型;url写的是服务器地址,需解决跨域问题,即前往开发者管理中心,找到相应的小程序应用添加域名白名单。        

3.保存图片: 使用my.saveImage保存在线图片到手机相册,从而实现下载图片的效果;在这提供一下我个人的理解,有什么不对和需要补充之处还请不吝赐教,谢谢各位看官啦! 

目录
相关文章
|
3月前
|
JavaScript API 开发工具
uni.app cell的用法以及相关api
uni.app cell的用法以及相关api
26 0
|
4月前
|
JSON API 数据格式
Postman 导入导出API 的用法
Postman 导入导出API 的用法
108 0
|
4月前
|
缓存 JavaScript API
最新,Vue 改进了响应式 API 中 getter 的用法!
最新,Vue 改进了响应式 API 中 getter 的用法!
|
10月前
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
147 0
|
5月前
|
文字识别 JavaScript API
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
Vue实现:Ctrl+V粘贴文字图片截图,调用第三方API文字识别OCR内容并进行内容分割识别填充。
|
5月前
|
JavaScript 前端开发 API
Vue3 组合式 API 的特性、用法和最佳实践
Vue3 组合式 API 的特性、用法和最佳实践
97 1
|
5月前
|
JSON API 数据格式
如何使用京东商品SKU API获取商品的图片信息?
京东商品SKU API是京东开放平台提供的一套API接口,可用于获取京东商城的商品SKU信息。该API提供了丰富的商品信息,包括商品ID、标题、价格、销售量、评论数、评分等。除了这些基本信息之外,商品的图片信息也是商品SKU信息的重要组成部分。本文将详细介绍如何使用京东商品SKU API获取商品的图片信息,包括请求参数、响应数据结构以及示例代码。
|
5月前
|
API C#
C# 调用系统“API“设置图片为“桌面壁纸“
C# 调用系统“API“设置图片为“桌面壁纸“
|
6月前
|
小程序 前端开发 JavaScript
小程序调用图片接口API并居中显示
小程序调用图片接口API并居中显示
26 0
|
7月前
|
JavaScript 前端开发 API
通过一个实际例子,理解 SAP UI5 sap.ui.model.odata.v2.ODataModel API 中 BindingContext 绑定上下文的概念和用法试读版
通过一个实际例子,理解 SAP UI5 sap.ui.model.odata.v2.ODataModel API 中 BindingContext 绑定上下文的概念和用法试读版
42 0