<!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. [HDOJ2546] 饭卡 （01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2546 先找出最贵的那个菜,这个菜一定是最后买的那个.然后再在前n-1个菜里做01背包.找出不超过m-5 ...

  2. hadoop环境搭建笔记

    一.配置Linux (1)cat /etc/networks (2)cat /etc/sysconfig/network (3)vi /etc/udev/rules.d/70-persistent-n ...

  3. shell进行mysql统计

    array=(江苏 浙江 新疆 宁夏 广东 福建 重庆 江西 吉林 湖南 山东 云南  上海 河北 黑龙江 北京 四川 河南 山西 湖北 辽宁 安徽 陕西 广西 贵州 内蒙古 天津 甘肃 海南 青海 ...

  4. STL笔记（5）条款49：学习破解有关STL的编译器诊断信息

    STL笔记(5)条款49:学习破解有关STL的编译器诊断信息 条款49:学习破解有关STL的编译器诊断信息 用一个特定的大小定义一个vector是完全合法的, vector<int> v( ...

  5. 51nod1257 背包问题 V3

    分数规划经典.开始精度1e-3/1e-4都不行,1e-5就A了 #include<cstdio> #include<cstring> #include<cctype> ...

  6. UVA 10061 How many zero's and how many digits ? (m进制，阶乘位数，阶乘后缀0)

    题意: 给出两个数字a和b,求a的阶乘转换成b进制后,输出 (1)后缀中有多少个连续的0? (2)数a的b进制表示法中有多少位? 思路:逐个问题解决. 设a!=k.  k暂时不用直接转成b进制. (1 ...

  7. python练习程序（c100经典例8）

    题目: 输出9*9口诀. for i in range(1,10): for j in range(1,i+1): print str(j)+"*"+str(i)+"=& ...

  8. 【解题报告】[动态规划] RQNOJ - PID38 / 串的记数

    原题地址:http://www.rqnoj.cn/problem/38 解题思路: 状态表示:dp[i][j][k]表示i个A,j个B,k个C组成的满足条件的字符串的个数 初始状态:dp[0][0][ ...

  9. 隐藏 php apache 的版本号

    隐藏Apache版本信息 找到apache安装路径,譬如\Apache\conf\httpd.conf 修改httpd.conf ServerTokens ProductOnly ServerSign ...

  10. 安装完eclipse,dbwear后，需要在他们解压文件.ini下加上你liux的jdk的安装路径，才能正常使用

    -vm/usr/java/jdk/jdk1.6.0_45/bin/java