<!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. Sybase数据库的分页功能

    项目中需要用到Sybase数据库的分页功能,想尽各种办法都没有成功,最后用如下的存储过程成功实现功能,记录备忘. ),@start int, @pageSize int as begin declar ...

  2. PAT (Advanced Level) 1007. Maximum Subsequence Sum (25)

    简单DP. 注意:If all the K numbers are negative, then its maximum sum is defined to be 0, and you are sup ...

  3. Struts1、2种如何防止表单重复提交和两者的区别

    使用token指令牌就行了.在进入标签之前的action中通过saveToken方法保存指令牌.在表单提交后的action中判断这个token是否存在,如果存在允许插入,并通过resetToken把t ...

  4. 使用for循环输出空心的菱形的思路-还是没有办法理解

    之前已经成功写过一次代码,今天重新看这个题目时,一下子又没了思路,在草稿纸上比划了大概十分钟才想到实现的思路.思路跟上次实现的完全一样,发现时间长了就忘记了!真是好记性不如烂笔头,何况我这么差的记性呢 ...

  5. Manacher 最长回文子串。

    最长回文子串就是一个字符串的一个子串,他从左往右读和从右往左读是一样的. 可以用 Manacher 算法来求,他的复杂度是 O(n) . 可以看这篇文章 http://blog.csdn.net/yw ...

  6. 防止多个UIAlertView重叠弹出

    http://www.jianshu.com/p/7ac398ef4532 项目中可能会遇到这种情况,好几个alertView因为逻辑关系全部弹出,用户需要一个个的点击才能将所有的alertView取 ...

  7. jquery为某div下的所有textbox的赋值

    html代码 <input type="button" value="变量div_Alltext中的变量" onclick="Do_DivAll ...

  8. 虚拟机联网及远程连接-Linux基础环境命令学习笔记

    1.ifconfig命令=ip a命令,查看IP地址 网卡默认名称eth0. Bcast 广播地址2.xshell or secureCRT远程连接 ssh root@地址 xmanager 远程桌面 ...

  9. IOS开发－OC学习－Info.plist文件解析

    Info.plist文件是新建ios项目完成后自动生成的一个配置文件,在Xcode中如下图: 通过解析可以获得配置的具体细节,解析过程如下: // 定义一个nsstring用来获取Info.plist ...

  10. EF dbcontext上下文的处理

    ,那么我们整个项目里面上下文的实例会有很多个,我们又遇到了多次,当我们在编程的时候遇到多的时候,一般我们就要想想能不能解决多这个问题. (2)这里我要说的是EF上下文怎么管理呢?很简单啦,就是要保证线 ...