Question

我正在开发一个网站，我必须使用滚动条添加屏幕调整，我使用this示例进行了调整。你可以看到下面的代码......

HTML CODE：

<h1>Image Editor with CSS Filters and jQuery</h1>

<!--Form for collecting image URL -->
<form id="urlBox" class="center">
  <input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and start playing!">
  <input id="go" type="button" value="Go">
</form>

<hr color="grey">

<!--Controls for CSS filters via range input-->
<div class="sliders">
  <form id="imageEditor">
    <p>
      <label for="gs">Grayscale</label>
      <input id="gs" name="gs" type="range" min="0" max="100" value="0">
    </p>

    <p>
      <label for="blur">Blur</label>
      <input id="blur" name="blur" type="range" min="0" max="10" value="0">
    </p>

    <p>
      <label for="br">Exposure</label>
      <input id="br" name="br" type="range" min="0" max="200" value="100">
    </p>

    <p>
      <label for="ct">Contrast</label>
      <input id="ct" name="ct" type="range" min="0" max="200" value="100">
    </p>

    <p>
      <label for="huer">Hue Rotate</label>
      <input id="huer" name="huer" type="range" min="0" max="360" value="0">
    </p>

    <p>
      <label for="opacity">Opacity</label>
      <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
    </p>

    <p>
      <label for="invert">Invert</label>
      <input id="invert" name="invert" type="range" min="0" max="100" value="0">
    </p>

    <p>
      <label for="saturate">Saturate</label>
      <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
    </p>

    <p>
      <label for="sepia">Sepia</label>
      <input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
    </p>

    <input type="reset" form="imageEditor" id="reset" value="Reset" />

  </form>
</div>  

<!--container where image will be loaded-->
<div id="imageContainer" class="center">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg">
</div>

<p class="p">Demo by Vikas Lalwani. <a href="http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery" target="_blank">See article</a>.</p>

CSS代码：

/* General styles for the page */ 
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #D2D7D3;
  font-family: monospace;
  margin: 0 auto;
  width: 960px;
}

h1 {
  margin: 25px 0 25px 0;
  font-size: 40px;
  text-align: center;
}

hr {
  margin: 20px 0;
}

form {
  text-align: center;
}

/* Styles for  URL box */ 

.url-box {
  background-color: transparent;
  display: inline-block;
  height: 30px;
  border: none;
  border-bottom: 4px solid #b3b3b1;
  padding: 0px 0px 0px 20px;
  margin: 0px 0px;
  width: 50%;
  outline: none;
  text-align: center;
  font-size: 15px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

#go {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

/* Styles for image container*/

#imageContainer {
  border: 2px solid grey;
  border-radius: 10px;
  padding: 5px;
  width: 65%;
  max-width: 600px;
  float: left;
  margin: 20px;
}

#imageContainer img {
  border-radius: 10px;
  width: 100%;
}

/* Styles for sliders*/

.sliders {
  float: left;
  border: 2px solid grey;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
}

.sliders p {
  margin: 18px 0;
  vertical-align: middle;
}

.sliders label {
  display: inline-block;
  margin: 10px 0 0 0;
  width: 100px;
  font-size: 16px;
  color: #22313F;
  text-align: left;
  vertical-align: middle;
}

.sliders input {
  position: relative;
  margin: 10px 20px 0 10px;
  vertical-align: middle;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border-radius: 5px;
  /*required for proper track sizing in FF*/
  width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 7px;
  background: #ABB7B7;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4B77BE;
  margin-top: -6px;
  vertical-align: middle;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]:hover {
    cursor: pointer;
}


#reset {
  display: inline-block;
  height: 40px;
  width: 100px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
  margin: 0 0 10px 0;
}

.p {
  clear: both;
  text-align: center;
  padding:  40px 0 40px;
}

JQUERY DODE：

//on click of go(submit) button, addImage() will be called
$("#go").click(addImage);

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);


// editing image via css properties
function editImage() {
    var gs = $("#gs").val(); // grayscale
    var blur = $("#blur").val(); // blur
    var br = $("#br").val(); // brightness
    var ct = $("#ct").val(); // contrast
    var huer = $("#huer").val(); //hue-rotate
    var opacity = $("#opacity").val(); //opacity
    var invert = $("#invert").val(); //invert
    var saturate = $("#saturate").val(); //saturate
    var sepia = $("#sepia").val(); //sepia

    $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );

    $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
}

//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);

// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
    setTimeout(function() {
        editImage();
    }, 0);
});

// adding an image via url box
function addImage(e) {
    var imgUrl = $("#imgUrl").val();
    if (imgUrl.length) {
        $("#imageContainer img").attr("src", imgUrl);
    }
    e.preventDefault(); 
}

我不能瞄准的是使用cookie和jquery加载，保存或重置调整值！不知道怎么办？

修改

我需要一个基于这部分代码的例子：

$(document).ready(function(){
    function adjustments() {
        var br = $("#br").val(); // brightness
        var ct = $("#ct").val(); // contrast
        var opacity = $("#opacity").val(); //opacity
        var saturate = $("#saturate").val(); //saturate

        $("#page-wrap, #preloader").css("filter", 'brightness(' + br +
                                                  '%) contrast(' + ct +
                                                  '%) opacity(' + opacity +
                                                  '%) saturate(' + saturate +
                                                  '%) ');
        $("#page-wrap, #preloader").css("-webkit-filter", 'brightness(' + br +
                                                          '%) contrast(' + ct +
                                                          '%) opacity(' + opacity +
                                                          '%) saturate(' + saturate +
                                                          '%) ');
    }
    $("input[type=range]").change(adjustments).mousemove(adjustments);
    $('#adjustments-form').on('reset', function () {setTimeout(function() {adjustments();},0);});
});

Answer 1

您可以使用以下两个示例之一管理脚本中的Cookie（获取，添加，更新等）：

https://github.com/js-cookie/js-cookie

https://github.com/carhartl/jquery-cookie

然后简单地说：

检查页面加载时是否存在cookie：
如果cookie可用，则加载属性
如果cookie不存在 - 使用当前属性创建一个新cookie。

一个例子（使用jQuery cookie插件）

设置cookie并存储一些数据：

// prepare and store data
var props = {
    name:'John',
    age:'31'
};
$.cookie('_storeProperties', JSON.stringify(props) );

检索cookie并解析保存的数据：

var props = $.parseJSON( $.cookie('_storeProperties') );
// do something with the data..

另一种方法（我更喜欢）将使用localStorage。

您可以在以下链接中阅读有关localStorage的内容：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

编辑OP请求

这不是一个完整的代码，只是向您展示如何利用我在您自己的场景中解释的内容，自定义以满足您的需求：

function adjustments() {

    // creating an initial properties object
    var props = {
        br : $("#br").val(), // brightness
        ct : $("#ct").val(), // contrast
        opacity : $("#opacity").val(), //opacity
        saturate : $("#saturate").val(), //saturate
    };

    // try to fetch stored properties from a cookie
    var propsCookie = $.cookie('_storeProperties');

    // we have previous settings stored
    if(propsCookie){
        // load them
        props = $.parseJSON( propsCookie );
    }else{
        // no previous settings stored, lets store ours
        $.cookie('_storeProperties', JSON.stringify(props) );
    }

    // use the props object as: props.br , props.ct, etc..
    // your code
}

希望它有所帮助！

使用cookie

1 个答案: