Canvas get/putImageData
<!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的更多相关文章
- HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用canvas实现图片滤镜效果详解之灰度效果
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...
- 使用Canvas把照片转换成素描画
原文:http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/ 腾讯的alloy team写的一个素描效果,挺不错的. ...
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...
- HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...
- 深入浅出ES6(十七):展望未来
作者 Jason Orendorff github主页 https://github.com/jorendorff 出于对文章长度的考虑,我们还保留了一些尚未提及的新特性,在最后的这篇文章中我会集 ...
- [ html canvas putImageData ] canvas绘图属性 putImageData 属性讲解
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
随机推荐
- Fox And Names
Description Fox Ciel is going to publish a paper on FOCS (Foxes Operated Computer Systems, pronounce ...
- [iOS]C语言技术视频-15-指针变量高级用法练习一(函数指针完成动态排序)
下载地址: 链接: http://pan.baidu.com/s/1o6MOzX4 密码: xzxn
- JS——基础知识(三)
1.select (1)它的选择事件是onchange (2)他的选项索引可以通过value获取,比tab选项卡要方便一点. 2.数组常用方法 (1)添加元素 push():可以向一个数组末尾添加一个 ...
- jQuery Ajax 二次封装
jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...
- winutils spark windows installation
http://stackoverflow.com/questions/37305001/winutils-spark-windows-installation
- With PHP frameworks, why is the “route” concept used?
http://programmers.stackexchange.com/questions/122190/with-php-frameworks-why-is-the-route-concept-u ...
- Android编程中的5种数据存储方式
Android编程中的5种数据存储方式 作者:牛奶.不加糖 字体:[增加 减小] 类型:转载 时间:2015-12-03我要评论 这篇文章主要介绍了Android编程中的5种数据存储方式,结合实例形式 ...
- Sequence Classification
Natural Language Processing with Python Charpter 6.1 import nltk from nltk.corpus import brown def p ...
- view添加阴影无效
需求:需要给cell里的imageview添加阴影 问题:按照标准的代码添加阴影,然并卵:代码如下: imageview.layer.shadowColor = [[UIColor blackColo ...
- StackExchange.Redis 官方文档(二) Configuration
配置 有多种方式可以配置redis,StackExchange.Redis提供了一个丰富的配置模型,在执行Connect (or ConnectAsync) 时被调用: var conn = Conn ...