- 相關推薦
手機端圖片壓縮后上傳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);
};
})(f);
}
}
$(function() {
document.getElementById('canvsUpload').addEventListener('change',handleFileSelect, false);
});
function catUpload() {
if (base64Img == "") {
callbackCanvsUpload({'code':-1,'data':'','msc':'您還沒有選擇圖片'});
return false;
}
if (isHand == 1) {
callbackCanvsUpload({'code':-1,'data':'','msc':'請等待圖片處理完畢！'});
return;
}
canvsalert('圖片正在處理上傳中···');
$.ajax({
type : "POST",
url : uploadApiUrl,
// data : {'img' : imgArr,'type' : imgTypeArr},// 如果是上傳多圖就用這個方式
data : {'img' : base64Img,'type' : nowImgType},
success : function(res){
callbackCanvsUpload(res);
}
});
}
function canvsalert(msg) {
var style = "display: block; width: 92%;padding:4%; height: 100%; z-index: 10; position: fixed; text-align: center; top: 0px; background: rgba(1,1,1,0.8); color: #fff; padding-top: 200px; font-size: 1em;line-height:1.5em;left:0;";
var str = '<div id="canvsalertc" style="' + style + '">' + msg + '</div>';
$("body").append(str);
setTimeout('$("#canvsalertc").remove()', 3000);
}
【手機端圖片壓縮后上傳base64】相關文章：
php上傳圖片客戶端和服務器端實現方法02-09
Photoshop對圖片壓縮的步驟07-03
PHP圖片上傳類帶圖片顯示03-13
java上傳圖片的縮放的方法07-30
簡單PHP上傳圖片的方法02-01
Fireworks批量壓縮圖片04-04
php讀取和保存base64編碼圖片05-10
php上傳與刪除圖片的簡單范例12-15