<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var oc = document.getElementById('c1');

    var ogc = oc.getContext('2d');

    var yimg = new Image();

    yimg.onload = function ()

    {

        draw(this);

    }

    yimg.src = 'img/5-5.jpg';

    function draw(obj)

    {

        oc.width = obj.width;

        oc.height = obj.height*2;

        ogc.drawImage(obj,0,0);

        var oimg = ogc.getImageData(0,0,obj.width,obj.height);

        var w = oimg.width;

        var h = oimg.height;

        for(var i = 0; i < h; i++)

        {

            for(var j = 0; j < w; j++)

            {

                var color = getXY(oimg,j,i)

                var result = [];

                result[0] = 255 - color[0];

                result[1] = 255 - color[1];

                result[2] = 255 - color[2];

                result[3] = 255;

                setXY(oimg,j,i,result);

            }

        }

        ogc.putImageData(oimg,0,obj.height);

    }

    function getXY(obj,x,y)

    {

        var w = obj.width;

        var h = obj.height;

        var d = obj.data;

        var color = [];

        color[0] = d[ 4*(y*w+x)];

        color[1] = d[ 4*(y*w+x) +1];

        color[2] = d[ 4*(y*w+x) +2];

        color[3] = d[ 4*(y*w+x) +3];

        return color;

    }

    function setXY(obj,x,y,color)

    {

        var w = obj.width;

        var h = obj.height;

        var d = obj.data;

        d[ 4*(y*w+x)] = color[0];

        d[ 4*(y*w+x) +1] = color[1];

        d[ 4*(y*w+x) +2] = color[2];

        d[ 4*(y*w+x) +3] = color[3];

    }

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

<canvas id="c1" width="400" height="800"></canvas>

</body>

</html>

html5 canvas图片反色的更多相关文章

  1. canvas 图片反色

    代码实例: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  2. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  3. php对图片反色处理

    今天有个需求用php对图片进行反色,和转灰,之前不知道可不可行,后来看到了imagefilter()函数,用来转灰绰绰有余,好强大: imagefilter($im, IMG_FILTER_GRAYS ...

  4. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  5. C# 图片反色处理 图片夜间模式

    项目属性-->生成-->允许不安全代码勾上. 代码: /// <summary> /// 反色处理 /// </summary> private Bitmap In ...

  6. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

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

  7. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

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

  8. 使用 HTML5 canvas制作拾色器

    自制的拾色器漂亮吧,哈哈 废话不多说直接上代码,希望可以帮到需要的朋友 <html><head>    <style>        .canvas_color{p ...

  9. html5 canvas图片渐变

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 《OD学HBase》20160820

    一.案例 微博: 微博内容: 关注用户和粉丝用户: 添加或移除关注用户 查看关注用户的微博内容 微博数据存储: 响应时间 秒级 无延迟 (1)mysql分布式 (2)hbase数据库 使用HBase数 ...

  2. ViewState压缩技术

    ViewState 的使用,大家可以说是又爱又恨,它其中一个特性就是保存页面的状态,对于只是展示的页面,我们可以直接在页面文件中使用 EnableViewState="false" ...

  3. Charles是Mac的Fiddler抓包工具

    windows下面我们经常使用 Fiddler 抓包工具进行代理等一系列操作.然而,在 Mac 下的 Fiddler 勉强能运行,但是其挫的都不想说它了.今天看到朋友推荐这款 Charles Mac下 ...

  4. Redis的过滤器（SCAN)功能

    在写另一篇文章( link )的时候,涉及到过滤器(filter)功能.以前没有接触过,整理如下. 主要参考这两篇: http://blog.csdn.net/u011510825/article/d ...

  5. Android 第三方应用接入微信平台（2）

    微信平台开放后倒是挺火的,许多第三方应用都想试下,毕竟可以利用微信 建立起来的关系链来拓展自己的应用还是挺不错的,可以节约很多在社交方 面的开销,我最近由于实习需要也在研究这个东西,不过发现网上的相关 ...

  6. 瞎折腾之 NHibernate ORM框架的接触（MVC + Repository源码）(一)

    在这炮火连天.技术更新迅猛的年代,不接触了解.甚至会用2~3种框架都不好意思说自己有多少年工作经验.况且出去面试也会有点吹牛的底子嘛. 这次折腾了NHibernate.其实这些ORM框架封装好了都是给 ...

  7. UVa 1593 (水题 STL) Alignment of Code

    话说STL的I/O流用的还真不多,就着这道题熟练一下. 用了两个新函数: cout << std::setw(width[j]);    这个是设置输出宽度的,但是默认是在右侧补充空格 所 ...

  8. 51nod1376 最长递增子序列的数量

    O(n2)显然超时.网上找的题解都是用奇怪的姿势写看不懂TAT.然后自己YY.要求a[i]之前最大的是多少且最大的有多少个.那么线段树维护两个值,一个是当前区间的最大值一个是当前区间最大值的数量那么我 ...

  9. VBScript - CUD registry key and value

    http://msdn.microsoft.com/en-us/library/aa384906(v=vs.85).aspx HKEY_LOCAL_MACHINE = &H80000002 s ...

  10. 配置java环境时，java的path地址放在其他地址的前面还是后面？

      PATH环境变量里是按顺序查找的,如果电脑里只有一个jdk,放哪都一样,有多个放前面的会优先.   一般是放在最前面吧,以免其他在path中的程序需要用到Java环境而由于在JAVA_PATH之前 ...