Прочитать прозрачные пиксели с изображения

Question

Есть ли способ прочитать прозрачные пиксели с картинки, используя JavaScript?

Я думаю, что это может быть чем-то похожим на то, что PNG исправляет для IE (чтение прозрачных пикселей и применение некоторых вещей, смеется).Но да, для каждого браузера ..

Ах, было бы здорово, если бы этого можно было достичь без HTML5.

Answer 1

Ну, на этот вопрос на самом деле отвечает чувак из GoogleTechTalks в этом видео на игровых движках на основе javascript. http://www.youtube.com/watch?feature=player_detailpage&v=_RRnyChxijA#t=1610s Он должен начинаться с того места, где это объясняется.

Edit: Поэтому я подведу итог тому, что говорится в видео, и приведу пример кода. Это было намного сложнее, чем я ожидал. Хитрость заключается в том, чтобы загрузить ваше изображение на холст, а затем проверить каждый пиксель, если он прозрачный. Данные помещаются в двумерный массив. Как и alphaData [pixelRow] [pixelCol]. 0 представляет прозрачность, а 1 - нет. Когда массив alphaData завершен, он помещается в глобальную переменную.

var a;
function alphaDataPNG(url, width, height) {

    var start = false;
    var context = null;
    var c = document.createElement("canvas");
    if(c.getContext) {
        context = c.getContext("2d");
        if(context.getImageData) {
            start = true;
        }
    }
    if(start) {
        var alphaData = [];
        var loadImage = new Image();
        loadImage.style.position = "absolute";
        loadImage.style.left = "-10000px";
        document.body.appendChild(loadImage);
        loadImage.onload = function() {
            c.width = width;
            c.height = height;
            c.style.width = width + "px";
            c.style.height = height + "px";
            context.drawImage(this, 0, 0, width, height);
            try {
                try {
                     var imgDat = context.getImageData(0, 0, width, height);
                } catch (e) {
                    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
                    var imgDat = context.getImageData(0, 0, width, height);
                }                    
            } catch (e) {
                throw new Error("unable to access image data: " + e);
            }
            var imgData = imgDat.data;
            for(var i = 0, n = imgData.length; i < n; i += 4) {
                var row = Math.floor((i / 4) / width);
                var col = (i/4) - (row * width);
                if(!alphaData[row]) alphaData[row] = [];
                alphaData[row][col] = imgData[i+3] == 0 ? 0 : 1;
            }
            a=alphaData;
        };
        loadImage.src = url;
    } else {
        return false;
    }
}

Я получил ошибки при запуске local в Firefox, и оператор try catch решил эту проблему. О, я должен есть ...

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

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas Информация об объекте imageData.

http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html Еще больше информации об объекте imageData и его использовании.

http://www.nihilogic.dk/labs/canvascompress/pngdata.js Действительно полезный пример использования imageData, код, который я предоставил, по большей части напоминает этот.

http://www.youtube.com/watch?v=_RRnyChxijA Информация о скриптовых игровых движках в javascript, действительно очень интересная.

http://blog.project -sierra.de / архив / 1577 Информация об использовании enablePrivilege в Firefox.

Answer 2

Это немного сложная проблема, поскольку единственный способ получить доступ к файлам напрямую из Javascript - это использовать FileReader, который является относительно новой функцией и еще не поддерживается в большинстве браузеров.

Однако вы можете получить желаемый результат, используя холст. Если у вас есть холст, вы можете назначить ему какой-нибудь характерный цвет (например, неоновый зеленый, используемый на зеленых экранах). Затем вы можете вставить изображение на холст и использовать метод, упомянутый здесь , чтобы получить каждый отдельный пиксель. Затем вы можете проверить цвет каждого пикселя и посмотреть, соответствует ли эта точка вашему фоновому цвету (поэтому он прозрачный) или имеет какой-то другой цвет (не прозрачный).

Хак, но не думайте, что с чистым JS можно что-то еще сделать.

Answer 3

Похоже, что GameJS может сделать это и многое, многое другое. Я ссылаюсь на этот ТАК вопрос для любых / всех моих знаний, так как я не утверждаю, что на самом деле что-то имею по этой теме.

Конечно, это HTML5 и использует элемент canvas.