Canvas與Image怎么互相轉換

發布時間：2022-03-15 15:42:30 來源：億速云閱讀：488 作者：iii 欄目：web開發

今天小編給大家分享一下Canvas與Image怎么互相轉換的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

復制代碼

代碼如下:

// 把image 轉換為 canvas對象

function convertImageToCanvas(image) {

// 創建canvas DOM元素，并設置其寬高和圖片一樣

var canvas = document.createElement("canvas");

canvas.width = image.width;

canvas.height = image.height;

// 坐標(0,0) 表示從此處開始繪制，相當于偏移。

canvas.getContext("2d").drawImage(image, 0, 0);

return canvas;

}

轉換 Canvas 為 Image

假設圖像已經在canvas上處理好，那么可以使用以下方法，把canvas轉變為圖片Image對象。

復制代碼

代碼如下:

// 從 canvas 提取圖片 image

function convertCanvasToImage(canvas) {

//新Image對象，可以理解為DOM

var image = new Image();

// canvas.toDataURL 返回的是一串Base64編碼的URL，當然,瀏覽器自己肯定支持

// 指定格式 PNG

image.src = canvas.toDataURL("image/png");

return image;

}

以上就是“Canvas與Image怎么互相轉換”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本