canvas toBlob()

admin發表於2020-03-29
Canvas

toBlob() 方法可以將 canvas 影像轉換為對應的 Blob 物件。

關於Blob 物件相關知識可以參閱Blob與File教程板塊。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
HTMLCanvasElement.toBlob(callback, mimeType, encoderOptions)

引數解析：

（1）.callback：回撥函式，轉化成功後呼叫此函式，支援一個引數，表示轉換後的Blob物件。

（2）.mimeType：可選，規定將要轉換影像 mimeType 型別，預設 image/png，也可以是image/jpeg等。

（3）.encoderOptions：可選，規定將要轉換影像的質量，值介於0-1之間，預設值為0.92。

toBlob() 方法對 PNG 圖片是無損轉換，所以規定其他 mimeType 型別，此引數才會生效。

瀏覽器相容：

（1）.IE10+ 瀏覽器支援此方法。

（2）.edge 瀏覽器支援此方法。

（2）.谷歌瀏覽器支援此方法。

（3）.火狐瀏覽器支援此方法。

（4）.Opera 瀏覽器支援此方法。

（5）.Safari 瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:2px dotted #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload= () => {
  let cvs=document.getElementById("canvas");
  let oshow=document.getElementById("show");

  let ctx=cvs.getContext("2d");
  ctx.fillStyle="#0000ff";
  ctx.rotate(20*Math.PI/180);
  ctx.fillRect(50,20,100,50);

  cvs.toBlob(function(blob) {
    let url = URL.createObjectURL(blob);
    oshow.innerHTML = '<img src="'+ url +'">';
  }, 'image/png');
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <p id="show"></p>
</body>
</html>

上述程式碼演示了 toBlob() 方法的功能，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/29/095651ugtaz7hr1751amhn.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.在畫布上繪製一個藍色的矩形。

（2）.利用 toBlob() 方法將 canvas 圖片轉換為 Blob 物件。

（3）.轉換成功後，執行回撥函式。

（4）.Blob 物件無法直接作為 <img> 的src屬性值，需要通過 URL.createObjectURL() 轉化。

（5）.最後將圖片加入到p元素中，也就是我們看到的下方圖片。

相關文章