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.
canvas
the 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:
- Implementing Watermarks and center scaling
- 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):
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.