<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,canvas {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #000;

 }

 #can {

     background: #FFF /* url('./images/index.jpg') no-repeat center; backgrond-size: cover */;

     display: block; margin: 25px auto; border-radius: 2px; cursor: pointer;

 }

 </style>

 <script type='text/javascript'>

     $( function(){

         var can = $( '#can' ).get( 0 );

         var oCan = can.getContext( '2d' );

         var oImg = new Image();

         oImg.src = './images/index.jpg';

         oImg.onload = function(){

             oCan.drawImage( this , 0 , 0 , this.width , this.height );

             var img = oCan.getImageData( 50 , 50 , 100 , 100 ); /* 参数 x,y,w,h 在这里面获取的是100*100宽高的颜色值:其中计算方法为100px*100px = 10000px 但是在canvas标签中每一个像素中都有rgba四个颜色值所以当我们在下面打印长度的时候显示的是40000个 */

             console.log( img.data.length ); /* 选定区域的数据(颜色值)长度 */

         }

     } );

 </script>

 </head>

 <body>

     <canvas id='can' width='300' height='168'>检测到您的浏览器版本过低请升级您的浏览器版本以获取更好的用户体验...</canvas>

 </body>

 </html>

[ html canvas getImageData Object.data.length ] canvas绘图属性 getImageData Object.data.length 属性讲解的更多相关文章

  1. "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原因及解决办法

    一.问题描述: 在支持html5的浏览器中运行javascript脚本,脚本主要是操作网页上的标签canvas,出错的操作为, getImageData(img,……), chrome 下出错信息为: ...

  2. canvas总结：元素大小与绘图表面大小

    前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: <canvas id="myCanvas" width="300&q ...

  3. canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

    先给大家贴一张图片,因为我不会上传视频(￣□￣||) ,请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 :  <!DOCTYPE html ...

  4. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  5. Canvas学习系列二：Canvas的坐标系统

    上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制:但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么 ...

  6. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  7. [SAP ABAP开发技术总结]数据引用（data references）、对象引用（object references）

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 解决gpg failed to sign the data fatal: failed to write commit object解决方案

    今天有位新同事在comit代码的时候一直报这个错误: gpg failed to sign the data fatal: failed to write commit object. 看到网上说gp ...

  9. git问题：gpg failed to sign the data fatal: failed to write commit object问题

    今天用版本控制工具git提交时一直出现的问题:gpg  failed to sign the data fatal: failed to write commit object, gpg是一个加密软件 ...

  10. Core Data系列文章（一）Core Data基础

    在iOS开发数据库SQLite的使用介绍了iOS中使用SQLite对数据进行持久化存储,实际上是对数据库直接进行操作,而苹果专门有一套API来间接的对数据进行持久化存储,而且主要针对用户创建的对象 - ...

随机推荐

  1. (OSP)外包工单关工单失败

    会计同事反映,在关几个外包(OSP)工单时,系统报错.错误讯息如下.检查错误讯息,发现Number of jobs failed in Delivered Quantity : 2.检查工单数据,均无 ...

  2. VS错误 error LNK1158: 无法运行“cvtres.exe”

    1.删除文件 2.如果删除不掉 右键属性 - 安全 - 高级 - 所有者 - 确定 右键属性 - 安全 - 编辑 - 开通权限

  3. VB6.0手册

    1.Form窗体事件 Private Sub Form_Activate() '焦点在此窗口时触发  MsgBox "窗体的Activate事件"  End Sub    Priv ...

  4. CM: 如何自己build一个官方版本出来，使用官方release中的manifests.xml

    This can be accomplished in one of two ways: 1) Pull the file from your device:cd /your/repo/pathadb ...

  5. storm分组模式

    Shuffle grouping: Tuples被随机分配到每一个bolt’s task,以便于每一个bolt’s task获得相同数量的tuples. Fields grouping: Stream ...

  6. codeforces B. Friends and Presents(二分+容斥)

    题意:从1....v这些数中找到c1个数不能被x整除,c2个数不能被y整除! 并且这c1个数和这c2个数没有相同的!给定c1, c2, x, y, 求最小的v的值! 思路: 二分+容斥,二分找到v的值 ...

  7. jQuery 1.9 Ajax代码带注释

    /* -----------ajax模块开始 -----------*/ var // Document location ajaxLocParts, ajaxLocation, ajax_nonce ...

  8. Nopcommerce主要的技术

    Nopcommerce主要用到的技术及特点: 1.Entity Framework 2.ASP.NET mvc 3.IoC容器+依赖注入(Autofac) 4.使用EF中的EntityTypeConf ...

  9. [Node.js] Promise，Q及Async

    原文地址:http://www.moye.me/2014/12/27/promise_q_async/ 引子 在使用Node/JS编程的时候,经常会遇到这样的问题:有一连串的异步方法,需要按顺序执行, ...

  10. web面试题大全

    $HTML, HTTP,web综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 <img>的title和alt有什么区别 docty ...