Use wPaint plug-in to realize web-side drawing and graffiti of pictures (thought analysis plus source code)

It is indeed difficult to implement online graffiti on the B/S side and keep the pictures after graffiti. Here we choose the wPaint plug- in because it is based on HTML5 canvas, so the compatibility is very good.

1. Realization ideas

We need to implement the whole process in two steps: setting the canvas and saving the picture.

1. Set the canvas: initialize the wPaint object, and set our canvas to the picture we need to paint.

1. Save the picture: get the picture object we have drawn, here is the binary stream data and transfer it to the background to save.

Second, source code implementation

$.fn.wPaint.defaults = {
        path: '../../../../Scripts/Component/js/wPaint/',
        theme: 'standard classic',
        autoScaleImage: true,
        autoCenterImage: true,
        menuHandle: true,
        menuOrientation: 'horizontal',
        menuOffsetLeft: 5,
        menuOffsetTop: 280,
        bg: null,
        image: null,
        imageStretch: false,
        onShapeDown: null,
        onShapeMove: null,
        onShapeUp: null
    };

     var url = '../../../../Content/img/AnalysisPic/' + handle + data.F_pictureName;
                    $('#img').wPaint({
                        image: url,
                        menuOffsetLeft: -35,
                        menuOffsetTop: -50,
                        mode: 'Pencil',  // set mode
                        lineWidth: '2',       // starting line width
                        fillStyle: 'transparent', // starting fill style
                        strokeStyle: '#FF0000'  // start stroke style

                    });

Three, the realization of the renderings

Graffiti

 

 

 

Saved graffiti photo

Four, more

Some steps are not clearly written here, just how to transfer the Tuya data to the server for storage?

If you can’t find anything,

If you need the background code of the .NET version,

Let's study and discuss together.

If you need the background code of the JAVA version,...

You can join our base, the address of our base is: 450342630 (QQ group number)