添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > HTML5+CSS3 >

Canvas與Image相互轉換示例代碼

時間:2015-08-05      來源:互聯網     

本文向大家展示怎樣轉換Image為canvas,以及canvas如何提取出一個Image,示例代碼如下,有此需求的朋友可以參考下,希望對大家有所幫助!
 

JS Canvas與Image互相轉換

原文演示:JavaScript Canvas Image Conversion Demo

 

轉換 Image 為 Canvas

要把圖片轉換為Canvas(畫板,畫布),可以使用canvas元素 context 的drawImage方法:


// 把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;
} 

額!圖像image和canvas的互相轉換比你想象的還要容易,以后我將向你演示不同的圖像處理技術,相信在未來你肯定能用這些技術賺到大錢。

相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
中国竞彩网上怎么投注