你的位置:首页 > ASP.net教程

[ASP.net教程]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 start47           var url = reader.result;48           image.src = url;49 50         } // reader onload end51 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   }

 原文地址: http://www.cnblogs.com/ybst/p/6033199.html