pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5 Canvas像素處理常用接口

本文通過(guò)簡(jiǎn)單的代碼實(shí)例,以及略猥瑣的圖片demo,展示了canvas在圖像像素?cái)?shù)據(jù)操作方面的常用接口。,HTML5中國(guó),中國(guó)最大的HTML5中文門(mén)戶。

        內(nèi)容概要:本文通過(guò)簡(jiǎn)單的代碼實(shí)例,以及略猥瑣的圖片demo,展示了canvas在圖像像素?cái)?shù)據(jù)操作方面的常用接口。

一、canvas圖片填充; 2、設(shè)置/獲取canvas圖片數(shù)據(jù); 3、創(chuàng)建canvas圖片數(shù)據(jù);4、關(guān)于imageData.data的一點(diǎn)補(bǔ)充; 5、寫(xiě)在后面

 

一、canvas圖片填充

復(fù)制代碼
/**
 * @description
 * @param {Number} x 圖像起始繪制點(diǎn)距離canvas最左側(cè)的距離
 * @param {Number} y 圖像起始繪制點(diǎn)距離canvas最頂部的距離
 * @param {Number} width 最終圖像在canvas上繪制出來(lái)的寬度
 * @param {Number} height 最終圖像在canvas上繪制出來(lái)的高度
*/
context.drawImage(image, x, y, width, height)
復(fù)制代碼

demo_01如下

<canvas id="draw_image_canvas" style="background:#ccc;"></canvas>
復(fù)制代碼
function $(id) { return document.getElementById(id); }
function getImage(url, callback){
    var img = document.createElement('img');
    img.onload = function(){
        callback && callback(this);
    };
    img.src = url;
    document.body.appendChild(img);
}

function drawImage(){
    var url = 'xiangjishi.png';
    var canvas = $('draw_image_canvas');
    var context = canvas.getContext('2d');
    getImage(url, function(img){
        canvas.width = img.width;
        canvas.height = img.height;

        var offsetX = 20;
        var offsetY = 20;
        var drawWidth = img.width/4;
        var drawHeight = img.height/4;

        context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
    });
}
drawImage();
復(fù)制代碼

demo說(shuō)明:加載xiangjishi.png,加載完成后,從相對(duì)于畫(huà)布左上角坐標(biāo)(0, 0)處開(kāi)始,將xiangjishi.png繪制在畫(huà)布上,效果如下:

看到這里,可能對(duì)于 context.drawImage(image, x, y, width, height) 里四個(gè)參數(shù)的含義理解還不是特別清楚,可以簡(jiǎn)單把幾個(gè)參數(shù)修改下看看效果:

var offsetX = 20;
var offsetY = 20;
var drawWidth = img.width/2;
var drawHeight = img.height/2;

context.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);

修改后的demo效果如下,結(jié)合上面API的說(shuō)明,應(yīng)該不難理解四個(gè)參數(shù)所代表的含義 

context.drawImage(image, x, y, width, height)

 

二、獲取/設(shè)置canvas圖片數(shù)據(jù)

復(fù)制代碼
/**
 * @description 獲取canvas特定區(qū)域的像素點(diǎn)信息
 * @param {Number} x 獲取信息的起始點(diǎn)距離canvas最左側(cè)的距離
 * @param {Number} y 獲取信息的起始距離canvas最頂部的距離
 * @param {Number} width 獲取的寬度
 * @param {Number} height 最終的高度
*/
context.getImageData(x, y, width, height)
復(fù)制代碼

該方法返回一個(gè)ImageData對(duì)象,該對(duì)象主要有三個(gè)屬性:

  • imageData.width:每行有多少個(gè)元素
  • imageData.height:每列有多少個(gè)元素
  • imageData.data:一維數(shù)組,存儲(chǔ)了從canvas中獲取的每個(gè)像素的RGBA值。該數(shù)組為每個(gè)像素點(diǎn)保存了四個(gè)值——紅、綠、藍(lán)和alpha透明度。每個(gè)值都在0~255之間。因此,canvas上的每個(gè)像素在這個(gè)數(shù)組中就變成了四個(gè)整數(shù)值。數(shù)組的填充順序從左到右,從上到下。
復(fù)制代碼
/**
 * @description 用特定的imageData設(shè)置canvas特定區(qū)域的像素信息
 * @param {Number} x 從canvas的x點(diǎn)處開(kāi)始設(shè)置
 * @param {Number} y 從canvas的y點(diǎn)處開(kāi)始設(shè)置
 * @param {Number} width 獲取的寬度
 * @param {Number} height 最終的高度
*/
context.putImageData(imageData, x, y)
復(fù)制代碼

下面結(jié)合demo_2來(lái)說(shuō)明getImageData()的用法以及各自參數(shù)的對(duì)應(yīng)的含義

DEMO_02 

源代碼如下,在demo_01的基礎(chǔ)上稍事修改:

<canvas id="draw_image_canvas" style="background:#ccc;"></canvas>
<canvas id="get_image_canvas" style="background:#ccc;"></canvas>
復(fù)制代碼
function getAndSetImageData(){
    var url = 'xiangjishi.png';
    getImage(url, function(img){
        $('draw_image_canvas').width = img.width;
        $('draw_image_canvas').height = img.height;
        var context = $('draw_image_canvas').getContext('2d');        
        context.drawImage(img, 0, 0, img.width, img.height);

        //獲取像素信息
        var offsetX = img.width/2;
        var offsetY = img.height/2;
        var getImgWidth = img.width/2;
        var getImgHeight = img.height/2;
        var imgageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight);        

        //設(shè)置像素信息,此處先忽略具體代碼,知道是把上面獲取的像素信息原封不動(dòng)放到另一canvas里即可
        var startX = 0;
        var startY = 0;
        var ct = $('get_image_canvas').getContext('2d');
        $('get_image_canvas').width = img.width;
        $('get_image_canvas').height = img.height;
        ct.putImageData(imgageData, startX, startY);

    });
}
復(fù)制代碼

demo_2 展示效果如下:


到這里,基本能夠清除getImageData方法四個(gè)參數(shù)對(duì)應(yīng)的含義。putImageData參數(shù)的理解也不難,demo_2的代碼略加修改后看下效果就知道了

復(fù)制代碼
function getAndSetImageData(){
    var url = 'xiangjishi.png';
    getImage(url, function(img){
        $('draw_image_canvas').width = img.width;
        $('draw_image_canvas').height = img.height;
        var context = $('draw_image_canvas').getContext('2d');        
        context.drawImage(img, 0, 0, img.width, img.height);

        //獲取像素信息
        var offsetX = img.width/2;
        var offsetY = img.height/2;
        var getImgWidth = img.width/2;
        var getImgHeight = img.height/2;
        var imgageData = context.getImageData(offsetX, offsetY, getImgWidth, getImgHeight);        

        //設(shè)置像素信息
        var startX = img.width/2;  //這里原先為0
        var startY = img.width/2;  //這里原先為0
        var ct = $('get_image_canvas').getContext('2d');
        $('get_image_canvas').width = img.width;
        $('get_image_canvas').height = img.height;
        ct.putImageData(imgageData, startX, startY);

    });
}
復(fù)制代碼

demo_3展示效果如下,可是試著把幾個(gè)參數(shù)自己改一下試下,可能會(huì)有更好的理解:

三、創(chuàng)建canvas圖片數(shù)據(jù)


/**
 * @description 預(yù)先創(chuàng)建一組圖像數(shù)據(jù),并綁定在canvas對(duì)象上
 * @param {Number} width 創(chuàng)建的寬度
 * @param {Number} height 創(chuàng)建的高度
*/
context.createImageData(width, height)

接口比較簡(jiǎn)單,創(chuàng)建的數(shù)據(jù)可以像用getImageData獲取到的數(shù)據(jù)那樣進(jìn)行同樣的處理,這里僅需要注意的是:這組圖像數(shù)據(jù)不一定會(huì)反映canvas的當(dāng)前狀態(tài)。

 

四、關(guān)于imageData的一點(diǎn)補(bǔ)充


再《HTML5高級(jí)程序設(shè)計(jì)》以及很多文章里面,都把imageData.data當(dāng)作一個(gè)數(shù)組來(lái)講,但其實(shí):

imageData.data返回的并不是真正的數(shù)組,而是一個(gè)類數(shù)組的對(duì)象,可以將imageData.data的類型打印出來(lái)

console.log(Object.prototype.toString.call(imgageData.data));  //輸出:[object Uint8ClampedArray] 

然后再將imageData.data的具體內(nèi)容打印出來(lái),內(nèi)容較長(zhǎng),僅截取最前面以及最后面的一段,可以看出:

imageData.data其實(shí)是一個(gè)對(duì)象,其索引從0開(kāi)始,一直到width*height*4-1。


為什么不直接用數(shù)組存放?因?yàn)閿?shù)組的長(zhǎng)度有個(gè)上限,假設(shè)為limitLength,超過(guò)limitLength的元素,均以鍵值的方式存儲(chǔ),如 data[limitLength + 100] 其實(shí)是 data['limitLength + 100 + ''](limitLength具體值記不得了,有興趣的童鞋可以查下)

至于最后面的byteLength、byteOffset、buffer屬性,未深究,此處不展開(kāi)以防誤導(dǎo)讀者。

 

五、寫(xiě)在后面

水平有限,如有疏誤,敬請(qǐng)指出

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了基于HTML5 Canvas的3D動(dòng)態(tài)Chart圖表的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本篇文章主要介紹了HTML5 Canvas 實(shí)現(xiàn)圓形進(jìn)度條并顯示數(shù)字百分比效果示例,具有一定的參考價(jià)值,有興趣的可以了解一下
這篇文章主要介紹了HTML5 Canvas 旋轉(zhuǎn)風(fēng)車?yán)L制,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
這篇文章主要介紹了html5 canvas合成海報(bào)所遇問(wèn)題及解決方案總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
由于實(shí)際運(yùn)行環(huán)境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會(huì)達(dá)到,所以這部分不是開(kāi)發(fā)者能夠決定的,開(kāi)發(fā)者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個(gè)自定義的視頻播放器,需要用到HTML5提供的video標(biāo)簽、以及HTML5提供的對(duì)JavascriptAPI的擴(kuò)展。,HTML5中國(guó),中國(guó)最大的HTML5中文門(mén)戶。
主站蜘蛛池模板: PO膜_灌浆膜及地膜供应厂家 - 青州市鲁谊塑料厂 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 | 贝朗斯动力商城(BRCPOWER.COM) - 买叉车蓄电池上贝朗斯商城,价格更超值,品质有保障! | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 混合生育酚_醋酸生育酚粉_琥珀酸生育酚-山东新元素生物科技 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 | 大学食堂装修设计_公司餐厅效果图_工厂食堂改造_迈普装饰 | 气力输送_输送机械_自动化配料系统_负压吸送_制造主力军江苏高达智能装备有限公司! | 丹佛斯变频器-Danfoss战略代理经销商-上海津信变频器有限公司 | 电磁铁_小型推拉电磁铁_电磁阀厂家-深圳市宗泰电机有限公司 | 除甲醛公司-甲醛检测-广西雅居环境科技有限公司 | 内六角扳手「厂家」-温州市威豪五金工具有限公司 | 切铝机-数控切割机-型材切割机-铝型材切割机-【昆山邓氏精密机械有限公司】 | 下水道疏通_管道疏通_马桶疏通_附近疏通电话- 立刻通 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 | 焊管生产线_焊管机组_轧辊模具_焊管设备_焊管设备厂家_石家庄翔昱机械 | 耐磨陶瓷管道_除渣器厂家-淄博浩瀚陶瓷科技有限公司 | 单电机制砂机,BHS制砂机,制沙机设备,制砂机价格-正升制砂机厂家 单级/双级旋片式真空泵厂家,2xz旋片真空泵-浙江台州求精真空泵有限公司 | 山东柳店新能源科技有限公司| 美国HASKEL增压泵-伊莱科elettrotec流量开关-上海方未机械设备有限公司 | 烟台金蝶财务软件,烟台网站建设,烟台网络推广 | 带锯机|木工带锯机圆木推台锯|跑车带锯机|河北茂业机械制造有限公司| | 退火炉,燃气退火炉,燃气热处理炉生产厂家-丹阳市丰泰工业炉有限公司 | 济宁工业提升门|济宁电动防火门|济宁快速堆积门-济宁市统一电动门有限公司 | 液氨泵,液化气泵-淄博「亚泰」燃气设备制造有限公司 | 百度关键词优化_网站优化_SEO价格 - 云无限好排名 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 深圳湾1号房价_深圳湾1号二手房源 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | ZHZ8耐压测试仪-上海胜绪电气有限公司 | 洁净化验室净化工程_成都实验室装修设计施工_四川华锐净化公司 | 双效节能浓缩器-热回流提取浓缩机组-温州市利宏机械 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 氧化锆纤维_1800度高温退火炉_1800度高温烧结炉-南京理工宇龙新材料股份有限公司 | 数显恒温培养摇床-卧式/台式恒温培养摇床|朗越仪器 | 铸铝门厂家,别墅大门庭院大门,别墅铸铝门铜门[十大品牌厂家]军强门业 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 红立方品牌应急包/急救包加盟,小成本好项目代理_应急/消防/户外用品加盟_应急好项目加盟_新奇特项目招商 - 中红方宁(北京) 供应链有限公司 |