Canvas與Image怎么互相轉(zhuǎn)換

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

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

復(fù)制代碼

代碼如下:

// 把image 轉(zhuǎn)換為 canvas對象

function convertImageToCanvas(image) {

// 創(chuàng)建canvas DOM元素，并設(shè)置其寬高和圖片一樣

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

canvas.width = image.width;

canvas.height = image.height;

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

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

return canvas;

}

轉(zhuǎn)換 Canvas 為 Image

假設(shè)圖像已經(jīng)在canvas上處理好，那么可以使用以下方法，把canvas轉(zhuǎn)變?yōu)閳D片Image對象。

復(fù)制代碼

代碼如下:

// 從 canvas 提取圖片 image

function convertCanvasToImage(canvas) {

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

var image = new Image();

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

// 指定格式 PNG

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

return image;

}

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

向AI問一下細節(jié)

猜你喜歡