這篇文章將為大家詳細(xì)講解有關(guān)Canvas與Image怎么實(shí)現(xiàn)互相轉(zhuǎn)換，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，包括網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。創(chuàng)新互聯(lián)公司為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)公司核心團(tuán)隊(duì)10多年專注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。

轉(zhuǎn)換 Image為 Canvas
要把圖片轉(zhuǎn)換為Canvas(畫(huà)板，畫(huà)布),可以使用canvas元素 context 的drawImage方法：

代碼如下:

// 把image 轉(zhuǎn)換為 canvas對(duì)象
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) 表示從此處開(kāi)始繪制，相當(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對(duì)象。

代碼如下:

// 從 canvas 提取圖片 image
function convertCanvasToImage(canvas) {
//新Image對(duì)象，可以理解為DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64編碼的URL，當(dāng)然,瀏覽器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}

關(guān)于Canvas與Image怎么實(shí)現(xiàn)互相轉(zhuǎn)換就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享標(biāo)題：Canvas與Image怎么實(shí)現(xiàn)互相轉(zhuǎn)換-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://weahome.cn/article/djesjs.html