html5中的Canvas对图片的一些修改

先展示一下效果:

左边是处理前的原图,右边是经过canvas处理之后的效果。

html代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <canvas id="canvas" width="800" height="800"></canvas>
 9     </body>
10 </html>

javascript代码如下:

 1 <script type = "text/javascript">
 2       var canvas = document.getElementById(‘canvas‘);
 3       var context = canvas.getContext(‘2d‘);
 4       var image = new Image();
 5       image.src = "img/7.jpg";
 6       image.onload = function(){
 7           context.drawImage(image,0,0,300,500);
 8           var imageData = context.getImageData(0,0,300,500);
 9            //获取到每个像素的信息
10           var px = imageData.data;
11           for(var i = 0; i < px.length; i+=4){
12               var r = px[i];
13               var g = px[i + 1];
14               var b = px[i + 2];
15               var gray = ((r + g + b)/3);
16               px[i] = gray;
17               px[i + 1] = gray;
18               px[i + 2] = gray;
19          }
20          context.putImageData(imageData,300,0);
21       }
22 </script>

canvas实现对画面的修改说的简单一些就是将一个一个像素点从新赋值画上去,最后展示在面前的就是一幅经过修改的画面。同理我们如果对视频进行这样的修改呢,我们知道视频就是一张一张图片组成的,如果我们将每一张图片都做这样的修改是不是也能的到这样的效果。下面的代码是对视频的修改。

html代码:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <canvas id="canvas" width="800" height="800"></canvas>
 9         <video src="ganggang.mp4" id="video"></video>
10     </body>
11 </html>

javascript代码:

 1 <script type="text/javascript">
 2         var canvas = document.getElementById(‘canvas‘);
 3         var context = canvas.getContext(‘2d‘);
 4         var video = document.getElementById(‘video‘);
 5         function animate(){
 6             if(!video.end){
 7                 context.drawImage(video,0,0,200,300);
 8                 var imageData = context.getImageData(0,0,200,300);
 9                 var px = imageData.data;
10                 for(var i = 0; i < px.length; i+=4){
11                     var r = px[i];
12                     var g = px[i+1];
13                     var b = px[i+2];
14                     var gray = ((r+g+b)/3);
15                     px[i] = gray;
16                     px[i+1] = gray;
17                     px[i+2] = gray;
18                 }
19                 context.putImageData(imageData,200,0);
20                 window.requestAnimationFrame(animate);
21             }
22         }
23         video.oncanplay = function(){
24             video.play();
25             window.requestAnimationFrame(animate);
26         }
27     </script>

最后的效果这里就不展示了。

时间: 2024-10-11 15:50:04

html5中的Canvas对图片的一些修改的相关文章

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

用html5中的canvas写的时钟

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

第七讲:HTML5中的canvas两个小球全然弹性碰撞

<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script> </head> <body> <canvas id="mc" width="1200px&

HTML5中的&lt;canvas&gt;画布:简单介绍(0)

<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实 验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

HTML5 中的 canvas 画布

---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 在使用canvas之前应该给用户说明必须是ie9+的版本,否则不支持. 绘制简单的直线 1.先获取画布 var canvas = document.getElementById('canvas'); 2.配置绘制的环境 v

如何用javascript中的canvas让图片自己旋转

最近在写一个游戏,想让一个人物随着鼠标在原地旋转 在网上找了找,大都是用css写的,但是我为了长远的利益着想选择使用javascript代码中的canvas来解决绘图问题 其中重要的两个方法: context.translate(x,y) 用于重新设定画布的原点 参数是设定的原点坐标 context.rotate(角度*Math.PI/180) 让图片旋转, 参数是指旋转的弧度 如果要填入角度就像上面一样乘以 Math.PI/180 核心思路: 转载自:http://jingyan.baidu.

HTML5中的 Canvas

什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. 我们可以用Canvas做以下: 1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧,运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥