利用wPaint插件实现web端对图片的绘制，涂鸦（思路解析加源码）

在B/S端实现对图片的在线涂鸦并保持涂鸦后的图片确实是存在难度的，这里我们选择wPaint插件，原因就是他是基于HTML5的canvas，所以兼容性很好。

一、实现思路

实现整个过程我们需要分为俩步：设置画布和保存图片。

1、设置画布：初始化wPaint对象，并且把我们的画布设置为我们需要涂鸦的图片。

1、保存图片：拿到我们绘制好的图片对象，这里是二进制流的数据传给后台保存即可。

二、源码实现

$.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

                    });

三、实现效果图

正在涂鸦

 

 

 

保存后的涂鸦照片

四、更多

这里有些步骤没有写清楚，就是如何把涂鸦的数据传到服务器进行保存？

如果你还有不了的地方，

如果你需要.NET版本的后台代码，

一起学习探讨吧。

如果你需要JAVA版本的后台代码，........

可以加入我们的基地，我们基地的地址是：450342630（QQ群号）