這篇文章主要為大家展示了“H5如何實現(xiàn)圖片壓縮與上傳功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“H5如何實現(xiàn)圖片壓縮與上傳功能”這篇文章吧。
創(chuàng)新互聯(lián)公司服務(wù)項目包括尼元陽網(wǎng)站建設(shè)、尼元陽網(wǎng)站制作、尼元陽網(wǎng)頁制作以及尼元陽網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，尼元陽網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到尼元陽省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
canvas壓縮
使用了github上的一個現(xiàn)成庫：https://github.com/stomita/ios-imagefile-megapixel，不得不膜拜下stomita這位大神。大體的思路是將圖片抽樣顯示在canvas上，然后用通過canvas.toDataURL方法得到base64字符串來實現(xiàn)壓縮。比如在input元素觸發(fā)change事件之后，讀取里面的文件進行操作：
重慶分公司
重慶分公司
var fileInput = document.getElementById('fileInput');
fileInput.onchange = function() {
var file = fileInput.files[0];
// 創(chuàng)建一個壓縮對象，該構(gòu)造函數(shù)接收file或者blob。
var mpImg = new MegaPixImage(file);
// render方法的maxWith，maxHeight,以及quality都決定了壓縮圖片的質(zhì)量
var resImg = document.getElementById('resultImage');
mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 });
};
壓縮完成會得到類似這樣的圖片：
data:image/jpeg 這樣的格式已經(jīng)應(yīng)用的很多了，很多樣式里面的背景圖片直接就是這樣。
需要說明的是有兩點，這里的resImg是一個預(yù)覽圖片，是已經(jīng)存在于文檔中的，如果你不需要預(yù)覽，而只是創(chuàng)建一個img用來壓縮(document.createElement("img"))，這會少一個tagName屬性。你可以修改源碼或者自己加上這個屬性。源碼中會根據(jù)tagName進行判斷，不存在的話會報錯：
MegaPixImage.prototype.render = function (target, options, callback) {
//....
target.tagName = target.tagName || "IMG"; //加上這一句
var tagName = target.tagName.toLowerCase();
if (tagName === 'img') {
target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
} else if (tagName === 'canvas') {
renderImageToCanvas(this.srcImage, target, opt, doSquash);
}
if (typeof this.onrender === 'function') {
this.onrender(target);
}
if (callback) {
callback();
}
if (this.blob) {
this.blob = null;
URL.revokeObjectURL(this.srcImage.src);
}
};另外這是一個耗時的操作，如果是多張圖片進行壓縮，不能直接調(diào)用，需要稍微變換一下，不然會導(dǎo)致前面的圖片沒有壓縮完成就進入到了后面的圖片。
fileSelected: function () {
var files = $("#fileImage")[0].files;
var count = files.length;
console.log("共有" + count + "個文件");
for (var i = 0; i < count; i++) {var item = files[i];
console.log("原圖片大小", item.size);
if (item.size > 1024 * 1024 * 2) {
console.log("圖片大于2M，開始進行壓縮...");
(function(img) {
var mpImg = new MegaPixImage(img);
var resImg = document.createElement("img");
resImg.file = img;
mpImg.render(resImg, { maxWidth: 500, maxHeight: 500, quality: 1 }, function() {
//do some thing
});
})(item);
}
core.previewImage(item);
}
},上傳處理
1.直接post base64字符串
uploadBase64str: function (base64Str) {
var formdata = new FormData();
formdata.append("base64str", base64Str);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
var percentComplete = Math.round(e.loaded * 100 / e.total);
para.onProgress(percentComplete.toString() + '%');
});
xhr.addEventListener("load", function (e) {
para.uploadComplete(xhr.responseText);
});
xhr.addEventListener("error", function (e) {
para.uploadError(e);
});
xhr.open("post", para.base64strUrl, true);
xhr.send(formdata);
},比如這里base64strUrl是/home/MUploadImgBase64Str，MVC控制器方法如下：
[HttpPost]
public ActionResult MUploadImgBase64Str(string base64str)
{
try
{
var imgData = base64str.Split(',')[1];
//過濾特殊字符即可
string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
if (dummyData.Length % 4 > 0)
{
dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
}
byte[] byteArray = Convert.FromBase64String(dummyData);
using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
{
var img = System.Drawing.Image.FromStream(ms);
var path = "~/Content/UploadFiles/mobile/";
var uploadpath = Server.MapPath(path);
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
var saveName = uploadpath + “stoneniqiu” + ".jpg";
img.Save(saveName);
return Json(saveName);
}
}
catch (Exception e)
{
return Json(e.Message);
}
}幾M的圖片能壓縮到幾十k或者幾百k，當然，如果寬度、高度和質(zhì)量設(shè)置的太小，圖片就會很失真了。這個字符串怎么獲取呢？有兩個方法，一個是直接讀取src：
var base641 = resImg.src;
一個是用canvas轉(zhuǎn)換：
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/jpeg");
return dataURL;
// return dataURL.replace("data:image/png;base64,", "");
}
var base64 = getBase64Image(resImg);同一張圖片，這兩者獲取到的字符串大小不一樣，但圖片質(zhì)量我是分辨不出什么差別。
比如一個2M的圖片，通過getBase64Image方法讀到的字符串大小才64k，而src直接讀取到的卻是270k，各自生成的圖片更小。一下分別是原圖(2.2M)，base64(48k),src(202k)對應(yīng)的圖片。
getBase64Image通過canvas的toDataURL 獲取到更小的base64字符串。
2.也可以在前端轉(zhuǎn)換blob對象，再post到后端
function dataURItoBlob(dataUrl) {
var byteString = atob(dataUrl.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}3.不壓縮的就直接裝到formdata中，send到后臺。
uploadFile: function (file) {
console.log("開始上傳");
var formdata = new FormData();
formdata.append(para.filebase, file);//這個名字要和mvc后臺配合
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
var percentComplete = Math.round(e.loaded * 100 / e.total);
para.onProgress(percentComplete.toString() + '%');
});
xhr.addEventListener("load", function (e) {
para.uploadComplete(xhr.responseText);
});
xhr.addEventListener("error", function (e) {
para.uploadError(e);
});
xhr.open("post", para.url, true);
xhr.send(formdata);
},以上是“H5如何實現(xiàn)圖片壓縮與上傳功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
