选择视频或图片,只需要一个 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. C#操作字符串方法总结

    /* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...

  2. Django框架(十) Django之模型进阶

    QuerySet对象 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. Entry.objects.all()[:5] # (LIMI ...

  3. vue学习【第五篇】:Vue组件

    什么是组件 - 每一个组件都是一个vue实例 - 每个组件均具有自身的模板template,根组件的模板就是挂载点 - 每个组件模板只能拥有一个根标签 - 子组件的数据具有作用域,以达到组件的复用 根 ...

  4. SpringBoot 利用过滤器Filter修改请求url地址

    要求: 代码中配置的url路径为http://127.0.0.1/api/associates/queryAssociatesInfo 现在要求http://127.0.0.1/associates/ ...

  5. PKM(个人知识管理)类软件收集(偶尔更新列表)

    evernote(印象笔记) Wiz 有道云 麦库 leanote GoogleKeep OneNote SimpleNote(wp家的,免费) pocket(稍后读的软件,同类的还有Instapap ...

  6. jlink的SWD与JTAG下载模式的对应接线方法

     参考博客:http://blog.csdn.net/qq_26093511/article/details/59484249 (1)如果用jtag模式下载的话需要接线:          jlink ...

  7. [转载]解决linux 下多线程错误 undefined reference to `sem_init'

    转自:https://blog.csdn.net/yzycqu/article/details/7396498?utm_source=copy 解决linux 下多线程错误 undefined ref ...

  8. JMeter 生成精度度为分钟的时间戳文件名

    import java.util.Calendar; import java.util.Date; import java.util.TimeZone; import java.text.Simple ...

  9. python循环语句与其他编程语言不同之处

    1.局部变量 for i in range(5): print i, print i, 运行结果: 0 1 2 3 4 4 i是for语句里面的局部变量.但在python里面,在同一方法体内,定义了一 ...

  10. IIS客户端没有权限

    运行CMDicacls c:\ /setintegritylevel M