变暗图像滑块/按钮 - Javascript

是的，有两种方法，一种是 css 过滤器（参见 posit 实验室答案），另一种是使用 canvas，这是一个很好的教程，这是我的演示。

对于演示，您必须在自己的域中使用图像（否则画布会被污染并且您无法访问像素），这就是为什么您在图像中看到 Data URI src，这是使图像源自小提琴的唯一方法。

.HTML

<img id="myImage" src="mydomain/img.png">
<button class="filter-btn" data-filter="darken" data-img="#myImage">Darken</button>
<button class="filter-btn" data-filter="sharpen" data-img="#myImage">Sharpen</button>

如果您复制并粘贴 JavaScript，您唯一要做的就是使用此标记使其工作，图像可以根据需要进行配置，按钮是重要的部分。

每个按钮都有一个filter-btn类，以指示它打算应用滤镜，然后，通过 data-filter 属性指定滤镜（在这种情况下，它可以锐化或变暗），最后通过 data-img 属性将按钮链接到图像，您可以在其中指定任何 css 选择器来访问图像。

JavaScript

请记住，如果您遵循 HTML 标记，则不必触摸其中任何一个，但是如果您对代码有任何疑问，请射击！

ImageFilter = {}
ImageFilter.init = function () {
    var buttons = document.querySelectorAll(".filter-btn");
    for (var i = 0; i < buttons.length; i++) {
        var btn = buttons[i];
        var filter = btn.dataset.filter;
        var img = btn.dataset.img;
        img.crossOrigin = "Anonymous";
        (function (filter, img) {
            btn.addEventListener("click", function () {
                ImageFilter.doFilter(filter, img);
            });
        })(filter, img);
    }
}
window.addEventListener("load", ImageFilter.init);
ImageFilter.getImage = function (selector) {
    return document.querySelector(selector);
}
ImageFilter.createData = function (canvas, w, h) {
    var context = canvas.getContext("2d");
    return context.createImageData(w, h);
}
ImageFilter.doFilter = function (type, image) {
    var image = ImageFilter.getImage(image);
    switch (type) {
        case "darken":
            var adjustment = -5;
            var canvas = ImageFilter.newCanvas(image);
            var data = ImageFilter.getData(canvas);
            var actualData = data.data;
            for (var i = 0; i < actualData.length; i++) {
                actualData[i] += adjustment;
                actualData[i + 1] += adjustment;
                actualData[i + 2] += adjustment;
            }
            ImageFilter.putData(data, canvas);
            var newImg = image.cloneNode(true);
            newImg.src = ImageFilter.getSource(canvas);
            newImg.id = image.id;
            replaceNode(image, newImg);
            break;
        case "sharpen":
            var weights = [0, -1, 0, -1, 5, -1,
            0, -1, 0];
            var canvas = ImageFilter.newCanvas(image);
            var data = ImageFilter.getData(canvas);
            var side = Math.round(Math.sqrt(weights.length));
            var halfSide = Math.floor(side / 2);
            var src = data.data;
            var sw = data.width;
            var sh = data.height;
            var w = sw;
            var h = sh;
            var output = ImageFilter.createData(canvas, w, h);
            var dst = output.data;
            var alphaFac = 1;
            for (var y = 0; y < h; y++) {
                for (var x = 0; x < w; x++) {
                    var sy = y;
                    var sx = x;
                    var dstOff = (y * w + x) * 4;
                    var r = 0,
                        g = 0,
                        b = 0,
                        a = 0;
                    for (var cy = 0; cy < side; cy++) {
                        for (var cx = 0; cx < side; cx++) {
                            var scy = sy + cy - halfSide;
                            var scx = sx + cx - halfSide;
                            if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
                                var srcOff = (scy * sw + scx) * 4;
                                var wt = weights[cy * side + cx];
                                r += src[srcOff] * wt;
                                g += src[srcOff + 1] * wt;
                                b += src[srcOff + 2] * wt;
                                a += src[srcOff + 3] * wt;
                            }
                        }
                    }
                    dst[dstOff] = r;
                    dst[dstOff + 1] = g;
                    dst[dstOff + 2] = b;
                    dst[dstOff + 3] = a + alphaFac * (255 - a);
                }
            }
            ImageFilter.putData(output, canvas);
            var newImg = image.cloneNode(true);
            newImg.src = ImageFilter.getSource(canvas);
            replaceNode(image, newImg);
            break;
    }
}
ImageFilter.newCanvas = function (image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    return canvas;
}
ImageFilter.getData = function (canvas) {
    var context = canvas.getContext("2d");
    return context.getImageData(0, 0, canvas.width, canvas.height);
}
ImageFilter.putData = function (data, canvas) {
    var context = canvas.getContext("2d");
    context.putImageData(data, 0, 0);
}
ImageFilter.getSource = function (canvas) {
    return canvas.toDataURL();
}
function replaceNode(node1, node2) {
    var parent = node1.parentNode;
    var next = node1.nextSibling;
    if (next) parent.insertBefore(node2, next);
    else parent.appendChild(node2);
    parent.removeChild(node1);
}

就是这样，看演示，希望有帮助！

更新

Firefox修复
• ：每次创建新映像并替换旧映像似乎可以修复Firefox错误，即它不会更新映像的src。（29/01/15 2：07a.m.m）

简短的回答：是的。

最简单的方法是使用 CSS 过滤器，但旧浏览器不支持它们（支持表）。下面的示例应用 200% 对比度滤镜。

filter: contrast(2);

另一种选择是使用 HTML 画布绘制图像并手动操作像素。它不是很快，而且比CSS过滤器复杂得多。我不会深入探讨，但这里有一篇关于使用画布过滤图像的文章。

在我看来，用户应该负责上传高质量的图像。通过向您的网站添加额外的控件来纠正他们的错误似乎很愚蠢。