在ID函数上逐个元素地获取

Question

我正在尝试将此函数应用于很多图像，但是现在我不能，因为它通过ID获取元素，如何更改函数以使其获得元素类？

    /* Canvas multiply effect */
    var multiplyFilter = (function() {
        //** private vars **//
        var multiplyColor,
                imageBottom, imageId,
                canvas;

        //** private functions **//
        function createCanvas() {
            canvas = document.createElement('canvas');
            canvas.width = imageBottom.width;
            canvas.height = imageBottom.height;
            imageBottom.parentNode.insertBefore(canvas, imageBottom);
            // no canvas support?
            if (!canvas.getContext) { return; }

            draw();
        }
        function draw() {
            var context, imgData, pix,
                    w = imageBottom.width,
                    h = imageBottom.height;
            // get 2d context
            context = canvas.getContext('2d');
            // draw the image on the canvas
            context.drawImage(imageBottom, 0, 0);
            // Get the CanvasPixelArray from the given coordinates and dimensions.
            imgData = context.getImageData(0, 0, w, h);
            pix = imgData.data;
            // Loop over each pixel and change the color.
            for (var i = 0, n = pix.length; i < n; i += 4) {
                pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
                pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
                pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
                // pix[i+3] is alpha channel (ignored)

                // another check to see if image is still empty
                if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
                    canvas.parentNode.removeChild(canvas);
                    setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
                    return false;
                }
            }
            // Draw the result on the canvas
            context.putImageData(imgData, 0, 0);
        }

        //** helper function **//
        function multiplyPixels(topValue, bottomValue) {
            // the multiply formula
            return topValue * bottomValue / 255;
        }

        //** public functions **//
        return {
            init : function(imgId, color) {
                imageId = imgId;
                imageBottom = document.getElementById(imageId);
                multiplyColor = color;

                // lauch the draw function as soon as the image is loaded
                if(imageBottom && imageBottom.clientWidth > 50) { // image loaded
                    createCanvas();
                } else { // not yet ready
                    setTimeout(function() { multiplyFilter.init(imageId, color); }, 1000);
                }
            }
        }
    })();

    multiplyFilter.init('multiply_hover', [255, 105, 0]);

Answer 1

将document.getElementById(imageId)更改为document.querySelectorAll(...)，您可以通过CSS选择器语法支持多个元素。您只需在预期单个元素之前迭代返回的元素。

......大致像这样（未经测试）：

/* Canvas multiply effect */
var multiplyFilter = (function() {
    //** private vars **//
    var multiplyColor,
            images, imageSelector,
            canvases = [];

    //** private functions **//
    function createCanvases() {
        var canvas, image;

        for (var i=0; i<images.length; i++) {
            canvas = document.createElement('canvas');

            // no canvas support?
            if (i === 0 && !canvas.getContext) { return; }

            image = images[i];

            canvas.width = image.width;
            canvas.height = image.height;
            image.parentNode.insertBefore(canvas, image);
            draw(image, canvas);
        }
    }
    function draw(image, canvas) {
        var context, imgData, pix,
                w = image.width,
                h = image.height;
        // get 2d context
        context = canvas.getContext('2d');
        // draw the image on the canvas
        context.drawImage(image, 0, 0);
        // Get the CanvasPixelArray from the given coordinates and dimensions.
        imgData = context.getImageData(0, 0, w, h);
        pix = imgData.data;
        // Loop over each pixel and change the color.
        for (var i = 0, n = pix.length; i < n; i += 4) {
            pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
            pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
            pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
            // pix[i+3] is alpha channel (ignored)

            // another check to see if image is still empty
            if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
                canvas.parentNode.removeChild(canvas);
                setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
                return false;
            }
        }
        // Draw the result on the canvas
        context.putImageData(imgData, 0, 0);
    }

    //** helper function **//
    function multiplyPixels(topValue, bottomValue) {
        // the multiply formula
        return topValue * bottomValue / 255;
    }

    //** public functions **//
    return {
        init : function(selector, color) {
            imageSelector = selector;
            images = document.querySelectorAll(imageSelector);
            multiplyColor = color;

            // lauch the draw function as soon as the image is loaded
            if(images.length) {
                var imagesLoaded = true;
                for (var i=0; i<images.length; i++) {
                    if (images[i].clientWidth < 50) {
                        imagesLoaded = false;
                        break;
                    }
                }

                if (imagesLoaded) {
                    createCanvases();
                    return;
                }
            }

            // not yet ready
            setTimeout(function() {
                multiplyFilter.init(imageSelector, color);
            }, 1000);
        }
    }
})();

// selects all images with class 'multiply_hover'
multiplyFilter.init('.multiply_hover', [255, 105, 0]);