mui 开发知识 积累总结-----图片压缩上传
转载自：http://www.jianshu.com/p/61fc0fc8e3af
一、首先这是HTML的代码 显示一张图片
![]()
"my_img_id" class="my_img_class" src="../images/example.png"/>二、然后这是JavaScript代码
//点击添加图片
img_my.addEventListener('tap', function() {
//打开相册
plus.gallery.pick(
function(path) {
img_my.src = path; //设置img的路径
//把图片base64编码 注意：这里必须在onload事件里执行！这给我坑的不轻
img_my.onload = function() {
var data = getBase64Image(img_my); //base64编码
var newImgbase = data.split(",")[1]; //通过逗号分割到新的编码
imgArray.push(newImgbase); //放到imgArray数组里面
img_my.off('load'); //关闭加载
}
},
function(e) {
mui.toast('取消选择');
});
});
//base64编码
function getBase64Image(img) {
var canvas = document.createElement("canvas"); //创建canvas DOM元素，并设置其宽高和图片一样
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height); //使用画布画图
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); //动态截取图片的格式
var dataURL = canvas.toDataURL("image/" + ext); //返回的是一串Base64编码的URL并指定格式
return dataURL;
}三、上传图片操作
function uploadimg() {
//这里就可以把添加过图片的imgArray通过JSON解析成字符串，然后上传给服务器
var imgJson = JSON.stringify(imgArray);
mui.ajax("http://www.baidu.com/upload.html", {
data: {
pic: imgJson,
},
type: 'post',
timeout: 10000,
dataType: 'json',
success: function(data) {
if(data.error == 0) {
mui.toast('上传成功');
} else {
mui.toast('上传失败:'+data.data);
}
},
error: function(xhr, type, errorThrown) {
mui.toast('错误');
}
});
}转载自： http://www.bcty365.com/content-146-3263-1.html
Hbuilder MUI 上传图片到服务器完整版
html布局，比较简单，模仿微信的：
页面中js部分
var f1 = null;
var picarr = new Array();
var basearr = new Array();
var lat = "",
longt = "";
var files = [];
// 上传文件 www.bcty365.com
function upload() {
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(server + "?action=dynamicadd", {
method: "POST"
},
function(t, status) { //上传完成
if (status == 200) {
// console.log("上传成功：" + t.responseText);
mui.toast("发表成功");
//插入本地数据库
wt.close();
mui.back();
} else {
console.log("上传失败：" + status);
wt.close();
}
}
);
var title = $("#tbxtitle").val();
if (title.length < 1) {
wt.close();
mui.toast("内容不能为空");
} else {
task.addData("title", title);
task.addData("uid", getUid());
task.addData("userid", plus.storage.getItem("policeid"));
//task.addData("lat", lat.toString());
//task.addData("longt", longt.toString());
// console.log("准备上传"+files.length+"个图片");
for (var i = 0; i < files.length; i++) {
var f = files[i];
// console.log("准备上传的图片路径："+f.path);
task.addFile(f.path, {
key: f.name
});
}
task.start();
}
}
// 添加文件
var index = 1;
var newUrlAfterCompress;
function appendFile(p) {
files.push({
name: "uploadkey" + index,//这个值服务器会用到，作为file的key
path: p
});
index++;
}
// 产生一个随机数
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
}
function getposition() {
plus.geolocation.getCurrentPosition(function(p) {
var codns = p.coords; // 获取地理坐标信息；
lat = codns.latitude; //获取到当前位置的纬度；
longt = codns.longitude; //获取到当前位置的经度
}, function(e) {
//alert("获取百度定位位置信息失败：" + e.message);
}, {
provider: 'baidu'
});
}
function galleryImgs() { // 从相册中选择图片
plus.gallery.pick(function(e) {
$(".dynamic_images ul li").remove(".pickimg");
// console.log("选择了"+e.files.length+"个图片");
for (var i = 0; i < e.files.length; i++) {
if (i < 9) {
picarr[i] = e.files[i];
$(".dynamic_images ul").prepend("");
var dstname="_downloads/"+getUid()+".jpg";//设置压缩后图片的路径
newUrlAfterCompress=compressImage(e.files[i],dstname);
appendFile(dstname);
//console.log(e.files[i]);
//console.log(dstname);
}
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true
});
}
//压缩图片，这个比较变态的方法，无法return
function compressImage(src,dstname) {
//var dstname="_downloads/"+getUid()+".jpg";
plus.zip.compressImage({
src: src,
dst: dstname,
overwrite:true,
quality: 20
},
function(event) {
//console.log("Compress success:"+event.target);
return event.target;
},
function(error) {
console.log(error);
return src;
//alert("Compress error!");
});
}
//旋转图片，本文没用到
function rotateImage() {
plus.zip.compressImage({
src: "_www/a.jpg",
dst: "_doc/a.jpg",
rotate: 90 // 旋转90度
},
function() {
alert("Compress success!");
},
function(error) {
alert("Compress error!");
});
}
function showActionSheet() {
var bts = [{
title: "拍照"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
getImage();
} else if (e.index == 2) {
galleryImgs();
}
}
);
}
//拍照
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
var localurl = entry.toLocalURL(); //
$(".dynamic_images ul li").remove(".pickimg");
$(".dynamic_images ul").prepend("");
});
});
}