作者:淡若清芬_920 | 来源:互联网 | 2023-10-12 11:10
HTML5部分<button@click"tesCamera()"type"button":disabled"isshStatus">按钮ces<butt
HTML5 部分
*注意:这里值得注意的是,button标签中一定要写type属性等于button,不然HTML5 plus 会识别不了
JS部分
tesCamera(){
let that = this;
//调用原生系统弹出按钮选择框
let page = null;
page={
imgUp:function(){
plus.nativeUI.actionSheet(
{cancel:"取消",buttons:[
{title:"拍照"},
{title:"从相册中选择"}
]}, function(e){
//1 是拍照 2 从相册中选择
switch(e.index){
case 1:
getImage();
break;
case 2:
appendByGallery();
break;
default:
break;
}
});
}
}
// 拍照函数
function getImage(){
let cmr = plus.camera.getCamera();
cmr.captureImage(function(p){
plus.io.resolveLocalFileSystemURL(p, function(entry){
var path = entry.toLocalURL();
//文件传转base64方法
that.imgPreviewnew(path, _typedata);
}, function(e){
console.log("读取拍照文件错误:"+e.message);
});
}, function(e){
console.log("读取拍照文件错误:"+e.message);
}, {filename:'_doc/camera/',index:1});
}
//选择相片文件
function appendByGallery(){
plus.gallery.pick(function(path){
//文件传转base64方法
that.imgPreviewnew(path, _typedata);
});
}
// 弹出系统选择按钮框
page.imgUp();
}
(1).图片转base64函数
imgPreviewnew(file, type){
let that = this;
let Orientation;
let img = new Image();
img.src = file;
img.onload = function () {
//压缩图片函数-输出base64
let data = that.compress(img,Orientation);
}
}
(2).图片压缩函数
compress(img,Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d');
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素,计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = width * height / 4000000) > 1) {
console.log("大于400万像素")
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = width * height / 1000000) > 1) {
console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i ) {
for (let j = 0; j ) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//修复ios上传图片的时候 被旋转的问题
if(Orientation != "" && Orientation != 1){
switch(Orientation){
case 6://需要顺时针(向左)90度旋转
this.rotateImg(img,'left',canvas);
break;
case 8://需要逆时针(向右)90度旋转
this.rotateImg(img,'right',canvas);
break;
case 3://需要180度旋转
this.rotateImg(img,'right',canvas);//转两次
this.rotateImg(img,'right',canvas);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL('image/jpeg', 0.1);
console.log('压缩前:' + initSize);
console.log('压缩后:' + ndata.length);
console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
}
如果函数有误请在下方评论留言,谢谢^_^