700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 前端中用手机拍照压缩 上传图片压缩

前端中用手机拍照压缩 上传图片压缩

时间:2019-06-04 09:05:08

相关推荐

前端中用手机拍照压缩 上传图片压缩

从百度找了各种方案都是从相册选取图片压缩,就找不到拍照直接压缩的苦恼了好久

下面上代码,自己引一下jquery直接就可以用的代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

img{

width: 500px;

height: 500px;

}

button{

width: 100px;

height: 50px;

margin: 0 auto;

}

</style>

</head>

<body>

<img id="x" src="" alt="" />

<button id="btn">拍照</button>

<script src="js/jquery.js"></script>

<script>

// 拍照添加文件

var btn = document.getElementById("btn");

btn.onclick = function(){

console.log(1212)

getImage()

}

function getImage() {

var cmr = plus.camera.getCamera();

cmr.captureImage(function(p) {

plus.io.resolveLocalFileSystemURL(p, function(entry) {

var localurl = entry.toLocalURL(); //把拍照的目录路径,变成本地url路径,例如file:///........之类的。

appendFile(localurl);

});

});

}

// 从相册添加文件 function appendByGallery(){plus.gallery.pick(function(path){appendFile(path);//处理图片的地方 });}

// 添加文件

var f1 = null;

function appendFile(path) {

var img = new Image();

img.src = path; // 传过来的图片路径在这里用。

var initSize = img.src.length;

img.onload = function() {

var that = this;

//生成比例

var w = that.width,

h = that.height,

scale = w / h;

w = 480 || w; //480 你想压缩到多大,改这里

h = w / scale;

//生成canvas

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

$(canvas).attr({

width: w,

height: h

});

ctx.drawImage(that, 0, 0, w, h);

var base64 = canvas.toDataURL('image/jpeg', 0.3); //1最清晰,越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data:image/png;却是png。哎开心就好,开心就好

// alert(base64);

f1 = base64; // 把base64数据丢过去,上传要用。

var pic = document.getElementById("x");

pic.src = base64; //这里丢到img 的 src 里面就能看到效果了

}

}

</script>

</body>

</html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。