<!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. mytop

    http://jeremy.zawodny.com/mysql/mytop/mytop.html 内容有点过时,用?查看帮助 vi set nuset nonu总记不住

  2. webView缩放

    self.webview.scalesPageToFit = YES; 可以让webView内容用缩放手势放大或缩小

  3. angular中控制器之间的通讯方式

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  4. asp.net mvc 文件压缩下载

    压缩文件相关的类: public class ZIPCompressUtil { public static Tuple<bool, Stream> Zip(string strZipTo ...

  5. Monitorix 监控 安装配置

    Monitorix 监控 安装配置 1. 首先安装RPMforge RPMforge 是由 Dag 及其他包裝者合作維護的.他們為 CentOS 提供超過 5000 個套件,包括 wine.vlc.m ...

  6. Tomcat与Nginx、Apache结合的相关实践

    一.LNMT 简介:在Tomcat服务器前端部署一个Nginx(反向代理),当用户请求静态资源时,由Nginx服务器负责响应:当用户请求java应用程序资源时,由后端的Tomcat服务器进行响应. 环 ...

  7. WKWebKit基础

    UIWebView & UIWebViewDelegate 这个两个东西在 WKWebKit 中被重构成 14 个类 3 个协议. WKWebKit Framework Classes WKB ...

  8. EnablePrefetcher注册表项的修改与电脑提速

    前些天在图书馆找教材,偶然发现一本windows dos命令应用技巧的书,发现了几个有用的注册表项 EnablePrefetcher这个注册表项是windows用来控制系统预读取数据开放程度的参数,其 ...

  9. 增量式PID的stm32实现（转）

    源:增量式PID的stm32实现,整定过程 首先说说增量式PID的公式,这个关系到MCU算法公式的书写,实际上两个公式的写法是同一个公式变换来得,不同的是系数的差异. 资料上比较多的是: 还有一种是: ...

  10. 利用curl验证ssl网站(webservice)

    curl的用法: http://linux.about.com/od/commands/l/blcmdl1_curl.htm DER格式的cert转换为PEM格式(curl只接受PEM格式): ope ...