摘要:移動端預覽壓縮上傳圖片推薦一個使用成熟的解決方案文章已同步我的筆記,歡迎大家加,加后人生更加美好原理介紹移動端圖片上傳,通過生成圖片資源進行預覽,通過進行圖片的壓縮,將圖片轉換成對象上傳。
移動端預覽壓縮上傳圖片
推薦一個使用成熟的解決方案:https://github.com/think2011/...
文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生更加美好……原理介紹
移動端圖片上傳,通過FileReader生成base64圖片資源進行預覽,通過canvas進行圖片的壓縮,將圖片url轉換成Blob對象上傳。
實現方案初始頁面布局
圖片上傳
使用FileReader進行圖片預覽
/** * [previewImg 預覽圖片] * @param {[type]} input [文件上傳input] * @param {[type]} obj [description] * @return {[type]} [description] */ function previewImg(input,imgObj) { var maxsize = 300 * 1024;//超過300k進行壓縮 //是否支持 if (typeof FileReader === "undefined") { alert("抱歉,你的瀏覽器不支持 FileReader,請使用現代瀏覽器操作!"); input.setAttribute("disabled","disabled"); } if(input.files && input.files[0]){ var file = input.files[0], reader = new FileReader(); if(!/image/w+/.test(file.type)) { alert("不是有效的圖片文件!"); return; } reader.onload = function(e){ var result = this.result;//獲取到base64的圖片 //大于300k圖片進行壓縮 if(result.length >= maxsize){ var img = new Image(); img.src = result; img.onload = function(){ compressSrc = compress(img,0.8,100); $(imgObj).setAttribute("src",compressSrc); //ajax dataURLtoBlob(compressSrc); } }else{ $(imgObj).setAttribute("src",result); //ajax dataURLtoBlob(result); } } } }
使用canvas圖片壓縮,不過在ios中圖片大于2000000像素就無法使用canvas壓縮,就需要瓦片繪制。
/** * [compress 壓縮圖片] * @param {[dom]} sourceImg [圖片dom] * @param {[int]0-1} scale [縮小的尺寸比例] * @param {[int]0-100} quality [清晰質量] * @return {[object]} [圖片源] */ function compress(sourceImg,scale,quality){ var area = sourceImg.width * sourceImg.height,//源圖片的總大小 height = sourceImg.height * scale, width = sourceImg.width * scale, compressCvs = document.createElement("canvas");//壓縮的圖片畫布 //壓縮的圖片配置寬高 compressCvs.width = width; compressCvs.height = height; var compressCtx = compressCvs.getContext("2d"); //解決ios 圖片大于2000000像素無法用drawImage的bug if(area > 2000000 && navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)){ //瓦片繪制 var smallCvs = document.createElement("canvas"), smallCtx = smallCvs.getContext("2d"), count = Math.ceil(area / 1000000),//分割的數量 cvsWidth = width / count,//每個小canvas的寬度 picWidth = sourceImg.width / count;//分割成小圖片的寬度 smallCvs.height = compressCvs.height; smallCvs.width = width / count; //拼湊成大的canvas for(var i = 0;i < count;i ++){ smallCtx.drawImage(sourceImg,i*picWidth,0,picWidth,sourceImg.height,0,0,cvsWidth,height); compressCtx.drawImage(smallCvs,i*cvsWidth,0,cvsWidth,height); } }else{ compressCtx.drawImage(sourceImg,0,0,sourceImg.width,sourceImg.height,0,0,width,height); } //將canvas轉換成base64 return compressCvs.toDataURL("image/jpeg",quality/100); } function $(id){ return document.getElementById(id); }
將圖片url轉換為blob對象
/** * [dataURLtoBlob 將base64轉換為blob對象] * @param {[type]} dataurl [圖片源base64] * @return {[object]} [圖片源blob對象] */ function dataURLtoBlob(dataurl) { var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); }使用說明
這個只是一個移動端預覽壓縮上傳圖片實現的demo,會有一些兼容性和bug問題,大家可以自己修改和擴展
結束,撒花~~~
文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生更加美好……
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91622.html
摘要:上傳的文件經過就可以實現預覽圖片了,這方面不清楚的可以查看進階系列文件上傳下載旋轉旋轉需要用到的方法。 前言 在手機上通過網頁 input 標簽拍照上傳圖片,有一些手機會出現圖片旋轉了90度d的問題,包括 iPhone 和個別三星手機。這些手機豎著拍的時候才會出現這種問題,橫拍出來的照片就正常顯示。因此,可以通過獲取手機拍照角度來對照片進行旋轉,從而解決這個問題。 Orientatio...
摘要:本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內,可以選擇文件,移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello,大家好,游戲開始了,歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說,先上圖。showImg(https://segmentfault.com/img...
摘要:本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內,可以選擇文件,移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello,大家好,游戲開始了,歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說,先上圖。showImg(https://segmentfault.com/img...
摘要:本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內,可以選擇文件,移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello,大家好,游戲開始了,歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說,先上圖。showImg(https://segmentfault.com/img...
閱讀 2942·2023-04-26 01:32
閱讀 1541·2021-09-13 10:37
閱讀 2278·2019-08-30 15:56
閱讀 1670·2019-08-30 14:00
閱讀 3043·2019-08-30 12:44
閱讀 1961·2019-08-26 12:20
閱讀 1058·2019-08-23 16:29
閱讀 3228·2019-08-23 14:44