Question

我有一个网页，用户上传一些手写作品的图片。有时它的扫描铅笔很难阅读。

是否可以使用可用于变暗或甚至锐化特定图像的滑块/按钮？我需要每个图像一个滑块/按钮，因为我查看的页面包含几个用户上传的图像。

感谢。

Answer 1

简答：是的。

执行此操作的最简单方法是使用CSS Filters，但旧浏览器（support table）不支持这些方法。以下示例应用200％对比度滤镜。

filter: contrast(2);

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

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

Answer 2

是的，有两种方法，一种是css过滤器（请参阅posit labs答案），另一种是使用画布，这里有一个很好的tutorial，这是我的demo。

对于演示，你必须在你自己的域中使用一个图像（否则画布变得污染而你无法访问像素），这就是为什么你在图像中看到数据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:07 a.m ）

变暗图像滑块/按钮 - Javascript

2 个答案:

HTML

的JavaScript

更新