手機端圖片壓縮后上傳base64

相關推薦

手機端圖片壓縮后上傳base64

　　一個js就能做到的手機端圖片壓縮后上傳base64，另外可以根據下方代碼修改成連續多圖上傳并且帶預覽效果，下面是由百分網小編為大家準備的手機端圖片壓縮后上傳base64，喜歡的可以收藏一下！了解更多詳情資訊，請關注應屆畢業生考試網！

　　/**

　　* 從網上下載來的一個招數，網上是傳多圖，我這個是單個上傳返回圖片路徑,要自定義一個callbackCanvsUpload（res）res={'code':1,'data':'','msg':}

　　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讀取和保存base64編碼圖片05-10

PHP base64解碼加密圖片的還原方法04-25

php上傳與刪除圖片的簡單范例12-15