What is canvas off-screen technology? How is the canvas Magnifier effect implemented?

This article brings you to the content of what is the canvas off-screen technology? How is the canvas Magnifier effect implemented? , there is a certain reference value, the need for friends can refer to, I hope you have some help.

Use canvasIn addition to implementing filters, you can also use off-screen technologyMagnifier function.

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:


 

 
  
 
   
Fine canvas -grained mouse response events: Slide in, slide out, click, and Release
 
   
Recalculate off-screen coordinates (see code comments for detailed formula calculation ideas)
 
   
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):