Javascript Pixel Manipulation: это не мои цвета - PullRequest
Новая
       1

Javascript Pixel Manipulation: это не мои цвета

3 голосов
/ 11 февраля 2012

Я знаю, что подобные вопросы задавались несколько раз, но мне еще предстоит найти именно то, что я ищу.Я читаю изображение в объект холста (в javascript) и пытаюсь манипулировать некоторыми конкретными пикселями.Например, я ищу цвет RGB: 224 64 102 и пытаюсь изменить его на другой цвет.

Я могу применить оттенки серого к изображению, поэтому я знаю, что манипуляции работают, но кодне найдено ни одного пикселя с этим цветом (как сказал Adobe Illustrator, это был цвет RGB).Я надеюсь, что мне не хватает небольшой детали.Код ниже, надеюсь, кто-то его увидит.

Спасибо! 

var canvas = document.getElementById("testcanvas");
            var canvasContext = canvas.getContext('2d');


            imgObj = new Image();
            imgObj.src = "ss.jpg";
            //imgObj.width = 200;
            //imgObj.height = 200;
            var imgW = imgObj.width;
            var imgH = imgObj.height;
            canvas.width = imgW;
            canvas.height = imgH;
            canvasContext.drawImage(imgObj, 0, 0);

            var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

            //hash_table = {};

             for (var x = 0; x < imgPixels.width; x++) {
                for (var y = 0; y < imgPixels.height; y++)
                    {
                   var i = (y * imgPixels.width + x) * 4;
                     //Want to go from:
                     //E04066
                     //224 64 102 -> to
                     //134 135 185

                     if(imgPixels.data[i] == 224 && imgPixels.data[i+1] == 64 && imgPixels.data[i+2] == 102) {
                        imgPixels.data[i] = 134;
                        imgPixels.data[i+1] = 135;
                        imgPixels.data[i+2] = 185;
                     }

                     //To greyscale:
                     /*
                     var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                     imgPixels.data[i] = avg;
                     imgPixels.data[i + 1] = avg;
                     imgPixels.data[i + 2] = avg;
                     imgPixels.data[i + 3] = 255;
                    */
                }
            }
            canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
            //color_count = 0;
            //for(key in hash_table) {
            //  color_count++;
            //}
            //console.log(color_count);
            //console.log(hash_table);
            return canvas.toDataURL();

        });
});

</script>
</head>
<body>
    <canvas id="testcanvas"></canvas>

<img src="ss.jpg" id="testimage"/>

Ответы [ 3 ]

3 голосов
/ 11 февраля 2012

Возможно, вы не можете получить данные изображения из канвы, поскольку холст был испорчен данными из разных источников.

Если этот файл, ss.jpg локальный, он не будет работать. Я полагаю, что это так.

Для получения дополнительной информации поищите холст перекрестного происхождения в SO или Google. Там много всего. Вот немного объяснения:

http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules

Вот сайт о включении его на вашем сервере:

http://enable -cors.org /

В противном случае ваш код работает. Вот тот же код, преобразующий крошечную красную точку в крошечную зеленую точку:

http://jsfiddle.net/RBaxt/

0 голосов
/ 14 января 2015

Я думаю, вы загружаете изображение, которое не готово для рисования.Ниже я обновил ваш код выше, хотя я не тестировал его, но чувствую, что он может вас куда-то привести 

 var canvas = document.getElementById("testcanvas");
        var canvasContext = canvas.getContext('2d');


        imgObj = new Image();
        imgObj.src = "ss.jpg";
        //imgObj.width = 200;
        //imgObj.height = 200;
        var imgW = imgObj.width;
        var imgH = imgObj.height;
        imgObj.onload = function(){
           //Put the pixel manipulation code here;
           // This ensures the image has been loaded before it is accessed. 
        }
0 голосов
/ 14 марта 2013

Canvas действительно не работает с .JPG форматом. Вы должны конвертировать ваше изображение в .PNG, используя любой инструмент для редактирования изображений, например Photoshop. Ваш код работает хорошо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...