apiCloud 选择图片,选择视频,压缩图片
选择视频或图片,只需要一个 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 选择图片,选择视频,压缩图片的更多相关文章
- thinphp5-image图片处理类库压缩图片
使用tp5的thinkphp-image类库处理图片 使用方法手册都有,为了增加印象我自己记录一下 手册:https://www.kancloud.cn/manual/thinkphp5/177530 ...
- 前端预览图片和H5canvas压缩图片上传
思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...
- 前端压缩图片,前端压缩图片后转换为base64.
今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...
- iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片
图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...
- EmguCV学习——视频与图片互转
其实视频转图片在上篇文章中已经有些眉目了,其实就是按帧读取视频,然后把帧保存就ok.然后自己再加个进度条美化一下...这代码简单易懂,还是直接上代码吧. 视频转图片 /// <summary&g ...
- C# Winform版批量压缩图片程序
需求 上周,领导给我分配了一个需求:服务器上的图片文件非常大,每天要用掉两个G的大小的空间,要做一个自动压缩图片的工具处理这些大图片.领导的思路是这样的: 1)打开一个图片,看它的属性里面象素是多少, ...
- IOS 视频分解图片、图片合成视频
在IOS视频处理中,视频分解图片和图片合成视频是IOS视频处理中经常遇到的问题,这篇博客就这两个部分对IOS视频图像的相互转换做一下分析. (1)视频分解图片 这里视频分解图片使用的是AVAssetI ...
- 【转】android如何浏览并选择图片 音频 视频
转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html 这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 ...
- python使用zlib库压缩图片,使用ffmpeg压缩视频
python压缩图片.视频 图片压缩使用zlib库 视频压缩使用工具ffmpeg # ffmpeg -i 1.mp4 -r 10 -pix_fmt yuv420p -vcodec libx264 -p ...
随机推荐
- Restful framework【第一篇】RESTful 规范
什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类审 ...
- bozoj3131: [Sdoi2013]淘金 数位dp
链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3131 思路 1. 函数值的素因子只有2.3.5.7 由他们组成的状态不多,爆搜的时候即使搜不 ...
- 【做题】BZOJ2342 双倍回文——马拉车&并查集
题意:有一个长度为\(n\)的字符串,求它最长的子串\(s\)满足\(s\)是长度为4的倍数的回文串,且它的前半部分和后半部分都是回文串. \(n \leq 5 \times 10^5\) 首先,显然 ...
- (转) 机器学习很有趣Part6:怎样使用深度学习进行语音识别
本文转自:http://www.jiqizhixin.com/article/2321 机器学习很有趣Part6:怎样使用深度学习进行语音识别 2017-02-19 13:20:47 机器学习 ...
- Unity3D学习笔记(三十六):Shader着色器(3)- 光照
光照模型:用数学的方法模拟现实世界中的光照效果. 场景中模型身上的光反射到相机中的光线: 1.漫反射:产生明暗效果 2.高光反射:产生镜面反射,物体中有最亮且比较耀眼的一部分 3.自发光: 4.环 ...
- Vue学习二:v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- 【译】第45节---EF6-索引属性
原文:http://www.entityframeworktutorial.net/entityframework6/index-attribute-in-code-first.aspx Entity ...
- HTML基本内容
设置背景色:<body bgcolor="#AAAAAA">,设置背景图:<body background="1.png">. 颜色的知 ...
- http协议的状态码解释
一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务器超时 下面提供 HTTP 状态码的完整列表.点击链接可了解详情.您也可以访问 HTTP 状态码上的 ...
- 蚂蚁金服×西安银行 | 西安银行手机银行App的智能升级之路
小蚂蚁说: 当前,数字化信号已经逐渐深入到社会的每个角落,影响着用户的心智和行为,来到数字化时代门口的银行,需要注意到数字化信号.西安银行通过引入蚂蚁金服移动开发平台mPaaS,对手机银行进行架构升级 ...