手机端图片压缩后上传base64
一个js就能做到的手机端图片压缩后上传base64，另外可以根据下方代码修改成连续多图上传并且带预览效果，下面是由百分网小编为大家准备的.手机端图片压缩后上传base64，喜欢的可以收藏一下！了解更多详情资讯，请关注应届毕业生考试网！
/**
* 从网上下载来的一个招数，网上是传多图，我这个是单个上传返回图片路径,要自定义一个callbackCanvsUpload（res）res={'code':1,'data':'','msg':}
*
*
*
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/static/js/canvsupload.js"></script>
<input id="canvsUpload" type="file" name="canvsUpload" accept="image/*" multiple="multiple" />
<div id="canvasDiv"></div>
<script>
function callbackCanvsUpload(res) {
alert(res.code);
}
</script>
*/
var imgTypeArr = new Array();
var imgArr = new Array();
var isHand = 0;// 1正在处理图片
var base64Img = '';
var nowImgType = "image/jpeg";
var uploadApiUrl="http://www.5atl.com";
var jic = {
compress : function(source_img_obj, imgType) {
source_img_obj.onload = function() {
var cvs = document.createElement('canvas');
var scale = this.height / this.width;
cvs.width = 640;
cvs.height = 640 * scale;
var ctx = cvs.getContext("2d");
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL(imgType, 0.8);
base64Img = newImageData;
//预览图
//var img = new Image();
//img.src = newImageData;
//$(img).css('width', 100 + 'px');
//$(img).css('height', 100 + 'px');
//$("#canvasDiv").append(img);
isHand = 0;
catUpload();
}
}
}
function handleFileSelect(evt) {
isHand = 1;
imgArr = [];
imgTypeArr = [];
$("#canvasDiv").html("");
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
imgTypeArr.push(f.type);
nowImgType = f.type;
var reader = new FileReader();
// Read in the image file as a data URL.
reader.readAsDataURL(f);
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var i = new Image();
i.src = e.target.result;
jic.compress(i, nowImgType);