选择视频或图片,只需要一个 UIMediaScanner 模板就可以实现,点击链接查看api

https://docs.apicloud.com/Client-API/UI-Layout/UIMediaScanner

textareaClick: [{
   text: '',
   img: [],
   realImg: [],
   realVideo: [],
   video: []
}],

        
        var app = new Vue({
el: "#app",
data: function() {
return {
textareaClick: [{
text: '',
img: [],
realImg: [],
realVideo: [],
video: []
}],
token: ''
}
},
methods: {
          upload_image: function(index) {
            //选择图片与视频
var this_obj = this;
var UIMediaScanner = api.require('UIMediaScanner');
UIMediaScanner.open({
type: 'all', //视频与图片,all(图片和视频)picture(图片)video(视频)
column: ,
classify: true,
max: ,
sort: {
key: 'time',
order: 'desc'
},
texts: {
stateText: '已选择*项',
cancelText: '取消',
finishText: '完成'
},
styles: {
bg: '#fff',
mark: {
icon: '',
position: 'bottom_left',
size:
},
nav: {
bg: '#eee',
stateColor: '#000',
stateSize: ,
cancelBg: 'rgba(0,0,0,0)',
cancelColor: '#000',
cancelSize: ,
finishBg: 'rgba(0,0,0,0)',
finishColor: '#000',
finishSize:
}
},
scrollToBottom: {
intervalTime: -
},
exchange: true,
rotation: true
}, function(ret) {
if (ret) {
if (ret.eventType == 'confirm') {
this_obj.compress_img(ret.list, index);
}
}
});
},
compress_img: function(img_arr, arr_index) {
            //压缩图片
var UIMediaScanner = api.require('UIMediaScanner');
var imageFilter = api.require("imageFilter");
var temp_path1 = img_arr.shift();
temp_path = temp_path1.path;
var filename = Math.random() + '.jpg';
var this_obj = this;
var target_w = ;
var type_play = temp_path1.suffix
if (api.systemType == "ios") {
UIMediaScanner.transPath({
path: temp_path
}, function(res, err) {
if (res.status) {
if (type_play == 'mp4') {
this_obj.textareaClick[arr_index].video.push(res.path);
} else {
imageFilter.getAttr({
path: res.path
}, function(ret, err) {
if (ret.status) {
if (ret.width < target_w) {
target_w = ret.width;
}
var original_w = ret.width;
var original_h = ret.height;
var scale = original_w / target_w;
var target_h = Math.round(original_h / scale);
imageFilter.compress({
img: res.path,
quality: ,
size: {
w: target_w,
h: target_h
},
save: {
album: false,
imgPath: api.cacheDir + '/upload/',
imgName: filename
}
}, function(ret, err) {
if (ret.status) {
this_obj.textareaClick[arr_index].img.push(api.cacheDir + '/upload/' + filename);
if (img_arr.length > ) {
this_obj.compress_img(img_arr, arr_index);
}
}
});
}
});
}
} else {
api.toast({
msg: err
});
}
})
} else {
if (type_play == 'mp4') {
this_obj.textareaClick[arr_index].video.push(temp_path);
} else {
imageFilter.getAttr({
path: temp_path
}, function(ret, err) {
if (ret.status) {
if (ret.width < target_w) {
target_w = ret.width;
}
var original_w = ret.width;
var original_h = ret.height;
var scale = original_w / target_w;
var target_h = Math.round(original_h / scale);
imageFilter.compress({
img: temp_path,
quality: ,
size: {
w: target_w,
h: target_h
},
save: {
album: false,
imgPath: api.cacheDir + '/upload/',
imgName: filename
}
}, function(ret, err) {
if (ret.status) {
this_obj.textareaClick[arr_index].img.push(api.cacheDir + '/upload/' + filename);
if (img_arr.length > ) {
this_obj.compress_img(img_arr, arr_index);
}
}
});
}
});
}
}
} }
})

 

console.log(this_obj.textareaClick)可以查看这个数组

apiCloud 选择图片,选择视频,压缩图片的更多相关文章

  1. thinphp5-image图片处理类库压缩图片

    使用tp5的thinkphp-image类库处理图片 使用方法手册都有,为了增加印象我自己记录一下 手册:https://www.kancloud.cn/manual/thinkphp5/177530 ...

  2. 前端预览图片和H5canvas压缩图片上传

    思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...

  3. 前端压缩图片,前端压缩图片后转换为base64.

    今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...

  4. iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片

    图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...

  5. EmguCV学习——视频与图片互转

    其实视频转图片在上篇文章中已经有些眉目了,其实就是按帧读取视频,然后把帧保存就ok.然后自己再加个进度条美化一下...这代码简单易懂,还是直接上代码吧. 视频转图片 /// <summary&g ...

  6. C# Winform版批量压缩图片程序

    需求 上周,领导给我分配了一个需求:服务器上的图片文件非常大,每天要用掉两个G的大小的空间,要做一个自动压缩图片的工具处理这些大图片.领导的思路是这样的: 1)打开一个图片,看它的属性里面象素是多少, ...

  7. IOS 视频分解图片、图片合成视频

    在IOS视频处理中,视频分解图片和图片合成视频是IOS视频处理中经常遇到的问题,这篇博客就这两个部分对IOS视频图像的相互转换做一下分析. (1)视频分解图片 这里视频分解图片使用的是AVAssetI ...

  8. 【转】android如何浏览并选择图片 音频 视频

    转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html   这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 ...

  9. python使用zlib库压缩图片,使用ffmpeg压缩视频

    python压缩图片.视频 图片压缩使用zlib库 视频压缩使用工具ffmpeg # ffmpeg -i 1.mp4 -r 10 -pix_fmt yuv420p -vcodec libx264 -p ...

随机推荐

  1. eMMC应用教程:关于RPMB的应用【转】

    本文转载自:https://blog.csdn.net/youdianhai/article/details/51246379 RPMB的意思是Replay Protected Memory Bloc ...

  2. tp剩余未验证内容

    new Image(宽度,高度) $(image).attr('src', ...).load(function(){....}) load表示浏览器从服务器下载(装载)对象完成, 这个load方法很 ...

  3. IDEA引入Gradle工程小记

    1.首先IDEA要在该工程Settings中配置本地安装的Gradle,配好其home目录,注意目录到根目录即可,不要到bin一级,否则提示错误,无法使用: 2.配置好后会自动侦测Gradle项目,点 ...

  4. html 之 body topmargin、leftmargin、rightmargin、bottomnargin

    基本语法 <body topmargin=value leftmargin=value rightmargin=value bottomnargin=value> 语法说明 通过设置top ...

  5. 【模板】关于c++的代码模板

    收集了点代码模板,现在整理在这里. 目录: 大数阶乘 高精度(大数乘小数) 高精度(大数乘大数) 高精度(加法) 高精度(减法) 进制转化 最大公约数 最小公倍数 组合序列 未完待续

  6. 浅谈IIS 和 asp.net的应用之间的关系

    IIS可以理解为一个web服务器. 用于提供web相关的各种服务. IIS6.0中添加了一个新的功能, application pool. application pool的作用是将运行在同一个ser ...

  7. Jdk在window环境下的安装与配置详解

    本文为博主原创,转载请注明出处: 1.2  Java程序开发环境的配置 java开发工具包:java开发工具:记事本 IDE,这个只能写小程序,写大程序需要集成开发工具:反编译工具(我们可以在网上找一 ...

  8. Linux命令之du命令

    du命令 显示文件或目录所占用的磁盘空间. 命令格式: du [option] 文件/目录 -h 输出文件系统分区使用的情况,例如:10KB,10MB,10GB等 -s 显示文件或整个目录的大小,默认 ...

  9. <aop:aspect>与<aop:advisor>的区别

    在开发过程中,不少有Spring Aop的使用,在面向切面编程时,我们会使用< aop:aspect>:在进行事务管理时,我们会使用< aop:advisor>.那么,对于&l ...

  10. 完美解决百度网盘、浏览器下载限速问题proxyee-down(附带win破解版云盘)

    win版破解云盘 下载: <PanDownload> 使用文档: <PanDownload使用> Mac方法 限速.限速! 平时下载东西限速倒无所谓,遇到急一点的.盯着80km ...