Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use CSS and JS to create a simple picture editor". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS filter

Let's first talk about filter.

First of all, let's explain filter. To implement filter in CSS, it is actually very simple, using a declaration similar to the following:

1. .example {

2. Filter: []

3.}

For example, if we add a little grayscale (grayscale) special effect to the picture, we can do this:

1. .example {

2. Filter: grayscale

3.}

Of course, for browser compatibility, we'd better write:

1. .example {

2.-webkit-filter: grayscale

3. Filter: grayscale

4.}

It should be noted that the unit of the attribute value of filter may be between 0 and 1, but some are not. For example, blur uses pixel 'px' as the unit, while hue-rotate uses angle deg as the basic unit.

1. .example {

2. Filter: blur (10px)

3.}

4. Example-2 {

5. Filter: hue-rotate (90deg)

6.}

But it's troublesome to use only one filter at a time, so CSS provides a more convenient form of writing, writing directly side by side:

1. .example {

2. Filter: grayscale (0.5) blur (10px)

3.}

This makes it possible to add multiple filter attributes to an element.

After briefly talking about filter, let's start creating a simple image editor.

Create a basic HTML file

Here we create an index.html, and the code is relatively simple:

1. Image Editor

2. Grayscale

3. Blur

4. Brightness

5. Contrast

6. Hue Rotate

7. Opacity

8. Invert

9. Saturate

10. Sepia

In this file, we introduced main.css and main.js,main.css actually play a role in some typesetting of the editor, and have no actual impact on the filter effect of the picture, what we do is an editor, so when the user changes the value of a certain filter, we can let the user see the effect in real time, so the code to achieve filter should be put in the main.js.

Every one of them.

The following

The input below the element is a property setting of filter, because we can use multiple filter to produce special effects on the picture at the same time, so the attribute value of each filter is set to an adjustable state.

The above index.html also states that at the top we provide an input box for the user to enter the URL of the image, and when the user clicks enter, we display the image in the editing area. The following simple js code is used:

1. Function addImage (e) {

Var imgUrl = $("# imgUrl") .val ()

3. If (imgUrl.length) {

4. $("# imageContainer img") .attr ("src", imgUrl)

5.}

6. E.preventDefault ()

7.}

8. / / on pressing return, addImage () will be called

9. $("# urlBox") .submit (addImage)

The above js code is also written into main.js. After users can add their own images, we can edit the pictures:

Every time the user slides the progress bar, we can show the effect to the user, so we listen to the user's mousemove event:

1. $("input [type=range]") .mousemove (editImage)

That is, every time the user moves the control bar, we execute the editImage function.

But this kind of experience may not be the best, because when the user's mouse leaves the control bar, we can also listen for the change event and leave the change to the editImage function, so we can write the above code like this:

1. Font size= "3" > $("input [type=range]") .mousemove (editImage) .change (editImage)

2. Copy the code and write the editImage function

3. Above, we hand over the mousemove and change events of input [type=range] to the editImage function, so let's write the function code of editImage:

4. Function editImage () {

Var gs = $("# gs") .val (); / / grayscale

6. Var blur = $("# blur") .val (); / / blur

7. Var br = $("# br") .val (); / / brightness

8. Var ct = $("# ct") .val (); / / contrast

9. Var huer = $("# huer") .val (); / / hue-rotate

10. Var opacity = $("# opacity") .val () / / opacity

11. Var invert = $("# invert") .val (); / / invert

12. Var saturate = $("# saturate") .val () / / saturate

13. Var sepia = $("# sepia"). Val (); / / sepia

14. $("# imageContainer img"). Css ("filter", 'grayscale (' + gs+)

15.'%) blur ('+ blur +

16.'px) brightness ('+ br +

17.'%) contrast ('+ ct +

18.'%) hue-rotate ('+ huer +

19. 'deg) opacity (' + opacity +

20.'%) invert ('+ invert +

21. '%) saturate (' + saturate +

twenty-two。 '%) sepia (' + sepia +'%')

23. ("# imageContainer img"). Css ("- webkit-filter", 'grayscale (' + gs+)

24. '%) blur (' + blur +

25. 'px) brightness (' + br +

twenty-six。 '%) contrast (' + ct +

twenty-seven。 '%) hue-rotate (' + huer +

twenty-eight。 'deg) opacity (' + opacity +

twenty-nine。 '%) invert (' + invert +

thirty。 '%) saturate (' + saturate +

thirty-one。 '%) sepia (' + sepia +'%')

thirty-two。 }

In fact, it's very simple. Every time a user slides the control bar, we get the corresponding value through a statement such as var gs = $("# gs"). Val ();, and then add the filter effect to the image directly through the css () method of Jquery, and I believe you can see that the second half of this function is compatible with the browser.

1. $("# imageContainer img") .css ("- webkit-filter",...)

2. Copy the code

3. This code actually implements an effect similar to the following in the img element

4.

5. [img=28,30] [/ img]

Finally, if you don't want to add some special effects to the picture, you can click reset and reset the image to its original state:

1.

2. $('# imageEditor'). On ('reset', function () {

3. SetTimeout (function () {

4. EditImage ()

5.}, 0)

6.})

What needs to be explained here is that the setTimeout function here is to show the effect of reset as quickly as possible, if written in the following form:

1. $('# imageEditor'). On ('reset', function () {

2. EditImage ()

3.})

At this point, the reset effect is actually a little delayed, and you can obviously see that it's not very fast while waiting.

When the browser opens index.html, you can see the corresponding adjustment effect. You can drag the control bar of some settings to see the effect.

This is the end of "how to create a simple picture editor with CSS and JS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.