宜信同城网交流论坛技术专版技术专区Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相 ...方法： pick: 从系统相册选择文件（图片或视频）save: 保存文件到系统相册中对象： ...

admin 发表于 2023-2-16 18:54:53

Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相 ...

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 <h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.pick">pick</a>: 从系统相册选择文件（图片或视频）</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.save">save</a>: 保存文件到系统相册中</li></ul>
<h2 style="margin-left:.8em;">对象：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryOptions">GalleryOptions</a>: JSON对象，从相册中选择文件的参数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryCropStyles">GalleryCropStyles</a>: 裁剪图片设置项</li><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryFilter">GalleryFilter</a>: 相册选择文件过滤类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GallerySaveEvent">GallerySaveEvent</a>: 保存图片到相册成功事件</li><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.PopPosition">PopPosition</a>: JSON对象，弹出拍照或摄像界面指示位置</li></ul>
<h2 style="margin-left:.8em;">回调方法：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryPickSuccessCallback">GalleryPickSuccessCallback</a>: 单选系统相册图片成功的回调</li><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryMultiplePickSuccessCallback">GalleryMultiplePickSuccessCallback</a>: 多选系统相册图片成功的回调</li><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GallerySuccessCallback">GallerySuccessCallback</a>: 操作系统相册成功的回调</li><li><ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryErrorCallback">GalleryErrorCallback</a>: 系统相册操作失败的回调</li></ul>
<h2 style="margin-left:.8em;">权限：</h2>
5+功能模块（permissions）
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
{
// ...
"permissions":{
// ...
"Gallery": {
"description": "系统相册"
}
}
}
</code></code></pre>
<h1 style="margin-left:0;">pick</h1>
从系统相册选择文件（图片或视频）
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.gallery.pick(successCB, errorCB, options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从系统相册中选择图片或视频文件。每次仅能选择一个文件，选择后将返回选择的文件路径。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>succesCB: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GalleryPickSuccessCallback">GalleryPickSuccessCallback</a> | <ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GalleryMultiplePickSuccessCallback">GalleryMultiplePickSuccessCallback</a> ) 必选 从系统相册中选择文件完成后的回调函数 单选时通过GalleryPickSuccessCallback回调函数返回选择的图片或视频文件路径，多选时通过GalleryMultiplePickSuccessCallback回调函数返回图片或视频文件路径。 </li><li>errorCB: ( <ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GalleryErrorCallback">GalleryErrorCallback</a> ) 可选 从系统相册中选择文件操作错误的回调函数 </li><li>options: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GalleryOptions">GalleryOptions</a> ) 可选 设置选择文件的参数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持) : 返回的是系统相册路径，如“file:///storage/sdcard0/DCIM/Camera/1428841301674.jpg”。 </li><li>iOS - 5.1+ (支持) : 受系统相册路径的访问限制，选择后图片会先拷贝到应用沙盒下的"_doc"目录中，如“file:///var/mobile/Applications/0373DFBF-6AA7-4C9B-AE1F-766469117C94/Library/Pandora/apps/HBuilder/doc/IMG_0005.jpg”。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择图片 
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filter:"image"} );
}
// 从相册中选择多张图片 
function galleryImgs(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
 console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true});
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">save</h1>
保存文件到系统相册中
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.gallery.save( path, successCB, errorCB );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
保存文件到系统相册中。每次仅能保存一个文件，支持图片文件（jpg/jpeg、png、bmp等格式）和视频文件（3gp、mov等格式）。若保存的文件类型当前系统不支持，则通过errorCB回调返回错误信息。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>path : ( String ) 必选 要保存到系统相册中的文件文件地址 </li><li>succesCB: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GallerySuccessCallback">GallerySuccessCallback</a> ) 必选 保存文件到系统相册中成功的回调函数 </li><li>errorCB: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GalleryErrorCallback">GalleryErrorCallback</a> ) 可选 保存文件到系统相册中失败的回调函数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持)</li><li>iOS - 4.3+ (支持)</li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 保存图片到相册中 
function savePicture() {
plus.gallery.save( "_doc/a.jpg", function () {
alert( "保存图片到相册成功" );
} );
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">GalleryOptions</h1>
JSON对象，从相册中选择文件的参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface plus.gallery.GalleryOptions {
attribute Boolean animation;
attribute String confirmText;
attribute GalleryCropStyles crop;
attribute Boolean editable;
attribute String filename;
attribute GalleryFilter filter;
attribute Number maximum;
attribute Boolean multiple;
attribute Boolean permissionAlert;
attribute PopPosition popover;
attribute Array<String> selected;
attribute Boolean system;
attribute Function onmaxed;
}
</code></code></pre>
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>animation: (Boolean 类型 )是否显示系统相册文件选择界面的动画 可取值true、false，默认值为true。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (不支持) : 忽略此参数，无动画效果。 </li><li>iOS - 4.3+ (支持) : 支持动画效果。 </li></ul></li><li>confirmText: (String 类型 )确认按钮文字 不传入此参数时，使用默认确认按钮文字“确定”。 注意：HBuilderX3.1.5+版本支持。 </li><li>crop: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GalleryCropStyles">GalleryCropStyles</a> 类型 )配置裁剪图片 设置裁剪图片项后，在相册中选择图片一定会进入裁剪编辑界面，确认后返回裁剪后的图片。 设置此值后只能选择一张图片。注意：HBuilderX3.1.19及以上版本支持。 </li><li>editable: (Boolean 类型 )是否支持编辑图片 可取值true、false，默认值为true。 注意：HBuilderX3.1.5+版本支持。 </li><li>filename: (String 类型 )选择文件保存的路径 某些系统不能直接使用系统相册的路径，这时需要将选择的文件保存到应用可访问的目录中，可通过此参数设置保存文件的路径。如果路径中包括文件后缀名称，则表明指定文件路径及名称，否则仅指定文件保存目录，文件名称自动生成。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (不支持) : 直接返回系统相册中的文件路径，忽略此参数。 </li><li>iOS - 4.3+ (支持) : 如果未设置则默认使用应用临时目录（系统在磁盘控件不足时自动清理）。如果希望将文件拷贝到应用沙箱目录中，可通过此参数配置目标路径（如"_doc/gallery/"）。 </li></ul></li><li>filter: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.GalleryFilter">GalleryFilter</a> 类型 )相册中选择文件类型过滤器 系统相册选择器中可选择的文件类型，可设置为仅选择图片文件（“image”）、视频文件（“video”）或所有文件（“none”），默认值为“image”。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择图片 
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filter:"image"} );
}
</code></code></pre> </li><li>maximum: (Number 类型 )最多选择的图片数量 仅在支持多选时有效，取值范围为1到Infinity，默认值为Infinity，即不限制选择的图片数。如果设置的值非法则使用默认值Infinity。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择多张图片 
function galleryMaximum(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
 console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true,maximum:3,system:false});// 最多选择3张图片
}
</code></code></pre> </li><li>multiple: (Boolean 类型 )是否支持多选图片 可从系统相册中选择多张图片，选择图片后通过GalleryMultiplePickSuccessCallback回调返回选择的图片。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择多张图片 
function galleryImgs(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
 console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true});
}
</code></code></pre> </li><li>onmaxed: (Function 类型 )超过最多选择图片数量事件 使用相册多选图片时，可通过maximum属性设置最多选择的图片数量，当用户操作选择的数量大于此时触发此事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 系统相册文件选择界面不支持设置选择的图片数量，只有当用户选择的图片数量超过最多图片数是触发，为了确保此功能可正常使用，应该设置system属性值为false强制使用5+统一相册选择界面。注意：此时显示的相册文件选择界面，需要使用plus.nativeUI.*弹出提示框，否则可能无法正常显示。 </li><li>iOS - ALL (支持)</li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择多张图片 
function galleryOnmaxed(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
 console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true,maximum:3,system:false,onmaxed:function(){
plus.nativeUI.alert('最多只能选择3张图片');
}});// 最多选择3张图片
}
</code></code></pre> </li><li>permissionAlert: (Boolean 类型 )是否检测权限 可取值：
<ul style="margin-left:2em;"><li>true - 检测到用户没有授权访问相册，将会弹出提示框引导用户授权</li><li>false - 检测到用户没有授权访问相册，触发错误回调，无界面提示</li></ul> 默认值为false。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持)</li><li>iOS - 8.0+ (支持) : HBuilderX2.9.5+版本支持，iOS14上如果设置为访问`选中的照片`权限时引导修改为访问`所有照片` </li></ul></li><li>popover: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122812440#plus.gallery.PopPosition">PopPosition</a> 类型 )相册选择界面弹出指示区域 对于大屏幕设备如iPad，相册选择界面为弹出窗口，此时可通过此参数设置弹出窗口位置。其为JSON对象，格式如{top:"10px",left:"10px",width:"200px",height:"200px"}，所有值为像素值，左上坐标相对于容器的位置，默认弹出位置为屏幕居中。 </li><li>selected: (Array 类型 )已选择的图片路径列表 仅在多图片选择时生效，相册选择界面将选中指定的图片路径列表。如果指定的路径无效，则忽略此项；如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 系统相册文件选择界面不支持设置已选择的图片列表，为了确保此功能可正常使用，应该设置system属性值为false强制使用5+统一相册选择界面。 </li><li>iOS - ALL (支持)</li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var lfs=null;// 保留上次选择图片列表
// 从相册中选择多张图片 
function gallerySelected(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
lfs=e.files;
 console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true,selected:lfs,maximum:3,system:false});// 最多选择3张图片
}
</code></code></pre> </li><li>system: (Boolean 类型 )是否使用系统相册文件选择界面 废弃，HBuilderX2.9.6+版本不再使用系统自带相册选择控件。 </li></ul>
<h1 style="margin-left:0;">GalleryCropStyles</h1>
裁剪图片设置项
<h2 style="margin-left:.8em;">说明：</h2>
注意：HBuilderX3.1.19及以上版本支持。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>quality: (Number 类型 )裁剪后保存图片的质量 取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。 </li><li>width: (Number 类型 )裁剪的宽度 单位为px，用于计算裁剪宽高比。必须设置此值。 </li><li>height: (Number 类型 )裁剪的高度 单位为px，用于计算裁剪宽高比。必须设置此值。 </li><li>resize: (Boolean 类型 )是否将图片保存为指定的宽高像素 true表示将width和height作为裁剪保存图片的像素值，false表示使用图片编辑操作的真实像素值。 默认值为true。 设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示。 </li><li>saveToAlbum: (Boolean 类型 )裁剪后的图片是否保存到相册中 true表示将裁剪后的图片保存到相册中，false表示不将裁剪后的图片保存到相册中。默认值为false。 HBuilder3.3.0+版本支持。 </li></ul>
<h1 style="margin-left:0;">GalleryFilter</h1>
相册选择文件过滤类型
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>"image": (String 类型 )仅可选择图片文件</li><li>"video": (String 类型 )仅可选择视频文件</li><li>"none": (String 类型 )不过滤，可选择图片或视频文件</li></ul>
<h1 style="margin-left:0;">GallerySaveEvent</h1>
保存图片到相册成功事件
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>path: (String 类型 )保存到相册的图片路径</li></ul>
<h1 style="margin-left:0;">PopPosition</h1>
JSON对象，弹出拍照或摄像界面指示位置
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>top: (String 类型 )指示区域距离容器顶部的距离 弹出拍照或摄像窗口指示区域距离容器顶部的距离，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值值。 </li><li>left: (String 类型 )指示区域距离容器左侧的距离 弹出拍照或摄像窗口指示区域距离容器左侧的距离，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值。 </li><li>width: (String 类型 )指示区域的宽度 弹出拍照或摄像窗口指示区域的宽度，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值。 </li><li>height: (String 类型 )指示区域的高度 弹出拍照或摄像窗口指示区域的高度，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值。 </li></ul>
<h1 style="margin-left:0;">GalleryPickSuccessCallback</h1>
单选系统相册图片成功的回调
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onSuccess( file ) {
// Success code
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
系统相册中单选图片或视频文件成功的回调函数，在选择文件操作成功时调用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>file: ( String ) 必选 选择的图片或视频文件路径 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择单张图片 
function galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
console.log(path);
}, function ( e ) {
console.log( "取消选择图片" );
}, {filter:"image"} );
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">GalleryMultiplePickSuccessCallback</h1>
多选系统相册图片成功的回调
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onSuccess( event ) {
// Pick success
var files = event.files; // 保存多选的图片或视频文件路径
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
系统相册中多选图片或视频文件成功的回调函数，在多选择文件操作成功时调用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 多选系统相册返回数据 Event对象包含以下属性： files - 字符串数组，保存多选的图片或视频文件路径。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 从相册中选择多张图片 
function galleryImgs(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
for(var i in e.files){
 console.log(e.files[i]);
}
}, function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true});
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">GallerySuccessCallback</h1>
操作系统相册成功的回调
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onSuccess(GallerySaveEvent event) {
// Success code
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
系统相册操作成功的回调函数，在保存文件到系统相册操作成功时调用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.GallerySaveEvent">GallerySaveEvent</a> ) 必选 保存文件到系统相册成功事件对象 可通过其path属性获取保存文件的路径。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">GalleryErrorCallback</h1>
系统相册操作失败的回调
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onError( error ) {
// Handle error
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
系统相册操作失败的回调函数，在选择或保存图片操作失败时调用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>error: ( Exception ) 必选 相册操作失败的错误信息 可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描述信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相 ...