js h5 上传图片 转成base64 进行图片压缩 不失真
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>测试</title>
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/index_1.css" />
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/ys.js"></script>
</head>
<body>
<div class="free-upload">
H5页面 <p>
上传您的约会照片，上传图片
</p>
<div class="free-upload-photo">
<span id="photo_img"></span>
<input type="file" id="photo" onchange="start_upload(this)"/>
</div>
</div>
<img src="" id="csimg" width="200" height="200"/>
</body>
<script>
function start_upload(obj){
if(!isCanvasSupported){
console.log("2222");
}else{
compress(event, function(base64Img){
$("#csimg").attr("src",base64Img);
console.log(base64Img);
// 如需保存 或 把base64转成图片 ajax提交后台处理
// 我这里采用ajax方式 自己封装的
ajax("qnl_app/tes_ac_img",{"base64Img":base64Img},function(date){
console.log(JSON.stringify(date));
});
});
}
}
</script>
</html>
以上是H5页面
下面是 压缩js
//判断是否存在画布
function isCanvasSupported() {
var elem = document.createElement("canvas");
return !!(elem.getContext && elem.getContext("2d"));
}
//压缩方法
function compress(event, callback) {
if ( typeof (FileReader) === "undefined") {
console.log("当前浏览器内核不支持base64图标压缩");
//调用上传方式 不压缩
} else {
try {
var file = event.currentTarget.files[0];
if(!/image/w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = function (e) {
var image = $("<img/>");
image.load(function () {
console.log("开始压缩");
var square = 700;
var canvas = document.createElement("canvas");
canvas.width = square;
canvas.height = square;
var context = canvas.getContext("2d");
context.clearRect(0, 0, square, square);
var imageWidth;
var imageHeight;
var offsetX = 0;
var offsetY = 0;
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL("image/jpeg");
//压缩完成执行回调
callback(data);
});
image.attr("src", e.target.result);
};
reader.readAsDataURL(file);
} catch(e) {
console.log("压缩失败!");
//调用上传方式 不压缩
}
}
}新手 大神勿喷
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
