脚本宝典收集整理的这篇文章主要介绍了js實例教程-圖片轉換js：img對象，file對象，base64，canvas對象，以及圖片壓縮方式講解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。
首先想一想我們有哪些需求？大多時候我們需要將一個File對象壓縮之後再變為File對象傳入到遠程圖片服務器；有時候我們也需要將一個base64字符串壓縮之後再變為base64字符串傳入到遠程數據庫；有時候后它還有可能是一塊canvas畫布，或者是一個Image對象，或者直接就是一個圖片的url地址，我們需要將它們壓縮上傳到遠程；
二、解決辦法
七個方法，基本覆蓋了JS中大部分文件類型的轉換與壓縮，其中：
1、 urltoImage(url,fn) 會通過一個url加載所需要的圖片對象，其中 url 參數傳入圖片的 url , fn 為回調方法,包含一個Image對象的參數，代碼如下：
function urltoImage (url,fn){ VAR img = new Image(); img.src = url; img.onload = function(){ fn(img); } }; 2、 imagetoCanvas(image) 會將一個 Image 對象轉變為一個 Canvas 類型對象，其中 image 參數傳入一個Image對象，代碼如下：
function imagetoCanvas(image){ var CVS = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; }; function imagetoCanvas(image){ var cvs = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; }; 3、 canvasResizetoFile(canvas,qualITy,fn) 會將一個 Canvas 對象壓縮轉變為一個 Blob 類型對象；其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量; fn 為回調方法，包含一個 Blob 對象的參數;代碼如下：
function canvasResizetoFile(canvas,quality,fn){ canvas.toBlob(function(blob) { fn(blob); },'image/jPEg',quality); }; 這裡的 Blob 對象表示不可變的類似文件對象的原始數據。 Blob 表示不一定是 JavaScript 原生形式的數據。 File 接口基於 Blob ，繼承了 Blob 的功能並將其擴展使其支持用戶系統上的文件。我們可以把它當做File類型對待，其他更具體的用法可以參考MDN文檔
4、 canvasResizetoDataURL(canvas,quality) 會將一個 Canvas 對象壓縮轉變為一個 dataURL 字符串,其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量;代碼如下：
methods.canvasResizetoDataURL = function(canvas,quality){ return canvas.toDataURL('image/jpeg',quality); }; 其中的 toDataURL API可以參考MDN文檔
5、 filetoDataURL(file,fn) 會將 File （ Blob ）類型文件轉變為 dataURL 字符串,其中 file 參數傳入一個 File （ Blob ）類型文件; fn 為回調方法，包含一個 dataURL 字符串的參數;代碼如下：
function filetoDataURL(file,fn){ var reader = new FileReader(); reader.onloadend = function(e){ fn(e.target.result); }; reader.readAsDataURL(file); }; 6、 dataURLtoImage(dataurl,fn) 會將一串 dataURL 字符串轉變為 Image 類型文件,其中 dataurl 參數傳入一個 dataURL 字符串, fn 為回調方法，包含一個 Image 類型文件的參數，代碼如下：
function dataURLtoImage(dataurl,fn){ var img = new Image(); img.onload = function() { fn(img); }; img.src = dataurl; }; 7、 dataURLtoFile(dataurl) 會將一串 dataURL 字符串轉變為 Blob 類型對象，其中 dataurl 參數傳入一個 dataURL 字符串,代碼如下：
function dataURLtoFile(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}); }; 三、進一步封裝
對於常用的將一個 File 對象壓縮之後再變為 File 對象,我們可以將上面的方法再封裝一下，參考如下代碼：
function fileResizetoFile(file,quality,fn){ filetoDataURL (file,function(dataurl){ dataURLtoImage(dataurl,function(image){ canvasResizetoFile(imagetoCanvas(image),quality,fn); }) }) } 其中， file 參數傳入一個 File （ Blob ）類型文件； quality 參數傳入一個 0-1 的 number 類型，表示圖片壓縮質量； fn 為回調方法，包含一個 Blob 類型文件的參數。
它使用起來就像下面這樣：
var file = document.getElementById('demo').files[0]; fileResizetoFile(file,0.6,function(res){ console.LOG(res); //拿到res，做出你要上傳的操作； }) ps：下面看下JS等比壓縮圖片的辦法
function PRoDownImage(path,imgObj) { // 等比壓縮圖片工具 //var promaxHeight = 185; var proMaxHeight=300; var proMaxWidth = 175; var size = new Object(); var image = new Image(); image.src = path; image.attachEvent("onreadystatechange", function() { // 當加載狀態改變時執行此方法,因為img的加載有延遲 if (image.readyState == "complete") { // 當加載狀態為完全結束時進入 if (image.width > 0 && image.height > 0) { var ww = proMaxWidth / image.width; var hh = proMaxHeight / image.height; var rate = (ww < hh) ww: hh; if (rate <= 1) { alert("imgage width*rate is:" + image.width * rate); size.width = image.width * rate; size.height = image.height * rate; } else { alert("imgage width is:" + image.width); size.width = image.width; size.height = image.height; } } } imgObj.attr("width",size.width); imgObj.attr("height",size.height); }); }
首先想一想我們有哪些需求？大多時候我們需要將一個File對象壓縮之後再變為File對象傳入到遠程圖片服務器；有時候我們也需要將一個base64字符串壓縮之後再變為base64字符串傳入到遠程數據庫；有時候后它還有可能是一塊canvas畫布，或者是一個Image對象，或者直接就是一個圖片的url地址，我們需要將它們壓縮上傳到遠程；
二、解決辦法
七個方法，基本覆蓋了JS中大部分文件類型的轉換與壓縮，其中：
1、 urltoImage(url,fn) 會通過一個url加載所需要的圖片對象，其中 url 參數傳入圖片的 url , fn 為回調方法,包含一個Image對象的參數，代碼如下：
function urltoImage (url,fn){ var img = new Image(); img.src = url; img.onload = function(){ fn(img); } }; 2、 imagetoCanvas(image) 會將一個 Image 對象轉變為一個 Canvas 類型對象，其中 image 參數傳入一個Image對象，代碼如下：
function imagetoCanvas(image){ var cvs = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; }; function imagetoCanvas(image){ var cvs = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; }; 3、 canvasResizetoFile(canvas,quality,fn) 會將一個 Canvas 對象壓縮轉變為一個 Blob 類型對象；其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量; fn 為回調方法，包含一個 Blob 對象的參數;代碼如下：
function canvasResizetoFile(canvas,quality,fn){ canvas.toBlob(function(blob) { fn(blob); },'image/jpeg',quality); }; 這裡的 Blob 對象表示不可變的類似文件對象的原始數據。 Blob 表示不一定是 JavaScript 原生形式的數據。 File 接口基於 Blob ，繼承了 Blob 的功能並將其擴展使其支持用戶系統上的文件。我們可以把它當做File類型對待，其他更具體的用法可以參考MDN文檔
4、 canvasResizetoDataURL(canvas,quality) 會將一個 Canvas 對象壓縮轉變為一個 dataURL 字符串,其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量;代碼如下：
methods.canvasResizetoDataURL = function(canvas,quality){ return canvas.toDataURL('image/jpeg',quality); }; 其中的 toDataURL API可以參考MDN文檔
5、 filetoDataURL(file,fn) 會將 File （ Blob ）類型文件轉變為 dataURL 字符串,其中 file 參數傳入一個 File （ Blob ）類型文件; fn 為回調方法，包含一個 dataURL 字符串的參數;代碼如下：
function filetoDataURL(file,fn){ var reader = new FileReader(); reader.onloadend = function(e){ fn(e.target.result); }; reader.readAsDataURL(file); }; 6、 dataURLtoImage(dataurl,fn) 會將一串 dataURL 字符串轉變為 Image 類型文件,其中 dataurl 參數傳入一個 dataURL 字符串, fn 為回調方法，包含一個 Image 類型文件的參數，代碼如下：
function dataURLtoImage(dataurl,fn){ var img = new Image(); img.onload = function() { fn(img); }; img.src = dataurl; }; 7、 dataURLtoFile(dataurl) 會將一串 dataURL 字符串轉變為 Blob 類型對象，其中 dataurl 參數傳入一個 dataURL 字符串,代碼如下：
function dataURLtoFile(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}); }; 三、進一步封裝
對於常用的將一個 File 對象壓縮之後再變為 File 對象,我們可以將上面的方法再封裝一下，參考如下代碼：
function fileResizetoFile(file,quality,fn){ filetoDataURL (file,function(dataurl){ dataURLtoImage(dataurl,function(image){ canvasResizetoFile(imagetoCanvas(image),quality,fn); }) }) } 其中， file 參數傳入一個 File （ Blob ）類型文件； quality 參數傳入一個 0-1 的 number 類型，表示圖片壓縮質量； fn 為回調方法，包含一個 Blob 類型文件的參數。
它使用起來就像下面這樣：
var file = document.getElementById('demo').files[0]; fileResizetoFile(file,0.6,function(res){ console.log(res); //拿到res，做出你要上傳的操作； }) ps：下面看下JS等比壓縮圖片的辦法
function proDownImage(path,imgObj) { // 等比壓縮圖片工具 //var proMaxHeight = 185; var proMaxHeight=300; var proMaxWidth = 175; var size = new Object(); var image = new Image(); image.src = path; image.attachEvent("onreadystatechange", function() { // 當加載狀態改變時執行此方法,因為img的加載有延遲 if (image.readyState == "complete") { // 當加載狀態為完全結束時進入 if (image.width > 0 && image.height > 0) { var ww = proMaxWidth / image.width; var hh = proMaxHeight / image.height; var rate = (ww < hh) ww: hh; if (rate <= 1) { alert("imgage width*rate is:" + image.width * rate); size.width = image.width * rate; size.height = image.height * rate; } else { alert("imgage width is:" + image.width); size.width = image.width; size.height = image.height; } } } imgObj.attr("width",size.width); imgObj.attr("height",size.height); }); } 覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ @L_777_3@，巧奪天工，精雕玉琢。小寶典獻醜了！
以上是脚本宝典为你收集整理的js實例教程-圖片轉換js：img對象，file對象，base64，canvas對象，以及圖片壓縮方式講解全部内容，希望文章能够帮你解决js實例教程-圖片轉換js：img對象，file對象，base64，canvas對象，以及圖片壓縮方式講解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。