【散分】Asp.Net+flash实现的保存在线涂鸦jquery插件

Go 旅城通票 2013-02-18 11:15:09

加精

　　更新：增加图片的缩放，绘制分隔线。字数限制，没更新这里的代码

　　好久没写什么东东了，将年前一个同学遇到的问题改了下，做了个简易的涂鸦板

　　Asp.Net+flash+jquery实现的在线涂鸦插件，通过将涂鸦数据发送到ashx页面，ashx获取到数据后绘制图片并保存涂鸦图片。

　　本示例基于謾軻（Manction），http://manction.51.com简易涂鸦板修改，增加了重做，画笔颜色，大小和透明度，保存功能。

　　flash可以加载指定的站内图片进行涂鸦，保存后绘制的数据和原始图片合并生成新涂鸦图片

　　效果如下，比较简陋，嘿嘿

　　示例，直接运行页面中的源代码就行了

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="/js/jquery.js"></script>

<title>Asp.Net+flash+jquery.TY.js涂鸦插件，可保存涂鸦图片</title>

<meta content="在线涂鸦，保存涂鸦图片，asp.net保存涂鸦，flash涂鸦" name="Keywords"/>

<meta content="Asp.Net+flash+jquery实现的在线涂鸦插件,通过将涂鸦数据发送到ashx页面，通过asp.net绘制图片。" name="description"/>

<script type="text/javascript">

    (function ($) {

        //cfg配置说明，JSON对象

        //swf：涂鸦swf文件路径，默认值为：ty.swf

        //height：高度，默认值为400，高度小于400会隐藏flash起来，最终生成的涂鸦图片高度基于这个值。如果指定img将会忽略此配置，依据原始图片尺寸

        //width：宽度，默认值：650。注意：这里的宽度是最终生成的图片宽度，不会改变UI的宽度，因为小于650会导致菜单显示不全。最终生成的涂鸦图片高度基于这个值。如果指定img将会忽略此配置，依据原始图片尺寸

        //img：flash要加载的图片，绘制的涂鸦信息和此图片合成，默认不加载图片。只能加载站内图片，站外图片动态页没有添加图片下载功能

        //url：绘图的涂鸦数据提交到的页面，如果要保存图片一定要传递此配置，否则无法保存图片，不保存图片时url，success和error回调可以不传递

        //success：保存涂鸦时成功的回调函数，回调中的this为容器div对象，参数为返回的json对象

        //error：保存涂鸦失败时回调函数，回调中this为容器div对象，参数为返回的json对象

        //data：ajax提交时附加的参数，JSON对象，如数据库中对应ID什么的

        //debug：如果为true，则输出xhr返回的responseText信息

        //ext：保存图片扩展名，默认为jpg，不带.

        $.fn.TY = function (cfg) {

            var cbPrefix = 'doPost', cbMark = 'mark', tm, ie = !!document.all;

            function FlashVars(config) {

                var s = '';

                if (config.cbName) s += '&cb=' + config.cbName;

                if (config.markName) s += '&mk=' + config.markName;

                if (config.img) s += '&img=' + config.img;

                return s == '' ? '' : s.substring(1);

            }

            return this.each(function () {

                var me = $(this), config = $.extend({ swf: 'ty.swf', height: 400, width: 650, ext: 'jpg' }, cfg);

                tm = new Date().getTime();

                if (config.url) { //需要保存涂鸦图片则注册flash调用的javascript方法

                    config.cbName = cbPrefix + tm;

                    window[config.cbName] = function (drawdata) {//drawdata，字符串，结构：[{data:[[x,y],[x,y]...],lw:线条宽,color:线条颜色,alpha:线条透明度}.....]

                        if (!drawdata) alert('没有绘制涂鸦信息！');

                        else {

                            window[config.markName]('正在保存图片...');

                            var data = cfg.data ? cfg.data : {};

                            data.w = config.width; data.h = config.height; data.ext = config.ext;

                            if (config.img) data.img = config.img; //这个也可以不传，可以通过读取数据库获取到原始图片地址什么的，但是data对象要配置有记录的ID

                            data.drawdata = drawdata;

                            $.ajax({ url: config.url, type: 'POST', data: data, complete: function (xhr) {

                                window[config.markName]('none');

                                var r;

                                if (200 == xhr.status) try { r = eval('(' + xhr.responseText + ')'); } catch (ex) { r = { success: false, err: '返回的JSON格式不正确！' + (config.debug ? '\n\n' + xhr.responseText : '') }; }

                                else r = { success: false, err: 404 == xhr.status ? '动态页路径不对！' : '动态页发生错误！' + (config.debug ? '\n\n' + xhr.responseText : '') };

                                if (r.success) {

                                    if (config.success) config.success.call(me.get(0), r);

                                }

                                else if (config.error) config.error.call(me.get(0), r);

                            }

                            });

                        }

                    }

                }

                if (config.img || cfg.url) {

                    config.markName = cbMark + tm;

                    window[config.markName] = function (display) {

                        if (display == 'none') me.find('div').hide();

                        else { me.find('div:last').html(display); me.find('div').show(); }

                    }

                }

                me.css({ width: 650, height: config.height, overflow: 'hidden', position: 'relative', border: 'solid 1px #000000' }).append(

                ie ? '<object id="swf' + tm + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="650px" height="400px">'

                + '<param name="src" value="' + config.swf + '"><param name="FlashVars" value="' + FlashVars(config) + '"><param name="wmode" value="transparent"></object>'

                : '<embed width="650px" height="400px" id="swf' + tm + '" type="application/x-shockwave-flash" src="' + config.swf + '?' + FlashVars(config) + '" wmode="transparent"/>');

                if (config.img || cfg.url) {

                    me.append('<div style="background:#000000;' + (config.img ? '' : 'display:none;') + 'filter:alpha(opacity:50);opacity:.5;width:100%;height:100%;position:absolute;left:0px;height:100%;top:0px;"></div>');

                    me.append('<div style="position:absolute;left:43%;top:45%;color:#ffffff;' + (config.img ? '' : 'display:none;') + '">正在加载加载...</div>');

                }

            });

        };

    })(jQuery);

    window.onload=function () {

        $('#dvTY').TY({

            height: 300,

            img: '/imgdesign/ty/123.jpg',

            swf: '/imgdesign/ty/ty.swf',

            url: '/imgdesign/ty/save.ashx',

            data: { id: 123 }, //附加数据

            debug: true,

            success: function (d) {

                alert('涂鸦保存成功！');

                $('#dvRst').html('<a href="/imgdesign/ty/' + d.fn + '" target="_blank">点击查看图片</a>');

            },

            error: function (d) {

                alert(d.err);

            }

        });

    };

</script>

</head>

<body>

<div id="dvTY"></div>

<div id="dvRst"></div>

</body>

</html>

save.ashx

<%@ WebHandler Language="C#" Class="save" %>

using System;

using System.Web;

using System.Drawing;

using Newtonsoft.Json;

using System.Collections.Generic;

using System.IO;

using System.Text.RegularExpressions;

public class save : IHttpHandler {

    //drawdata结构：[{data:[[x,y],[x,y]...],lw:线条宽,color:线条颜色,alpha:线条透明度}.....]

    //每条线的信息

    public class DrawData

    {

        private List<int[]> _data;

        private int _lw;

        private byte _alpha;

        private string _color;

        /// <summary>

        /// 线条信息

        /// </summary>

        public List<int[]> data { get { return _data; } set { _data = value; } }

        /// <summary>

        /// 画笔宽

        /// </summary>

        public int lw { get { return _lw; } set { _lw = value; } }

        /// <summary>

        /// 画笔透明度，C#下是0~255，需要转换一下

        /// </summary>

        public byte alpha { get { return (byte)Math.Floor(_alpha * 2.55); } set { _alpha = value; } }

        /// <summary>

        /// 画笔颜色

        /// </summary>

        public string color { get { return _color; } set { _color = value; } }

    }

    /// <summary>

    /// 线条数组转换为顶点数组

    /// </summary>

    /// <param name="data">线条数据</param>

    /// <param name="IsImg">绘制在图片上，不在25~h+25范围内的数据去掉</param>

    /// <param name="h">图片高</param>

    /// <param name="w">图片宽</param>

    /// <returns></returns>

    protected Point[] GetPoints(List<int[]> data, bool IsImg, int h, int w)

    {

        int top = IsImg?25:0, bottom = top + h;

        List<Point> points = new List<Point>();

        foreach (int[] d in data)

        {

            if ((IsImg && d[0] < w && d[1] >= top && d[1] <= bottom) || (!IsImg && d[0] < w && d[1] < h))

                points.Add(new Point(d[0], d[1]-top));//注意y要减去top当配置了img时，应为img加载位置离顶部25px的位置

        }

        return points.ToArray();

    }

    public void ProcessRequest(HttpContext context)

    {

        string img = context.Request.Form["img"], w = context.Request.Form["w"], h = context.Request.Form["h"]

            , drawdata = context.Request.Form["drawdata"]

            , fn = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + context.Request.Form["ext"];//新文件名

        Regex rxInt = new Regex(@"^\d+$", RegexOptions.Compiled);

        List<DrawData> data = (List<DrawData>)JsonConvert.DeserializeObject(drawdata, typeof(List<DrawData>));

        Bitmap bm;

        bool IsImg=false;

        int intW, intH;

        if (!string.IsNullOrEmpty(img) && File.Exists(context.Server.MapPath(img))){//存在图片

            bm = new Bitmap(context.Server.MapPath(img));

            IsImg=true;

            intW = bm.Width;

            intH = bm.Height;

        }

        else

        {

            intW = rxInt.IsMatch(w) ? int.Parse(w) : 650;

            intH = rxInt.IsMatch(h) ? int.Parse(h) : 400;

            bm = new Bitmap(intW, intH);

        }

        Color color = Color.White;

        using (Graphics g = Graphics.FromImage(bm))

        {

            foreach (DrawData d in data)

            {

                color = Color.FromArgb(d.alpha, ColorTranslator.FromHtml("#" + d.color));

                using (Pen pen = new Pen(color, d.lw))

                {

                    g.DrawLines(pen, GetPoints(d.data, IsImg, intH, intW));

                }

            }

        }

        bm.Save(context.Server.MapPath(fn));

        bm.Dispose();

        context.Response.Write("{success:true,fn:'" + fn + "'}");

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

}