Question

我已经编写了用于图像过滤器的代码，但是当前代码有问题。当我更改其中一个滑块时，图像变成白色。我不确定这些代码背后的问题是什么，我不知道该如何解决。我尝试过更改变量，但是没有任何运气。

它应该像更改图像滤镜一样更改图像。

    class SubmitItem(LoginRequiredMixin, generic.CreateView):
    login_url = '/login/'
    redirect_field_name = 'item_detail.html'
    form_class = SubmitItemForm
    model = Item

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

    def form_invalid(self, form):
        response = super().form_invalid(form)
        return response

var img = document.getElementById("myImg");

var slider1 = document.getElementById("slider1");
var slider2 = document.getElementById("slider2");
var slider3 = document.getElementById("slider3");
var slider4 = document.getElementById("slider4");
var slider5 = document.getElementById("slider5");
var slider6 = document.getElementById("slider6");
var slider7 = document.getElementById("slider7");

var sepia = slider1.value;
var blur = slider2.value;
var invert = slider3.value;
var contrast = slider4.value;
var opacity = slider5.value;
var grayscale = slider6.value;
var brightness = slider7.value;

slider1.addEventListener("input", function(){
    sepia = this.value;
    img.style["-webkit-filter"] = "sepia(" + this.value + "%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider2.addEventListener("input", function(){
    blur = this.value;
    img.style["-webkit-filter"] = "blur(" + this.value + "px) sepia("+sepia+"%) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider3.addEventListener("input", function(){
    invert = this.value;
    img.style["-webkit-filter"] = "invert(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider4.addEventListener("input", function(){
    contrast = this.value;
    img.style["-webkit-filter"] = "contrast(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) invert("+invert+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider5.addEventListener("input", function(){
    opacity = this.value;
    img.style["-webkit-filter"] = "opacity(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) grayscale("+grayscale+"%) brightness("+brightness+")";
});

slider6.addEventListener("input", function(){
    grayscale = this.value;
    img.style["-webkit-filter"] = "grayscale(" + this.value + "%) sepia("+sepia+"%) blur("+huerotate+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) brightness("+brightness+")";
});

slider7.addEventListener("input", function(){
    brightness = this.value;
    img.style["-webkit-filter"] = "grayscale(" + this.value + "%) sepia("+sepia+"%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%)";
});

Answer 1

您的亮度没有单位（％）

img.style["-webkit-filter"] ="sepia(" + this.value + "%) blur("+blur+"px) invert("+invert+"%) contrast("+contrast+"%) opacity("+opacity+"%) grayscale("+grayscale+"%) brightness("+brightness+"%)";

以下是原始帖子的重写：

// get reference
var img = document.getElementById('myImg');
var sliders = {
    sepia: document.getElementById('slider1'),
    blur: document.getElementById('slider2'),
    invert: document.getElementById('slider3'),
    contrast: document.getElementById('slider4'),
    opacity: document.getElementById('slider5'),
    grayscale: document.getElementById('slider6'),
    brightness: document.getElementById('slider7')
};
// set to correct values
sliders.sepia.value = 0;
sliders.blur.value = 0;
sliders.invert.value = 0;
sliders.contrast.value = 100;
sliders.opacity.value = 100;
sliders.grayscale.value = 0;
sliders.brightness.value = 100;

function render() {
    img.style['-webkit-filter'] =
        'sepia(' + sliders.sepia.value + '%)' +
        'blur(' + sliders.blur.value + 'px)' +
        'invert(' + sliders.invert.value + '%)' +
        'contrast(' + sliders.contrast.value + '%)' +
        'opacity(' + sliders.opacity.value + '%)' +
        'grayscale(' + sliders.grayscale.value + '%)' +
        'brightness(' + sliders.brightness.value + '%)';
}

// bind listeners
for (var filterName in sliders) {
    sliders[filterName].addEventListener('input', render);
}

<img id="myImg" src="https://pbs.twimg.com/profile_images/591093476/bird.jpg">
<input type="range" id="slider1" value="50">
<input type="range" id="slider2" value="4">
<input type="range" id="slider3" value="50">
<input type="range" id="slider4" value="50">
<input type="range" id="slider5" value="50">
<input type="range" id="slider6" value="50">
<input type="range" id="slider7" value="50">

多重过滤功能的问题

1 个答案: