<!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. 安卓序列化漏洞 —— CVE-2015-3525

    在2014年,Jann Horn发现一个安卓的提权漏洞,该漏洞允许恶意应用从普通应用权限提权到system用户执行命令,漏洞信息与POC见(1].漏洞的成因源于在安卓系统(<5.0)中,java ...

  2. 对 JimmyZhang 老师的文章《项目代码风格要求》的一些个人观点

    Jimmy Zhang 老师是博客园中我最佩服的人之一,今天看了他的文章<项目代码风格要求>觉得大部分地方我都很认同,工作中也是强迫自己也要按照规范来编程.下面是我的一些个人观点,想贴出来 ...

  3. C# 装箱与拆箱

    知识点  值类型.    值类型是在栈中分配内存,在声明时初始化才能使用,不能为null.    值类型超出作用范围系统自动释放内存.    主要由两类组成:结构,枚举(enum),结构分为以下几类: ...

  4. poj 3486 A Simple Problem with Integers（树状数组第三种模板改段求段）

    /* 树状数组第三种模板(改段求段)不解释! 不明白的点这里:here! */ #include<iostream> #include<cstring> #include< ...

  5. [转载]逐步建设企业DevOps能力

    当软件行业进入互联网时代,市场对软件产品和服务的交付提出了更高的要求:不仅要快速实现需求,而且要快速发布上线,并且必须保证业务可靠.高效运行.为了满足这些要求,IT组织需要强有力的流程.技术和人员作为 ...

  6. Xcode-调试断点不能停在代码区终极解决方案

    转发 调试断点不能停在代码区终极解决方案:  http://mobile.51cto.com/iphone-390082.htm

  7. SQL Server 存储(2/8)：理解数据记录结构

    在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下. 数据记录存储我们具体的数据,换句话说,它存在 ...

  8. stl的优先级队列

    #include <iostream> #include <vector> #include <queue> using namespace std; class ...

  9. 汇编学习：float与double速度问题

    X86处理器包含两种类型的浮点数寄存器.第一种使用8个浮点寄存器组成浮点寄存器栈,另一种为向量寄存器(XMM,YMM),它们对于单双精度的处理是不同的.本文将讨论两种模式下的浮点数计算速度问题. 一. ...

  10. [Perl]抓取个人的所有闪存+格式化保存为文本

    以下代码保存为utf8文本格式 环境:ActivePerl v5.16 built for MSWin32-x86 两个要调整的地方: for my $i (17..45) {  这里改成自己对应的页 ...