HTML5 JS 压缩图片,并取得图片的BASE64编码上传

  • A+
所属分类：JavaScript

HTML5 JS 压缩图片,并取得图片的BASE64编码上传

基本过程

1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象.

2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.

3) 通过 canvas.toDataURL("image/jpeg", 0.1); 方法, 将图片变成base64字符串, 传入服务端.

  1. var vueImg = new Vue({  
  2.         el: "#divCarImages",  
  3.         data: { model: { carId: '@carId', imageTitle:'',img64:'' }, images: [] },  
  4.         methods: {  
  5.             imageHandle: function () {  
  6.                 var fup = $("#fileImg")[0];  
  7.   
  8.                 var img = fup.files[0];  
  9.   
  10.                 var image = new Image();  
  11.                 var canvas = $("#canvas")[0];//document.createElement("canvas");  
  12.                 var ctx = canvas.getContext('2d');  
  13.   
  14.                 image.onload = function () {  
  15.                     var w = image.naturalWidth,  
  16.                         h = image.naturalHeight;  
  17.   
  18.                     var toSize = 400;  
  19.                     canvas.width = toSize;  
  20.                     canvas.height = toSize;  
  21.   
  22.                     var w2 = toSize, h2 = toSize;  
  23.                     if (w > h) {  
  24.                         h2 = h / w * toSize;  
  25.                     } else {  
  26.                         w2 = w / h * toSize;  
  27.                     }  
  28.   
  29.                     ctx.drawImage(image, 0, 0, w, h, 0, 0, w2, h2);  
  30.                        
  31.                 }  
  32.   
  33.                 // 判断是否图片  
  34.                 if (!img) {  
  35.                     return;  
  36.                 }  
  37.   
  38.                 // 判断图片格式  
  39.                 if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {  
  40.                     alert('图片只能是jpg,gif,png');  
  41.                     return;  
  42.                 }  
  43.   
  44.                 var reader = new FileReader();  
  45.   
  46.                 reader.onload = function (e) { // reader onload start  
  47.                     var url = reader.result;  
  48.                     image.src = url;  
  49.   
  50.                 } // reader onload end  
  51.   
  52.                 reader.readAsDataURL(img);  
  53.             }  
  54.   
  55.         }  
  56.     });  
  1. function uploadImg() {  
  2.         var canvas = $("#canvas")[0];  
  3.         vueImg.model.img64 = canvas.toDataURL("image/jpeg", 0.1);  
  4.         //$("#testMsg").html(imgData.length);  
  5.                        
  6.         // ajax 上传图片  
  7.         $.post("@Url.Content("~/AliOss/SaveCarImage")", vueImg.model , function (ret) {  
  8.   
  9.             parseAjaxData(data, function (model) {  
  10.                 console.log(model.Path);  
  11.                 alert(model.Path);  
  12.                 $('#showimg').html('<img src="' + model.Path + '">');  
  13.             })         
  14.         }, 'json');  
  15.     }  
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: