<!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. dataTables表格分页排序等交互

    官网: https://www.datatables.net/ 中文参考网站: http://datatables.club/ datatables+bootstrap示例: http://sandb ...

  2. C++ STL之priority_queue

    STL中的priority_queue(优先队列)是一种会按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序的容器,不同优先级的情况下,top()上永远是最高优先级的数据,其底层采用的 ...

  3. URAL1495. One-two, One-two 2（dp)

    1495 牵扯一点数位 保存数的时候我是按2进制保存的 把1当作0算 把2当作1算 滚动数组 dp[i][j][(g*10+j)%n] = min(dp[i][j][(g*10+j)%n],dp[i- ...

  4. cmd.exe-应用程序错误 应用程序无法正常启动（0xc0000142）

    之前还好好的,突然就遇到这个问题,运行CMD报错(如上图),后面无论怎么重启都是这样. 导致所有与CMD相关的程序任务都出错,例如Ctrl+Alt+Delete 只好开始各种百度谷歌 找到如下几种解决 ...

  5. 线段树总结 （转载 里面有扫描线类 还有NotOnlySuccess线段树大神的地址）

    转载自:http://blog.csdn.net/shiqi_614/article/details/8228102 之前做了些线段树相关的题目,开学一段时间后,想着把它整理下,完成了大牛NotOnl ...

  6. Spring安全框架 Spring Security

    Spring Security 的前身是 Acegi Security ,是 Spring 项目组中用来提供安全认证服务的框架. Spring Security  为基于J2EE企业应用软件提供了全面 ...

  7. HDU 4006 The kth great number【优先队列】

    题意:输入n行,k,如果一行以I开头,那么插入x,如果以Q开头,则输出第k大的数 用优先队列来做,将队列的大小维护在k这么大,然后每次取队首元素就可以了 另外这个维护队列只有k个元素的时候需要注意一下 ...

  8. WebForm页面运行机制

    阅读目录 开始 WebForm前台与后台的关系及运行原理 前台页面 <% @ Page Language="C#" AutoEventWireup="true&qu ...

  9. myeclipes准备工作

    设置jsp中默认编码为utf-8

  10. theos的makefile写法

    theos的makefile写法与其他linux/unix环境下的makefile写法大同小异,但是对于makefile不熟悉的在导入一些dylib或者framework的时候就会变得很蛋疼. 对于f ...