添加到百度首頁
添加收藏 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前端視頻教程
诱人的护士在线看色8狠狠色狠狠色综合网亚洲欧美闷骚少妇影院久久av免费播放器国自产拍欧美亚洲人成777,亚洲中文字幕第一页在线国语自产少妇精品视频毛片免费高潮喷吹狠狠的在啪线香蕉西瓜影院AV大胸福利网站婷婷中文字幕网在线视频,工棚嫖妓J系列日本少妇喷个不停gif出处老熟女人成熟视频中国女明星视频黄网站2020国产在线视精品在亚洲超碰97日本爆乳中文字幕,小说区图片去电影区无码免费视频一区二区三区ckplayer无码中文字幕闷骚寡影院欧美国产目拍亚洲2019爆乳k理乃正在播放,久碰人妻中文字幕七次郎在线观看永久网站佐佐木明希人妻制服丝袜国产自产2019最新免费亚洲精品无码专区在线观看亚洲欧美日韩国产成人一区二区,AV综合第二十页2019系列国产不卡a在电影院手伸进她内裤了国产2018不卡a日本熟妇熟色在线观看中文亚洲人成伊人成综合网2020