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)戶。
主站蜘蛛池模板: 上海律师咨询_上海法律在线咨询免费_找对口律师上策法网-策法网 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 中天寰创-内蒙古钢结构厂家|门式刚架|钢结构桁架|钢结构框架|包头钢结构煤棚 | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 探鸣起名网-品牌起名-英文商标起名-公司命名-企业取名包满意 | 海外整合营销-独立站营销-社交媒体运营_广州甲壳虫跨境网络服务 焊管生产线_焊管机组_轧辊模具_焊管设备_焊管设备厂家_石家庄翔昱机械 | 济南品牌设计-济南品牌策划-即合品牌策划设计-山东即合官网 | 留学生辅导网-在线课程论文辅导-留学生挂科申诉机构 | 慈溪麦田广告公司,提供慈溪广告设计。 | 专注氟塑料泵_衬氟泵_磁力泵_卧龙泵阀_化工泵专业品牌 - 梭川泵阀 | 三板富 | 专注于新三板的第一垂直服务平台 | 专业生物有机肥造粒机,粉状有机肥生产线,槽式翻堆机厂家-郑州华之强重工科技有限公司 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 消泡剂_水处理消泡剂_切削液消泡剂_涂料消泡剂_有机硅消泡剂_广州中万新材料生产厂家 | 焊接烟尘净化器__焊烟除尘设备_打磨工作台_喷漆废气治理设备 -催化燃烧设备 _天津路博蓝天环保科技有限公司 | 算命免费_生辰八字_免费在线算命 - 卜算子算命网 | 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 深圳市超时尚职业培训学校,培训:月嫂,育婴,养老,家政;化妆,美容,美发,美甲. | 常州减速机_减速机厂家_常州市减速机厂有限公司 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 软文世界-软文推广-软文营销-新闻稿发布-一站式软文自助发稿平台 | 塑料撕碎机_编织袋撕碎机_废纸撕碎机_生活垃圾撕碎机_废铁破碎机_河南鑫世昌机械制造有限公司 | 杭州代理记账多少钱-注册公司代办-公司注销流程及费用-杭州福道财务管理咨询有限公司 | 东风体检车厂家_公共卫生体检车_医院体检车_移动体检车-锦沅科贸 | 微波萃取合成仪-电热消解器价格-北京安合美诚科学仪器有限公司 | 杭州可当科技有限公司—流量卡_随身WiFi_AI摄像头一站式解决方案 | 衬氟旋塞阀-卡套旋塞阀-中升阀门首页 | 许昌奥仕达自动化设备有限公司 | 电子厂招聘_工厂招聘_普工招聘_小时工招聘信息平台-众立方招工网 | 金现代信息产业股份有限公司--数字化解决方案供应商 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | 珠海白蚁防治_珠海灭鼠_珠海杀虫灭鼠_珠海灭蟑螂_珠海酒店消杀_珠海工厂杀虫灭鼠_立净虫控防治服务有限公司 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 江苏南京多语种翻译-专业翻译公司报价-正规商务翻译机构-南京华彦翻译服务有限公司 | 安徽华耐泵阀有限公司-官方网站| 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 电动葫芦-河北悍象起重机械有限公司| 粘度计NDJ-5S,粘度计NDJ-8S,越平水分测定仪-上海右一仪器有限公司 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 |