Canvas implements picture graffiti function (with code)

The content of this article is about realizing the image graffiti function on canvas (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Requirements

1. You need to annotate pictures and export them.

2. N multiple pictures need to be marked and finally saved at the same time.

3. Needs to be labeled based on polygon area data (area, color, name).

Corresponding solution

1. Use canvas to draw graffiti, circles, and rectangles, and finally generate image base64 encoding for uploading

2. Batch uploading a large number of pictures is time-consuming. In order to improve the user experience, we only implement circle and rectangle drawing, and finally save them as coordinates, and then draw them according to the coordinates the next time they are displayed.

3. The display of the polygon area is drawn based on the coordinate points, and the position where the name is displayed is the polygon centroid.

Code

Must be passed in parameters

• Picture path

url: string

• Drawing area width

width: string

• Drawing area height

height: string

Select whether the parameters passed in

• ## can be drawn, the default is true

canDraw: boolean

• Coordinate point information, if not passed in, it will not be drawn.

info: string

• Whether it can be drawn, the default is true

canDraw: boolean

• Drawing color, default red

lineColor: string

• Drawing pen width, default 2

lineWidth: number

• Drawing pen type, rec, circle, default rec

lineType: string

Methods that can be called

• Clear the canvas

clean()

• Return coordinate point information

getInfo()

Special instructions

• The canvas object cannot obtain coordinates. It is obtained through the coordinates of the parent element. Therefore, there cannot be too much positioning and nesting at the level above the parent element of the component, otherwise the drawing coordinates will be offset.

• Images with different domain names may have cross-domain problems. I have read a lot of information but there is no good solution. In the final project, I used the node service to create an interface for converting images to base64, and then Solved by drawing on canvas. It may not be applicable to other projects. If there is a better solution, please share it.

• Exporting coordinate point data can only export the coordinate points of regular patterns, because if there are too many coordinate points scribbled randomly, it will collapse (although I have not tried to what extent it will collapse). If If you have high-performance implementation methods, please share them.

• If after saving the graffiti and then requesting the image URL, the request cannot be made, it is because of the CDN cache problem. This can be solved by adding a random code after the image path.

The above is the detailed content of Canvas implements picture graffiti function (with code). For more information, please follow other related articles on the PHP Chinese website!