<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>get/putImageData</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='400'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var cxt = c.getContext('2d');

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        // 从10,10坐标开始绘制整个图片

        cxt.drawImage(img, 10, 10);

        // 获取从50,50到200,200的区域

        var imgData = cxt.getImageData(50,50,200,200);

        // 将获得的整个像素绘制到10,260开始的Canvas上面

        cxt.putImageData(imgData,10,260);

        // 将取得的一部分像素(从50,50开始宽高为100,100)，

        // 绘制到200,260开始的Canvas上面

        cxt.putImageData(imgData,200,260,50,50,100,100);

    };

    </script>

</body>

</html>

Canvas get/putImageData的更多相关文章

  1. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  3. 使用Canvas把照片转换成素描画

    原文:http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/ 腾讯的alloy team写的一个素描效果,挺不错的. ...

  4. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  5. HTML5(五)——Canvas API

    什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...

  6. 深入浅出ES6（十七）：展望未来

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 出于对文章长度的考虑,我们还保留了一些尚未提及的新特性,在最后的这篇文章中我会集 ...

  7. [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  8. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. js获取屏幕和窗口的信息

    <html><script>function a(){document.write("屏幕分辨率为:"+screen.width+"*" ...

  2. Android学习笔记之Intent(1)

    1.Intent指定启动目标组件 2.Intentfilter描述基本组件所在地址 3.其他包引入资源文件时记得引入R所在的包 package com.jikexueyuan.intent; impo ...

  3. CodeForces 605B Lazy Student

    构造.对边的权值排序,权值一样的话,在MST中的边排到前面,否则权值小的排在前面. 然后边一条一条扫过去,如果是1 ,那么连一个点到集合中,如果是0,集合内的边相连. #include<cstd ...

  4. Jedis使用示例

    http://javacrazyer.iteye.com/blog/1840161 http://www.cnblogs.com/edisonfeng/p/3571870.html

  5. 在win10环境下安装eclipse mars版本

    1下载eclipse软件.下载地址:http://www.eclipse.org/downloads/ 不要下载.exe文件.直接下载安装包,下载对应的安装包,我下载的是这个Eclipse IDE f ...

  6. html5新增标签集锦

    <keygen></keygen><meter low="69" high="80" max="100" op ...

  7. Knockout 系列

    由于近期要做的项目要兼容到IE6,原来的angular框架已经不能满足现在的兼容性要求. 解决方案: 1. 放弃框架,改为库 2. UI库采用 Knockout,css 3. css库 采用 boot ...

  8. 交换Ctrl和Caps Lock键

    由于使用vim的缘故,就把Ctrl和Caps Lock键交换了,在ubuntu系统下使用系统设置可以很简单地进行全局替换. 在ubuntu下习惯了之后在window下就经常按错...后来决定也把win ...

  9. 《OpenCV3 计算机视觉--Python语言实现 第二版》源代码及纠错

    1.源代码下载地址 <OpenCV3 计算机视觉--Python语言实现 第二版>由我们翻译,英文书名<Learning OpenCV3 Computer Vision with P ...

  10. js实现的文章输入检查与测速。(纯js版本)

    朋友又提出一些需求.希望不要jquery .于是修改成js版本. <!DOCTYPE html> <html> <head> <meta charset=&q ...