Canvas off-screen technology and Magnifier implementation

The picture shown in the tutorial is a github warehouse image, a friend with a slow speed, please go to >>> canvas off screen technology and Magnifier implementation.

For more discussion or error submissions, please also visit.

canvasthe use of the off-screen technology Magnifier function is possible in addition to the filter implementation.

In order to facilitate the explanation, this article is divided into 2 application parts:

1. Implementing Watermarks and center scaling
2. Implement Magnifier

1. What is off-screen technology?

Canvas Learning and filter implementations introduce drawImage interfaces. In addition to drawing an image, this interface can also: canvas draw an object onto another canvas object . This is the off-screen technology.

2. Implement Watermark and Center zoom

In the code, there are two canvas labels. are visible and not visible, respectively. The Context object on the Invisible canvas object is where we place the image watermark.

For more details, see the code Comment:

<! DOCTYPE html>

The implementation effect is as follows:

You can zoom in and out of the image by dragging slider. Then right-click to save the image. After saving the image, there is already a watermark, as shown in:

3. Implement Magnifier

On the basis of the above-mentioned center scaling, it is necessary to note the following 2 parts to realize Magnifier:

1. Fine canvas -grained mouse response events: Slide in, slide out, click, and Release
2. Recalculate off-screen coordinates (see code comments for detailed formula calculation ideas)
3. Recalculate the coordinates of the mouse relative to the canvas label (see code Comment for a detailed formula calculation idea)

The code is as follows:

<!  DOCTYPE html>

The magnifying glass effect is shown (the area marked by the Red Pen is our square magnifier):

Welcome into the group:857989948 . IT technology in-depth communication and sharing, including but not limited to: website production, operations, UI design, algorithmic analysis, big data, artificial intelligence and so on. This group has the depth, the attitude of technical exchanges, welcome to record knowledge of your participation.