<!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. Objective-C编码规范：26个方面解决iOS开发问题

    介绍 我们制定Objective-C编码规范的原因是我们能够在我们的书,教程和初学者工具包的代码保持优雅和一致.即使我们有很多不同的作者来完成不同的书籍. 这里编码规范有可能与你看到的其他Object ...

  2. What a version number means

    http://stackoverflow.com/questions/3768261/best-practices-guidance-for-maintaining-assembly-version- ...

  3. hdu 1520 Anniversary party || codevs 1380 树形dp

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. ural1221. Malevich Strikes Back!

    http://acm.timus.ru/problem.aspx?space=1&num=1221 算是枚举的 题目意思是必须划出这样的 11011 10001 00000 10001 110 ...

  5. github创建repo，本地导入git项目到github

    一般地,在注册好github账号之后,你需要做的事情就是在github上创建一个repo,该repo将成为你的origin(central)repo,随后你就可以将本地的项目git repo导入到这个 ...

  6. 如何在linux中从源代码编译安装nodejs？

    $ sudo yum groupinstall 'Development Tools'安装开发环境$ wget https://nodejs.org/dist/v0.12.2/node-v0.12.2 ...

  7. HDU 5033 (单调栈维护凸包) Building

    题意: 一个人在x轴上,他的左右两侧都有高楼,给出楼的横坐标Xi和高度Hi还有人的位置pos,求人所能看到的天空的最大角度. 分析: 将建筑物和人的位置从左到右排序,对于每个位置利用栈求一次人左边建筑 ...

  8. HDU 1158 Employment Planning

    又一次看题解. 万事开头难,我想DP也是这样的. 呵呵,不过还是有进步的. 比如说我一开始也是打算用dp[i][j]表示第i个月份雇j个员工的最低花费,不过后面的思路就完全错了.. 不过这里还有个问题 ...

  9. java MVC设计模式

    MVC(Model View Control)模型-视图-控制器 一.MVC与模板概念的理解 MVC本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是 ...

  10. spring、springmvc、mybatis整合笔记

    这段时间上一个项目刚做完,下一个项目还没开始,趁这个时候来认真总结一下上个项目使用的ssm开发框架.由于,项目中关于使用ssm这部分的代码和配置是我们项目的整体架构师一个独立完成的,我们只负责业务部分 ...