canvas中toDataURL()將圖片轉為dataURL(base64)的方法

本文主要為大家介紹了利用canvas中toDataURL()將圖片轉為dataURL(base64)的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧，希望能幫助大家。

將圖片轉換為base64的好處

將圖片轉換為Base64編碼，可以讓你很方便地在沒有上傳檔案的條件下將圖片插入其它的網頁、編輯器中。 這對於一些小的圖片是極為方便的，因為你不需要再去尋找一個保存圖片的地方。

將圖片轉換成base64編碼的，在web網上一般用於小圖片上，不僅可以減少圖片的請求數量（集合到js、css代碼中），還可以防止因為一些相對路徑等問題導致圖片404錯誤。

引言

假設一個應用程式場景：由於某些特殊原因從服務端請求到圖片路徑，要求透過該路徑取得對應圖片的 base64 dataURL。在這個場景中，我們首先推斷該圖片路徑是可存取的，同時還需要將圖片轉換到 dataURL 的方法。

我們要如何實現它？

dataURL

先大致回顧下正統的 dataURL 的語法，這有助於我們檢驗轉換後的內容是否正確。一個完整的dataURI 應該是這樣的：

data:[<mediatype>][;base64],<data></data></mediatype>

其中mediatype聲明了檔案類型，遵循MIME規則，如「image/png」、「text/plain」；之後是編碼類型，這裡我們只涉及base64 ；緊接著就是文件編碼後的內容了。我們常常在 HTML 裡看到img標籤的src會這樣寫：

src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7"

這個img引用的就是以 base64 編碼的 dataURL 了，只要瀏覽器支持，就可以被解碼成 gif 圖片並渲染出來。

.toDataURL()

FileReader物件也有類似的方法，例如.readAsDataURL() ，然而它只接受file或blob類型，而這兩種類型一般只能透過元素的files屬性獲取，或是用Blob()建構函式手動建立一個新的物件。尷尬的是我們目前只有圖片路徑，受制於瀏覽器的安全策略， 的files屬性是唯讀的，而Blob()建構子只接受檔案內容，兩種方式都無法透過圖片路徑直接取得。上文假設的應用場景迫使我們必須先考慮如何透過路徑取得到圖片內容。 是可以的，並且可以被繪製到中，而正巧擁有.toDataURL()方法。

萬事具備，我們只需要把取得到的圖片放到裡再透過.toDataURL()方法轉換下，就可以得到以 base64 編碼的 dataURL。來看這個方法的語法：

canvas.toDataURL([type, encoderOptions]);

canvas是DOM元素物件；參數type指定圖片類型，如果指定的類型不支援則以預設值image/png取代；encoderOptions可以為image /jpeg或image/webp類型的圖片設定圖片質量，取值0-1，超出則以預設值0.92替代。

要注意的是：在轉換成 dataURL 前必須先確保圖片成功載入到，於是.toDataURL()方法應該寫在的onload非同步事件中。現在就來實作一個功能函數：

 function getBase64(url){
  //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img  alt="canvas中toDataURL()將圖片轉為dataURL(base64)的方法" > 省去了 append()，也就避免了文档冗余和污染
  var Img = new Image(),
   dataURL='';
  Img.src=url;
  Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
   var canvas = document.createElement("canvas"), //创建canvas元素
    width=Img.width, //确保canvas的尺寸和图片一样
    height=Img.height;
   canvas.width=width;
   canvas.height=height;
   canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
   dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
  };
 }

一個可供隨時呼叫的轉換函數完成了，它會在圖片被載入後傳回一整個 dataURL 字串。

完善

onload事件確保了轉換任務在載入後執行，卻又帶來了新問題－dataURL 只有在圖片載入完成後才會返回，我們無法確定圖片什麼時候完成加載。如果後續要對dataURL 做相關處理（例如傳遞到其他伺服器）的話，新增一個回呼是必要的，這能確保後續處理任務在成功得到dataURL 之後執行，我們需要修改getBase64() ：

 function getBase64(url,callback){ //添加一个回调参数
  ...
  Img.onload=function(){
   ...
   canvas.getContext("2d").drawImage(Img,0,0,width,height);
   dataURL=canvas.toDataURL('image/jpeg');
   callback?callback(dataURL):null; //调用回调函数
  };
 }

在執行時加入回呼：

 getBase64('//upload.jianshu.io/users/upload_avatars/555630/fdd1b798e6b0.jpg',(dataURL)=>{
  console.log(dataURL);
 });

就是這樣，如果不考慮相容性的話，或許我們可以用promise 和generator 來實現，再增加一些錯誤處理就更完美了。

相關推薦：

html5 Canvas實作圖片旋轉

#jquery外掛程式canvaspercent.js實作百分比圓餅效果實例分享

Canvas處理圖片的方法

#

以上是canvas中toDataURL()將圖片轉為dataURL(base64)的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！