使用jquery更改图像的R，G，B？答案

【问题标题】：change R,G,B of image using jquery?使用jquery更改图像的R，G，B？
【发布时间】：2013-05-11 00:01:52
【问题描述】：

我想使用 jquery 更改图像的 R、G、B 颜色。我正在将图像转换为画布，但它不起作用请修复我的错误或我缺少什么。

这次我只是改变红色，如果这个工作休息可以做同样的事情。

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

   <script type="text/javascript" src="js/jquery-1.8.3.js"></script>


    <script type="text/javascript">

    function redSwitch() {

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        var photo = new Image();
        photo.src = $('#pic').attr('src');

        canvas.width = photo.width;
        canvas.height = photo.height; 
        ctx.drawImage(photo, 0, 0); 
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var val = $('#red').val();

        for(var y=0; y<imgPixels.height; y++)
        {
            for(var x=0; x<imgPixels.width; x++)
            {
                var i = (y * 4) * imgPixels.width + x * 4;
                if(imgPixels.data[i]+val > 255)
                {
                    imgPixels.data[i] = 255;
                }
                else
                {
                    imgPixels.data[i] = imgPixels.data[i]+val;
                }
            }
        }

    }


    $(document).ready(function(){

                $('#red').change(function(){
        redSwitch();
    });});
    </script>
</head>
<body>

<img id="pic" src="pool.jpg" />

<input type="range" id="red"  min="-255" max="255" value="0" />


</body>
</html>

【问题讨论】：

标签： jquery image colors

【解决方案1】：

您的代码存在问题，即您获取源图像数据并确实对其进行了更改，但从不将其拉回。首先，您需要将画布定义为静态标签，而不是在每次更改时创建它：

<canvas id="main"></canvas>

其次，在更改回调中从#main获取上下文：

var canvas = $('#main')[0];
var ctx = canvas.getContext('2d');

最后，在完成像素操作后，将更改后的字节绘制到#main：

ctx.putImageData(imgPixels, 0, 0);

还有一个附注：你不需要创建图像元素的克隆，使用现有的，因为你不修改它：

var photo = $('#pic')[0];

【讨论】：