自己写的canvis图片打标，预览、生成模版的部分代码记录

前端部分代码

<extend name="Base/common"/>
<block name="style">
  <style>
.component {
	position: relative;
	/*background: url(http://tympanus.net/Tutorials/ImageResizeCropCanvas/img/gridme.png) repeat center center;*/
            /*  padding: 4em;*/
            border: 3px solid #49708a;
	max-width: 800px;
	max-height: 800px;
	/* Header */
            overflow: hidden;
	margin: 0 auto;
}
.related > a {
	width: calc(100% - 20px);
	max-width: 340px;
	border: 2px solid #49708a;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	margin: 20px 10px;
	padding: 25px;
}
.related a img {
	max-width: 100%;
	opacity: 0.8;
}
.related a:hover img,  .related a:active img {
	opacity: 1;
}
.related a h3 {
	margin: 0;
	padding: 0.5em 0 0.3em;
	max-width: 300px;
	/* Demo ad design */

            text-align: left;
	min-height: 60px;
}
.resize-container {
	position: relative;
	display: inline-block;
	cursor: move;
	margin: 0 auto;
}
.resize-container img {
	display: block;
}
.resize-container:hover img,  .resize-container:active img {
	outline: 2px dashed rgba(222, 60, 80, .9);
}
.resize-handle-ne,  .resize-handle-se,  .resize-handle-nw,  .resize-handle-sw {
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	z-index: 999;
}
.resize-handle-nw {
	top: -5px;
	left: -5px;
	cursor: nw-resize;
}
.resize-handle-sw {
	bottom: -5px;
	left: -5px;
	cursor: sw-resize;
}
.resize-handle-ne {
	top: -5px;
	right: -5px;
	cursor: ne-resize;
}
.resize-handle-se {
	bottom: -5px;
	right: -5px;
	cursor: se-resize;
}
.img-edit {
	position:relative
}
.img-edit-left {
	width:800px;
	padding:10px
}
.img-edit-right {
	padding:10px;
	vertical-align:top
}
.upload-text{ width:86px; height:50px; position:absolute; left:0; top:0; overflow:hidden}
</style>
</block>
<block name="breadcrumb">
<ul class="page-breadcrumb">
  <li> <a href="/">首页</a> <i class="fa fa-circle"></i> </li>
  <li> <a href="/">系统</a> <i class="fa fa-circle"></i> </li>
  <li> <span>图片打标制作</span> </li>
</ul>
</block>
<block name="body">
  <div class="row">
    <!--  <input type="hidden" id="edit_id">-->
    <div class="col-md-12">
      <div class="portlet box green">
        <div class="portlet-title">
          <div class="caption"> <i class="fa fa-comments"></i>{$bak_width}*{$bak_height}图片打标模板制作 </div>
        </div>
        <div class="portlet-body">
          <div class="table">
            <div class="row img-edit">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="810" class="img-edit-left"><div class="" style="text-align: center">
                      <div class="component" id="image_area" style="width:{$bak_width}px; height: {$bak_height}px;background-image: url('{$demo_image_url}');position: relative"> </div>
                    </div></td>
                  <td style="vertical-align:top" class="img-edit-right"><div class="form-group">
                      <div class="btn-group">
                        <button class="btn btn-info" data-toggle="modal" data-target="#myModal">添加图片 </button>
                      </div>
                      <div class="btn-group">
                        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal_text">添加文字</button>
                      </div>
                    </div>
                    <div class="form-group">
                      <table id="table" data-toggle="table"
                                           data-classes="table table-hover table-condensed order_list"
                                           data-mobile-responsive="true">
                        <thead>
                          <tr>
                            <th class="">标记ID</th>
                            <th class="">操作名称</th>
                            <th class="">别名</th>
                            <th class="">是否通用</th>
                            <th class="">操作</th>
                          </tr>
                        </thead>
                        <tbody id="action_log">
                        </tbody>
                      </table>
                    </div>
                    <div class="form-group"> 
                      <!--  <div class="btn-group">
                                        <a class="btn btn-primary" href="javascript:history.back(-1);">上一步</a>
                                    </div>-->
                      <div class="btn-group"> <a class="btn btn-danger" href="javascript:location.reload();">取消</a> </div>
                      <div class="btn-group">
                        <button class="btn btn-primary" onclick="save_actions()">下一步</button>
                      </div>
                    </div></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" role="dialog" id="myModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content form">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">编辑图片</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="up_form">
            <div class="form-group">
              <label class="col-sm-3 control-label">上传图片</label>
              <div class="col-sm-9">
                <div class="no-padding" style="width:300px;"> {:hook('Uploader',array('field'=>'file_path','content'=>$file_path,'type'=>'webuploader','config'=>'JD_PIC_EDITOR_UPLOAD','num_limit'=>'10','duplicate'=>true))} </div>
                  <font style="color: red">（图片大小不得超过50kb）</font>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">设置透明度</label>
              <div class="col-sm-9">
                <div class="no-padding" style="height:45px;width:300px;">
                  <p>
                    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
                  </p>
                  <div id="slider"></div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="up_ajax">提交</button>
        </div>
      </div>
      <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
  </div>
  <!-- /.modal -->
  
  <div class="modal fade" role="dialog" id="myModal_text" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content form">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel1">添加文字</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="up_form_text">
            <div class="form-group">
              <label class="col-sm-3 control-label">添加文字</label>
              <div class="col-sm-9">
                <div class="no-padding" style="height:45px;width:300px;">
                  <input type="text" name="water_text" id="water_text" onblur="set_font_style()">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">文字颜色</label>
              <div class="col-sm-9">
                <div class="no-padding" style="height:45px;width:300px;">
                  <input id="font_color" name="font_color" type="text" onblur="set_font_style()">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">文字大小</label>
              <div class="col-sm-9">
                <div class="no-padding" style="height:45px;width:300px;">
                  <input id="font_size" name="font_size" type="text" onblur="set_font_style()">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">是否加粗</label>
              <div class="col-sm-9">
                <div class="no-padding" style="height:45px;width:300px;">
                  <select id="font_weight" name="font_weight" onchange="set_font_style()">
                    <option value="">否</option>
                    <option value="bold">是</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">字体</label>
              <div class="col-sm-3">
                <div class="no-padding" style="height:45px;">
                  <select id="font_style" name="font_style" style="width:140px">
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="no-padding" style="height:45px; position: relative"><div class="upload-text"> {:hook('Uploader',array('field'=>'file_path_font','content'=>$file_path,'type'=>'webuploader','config'=>'JD_EDITOR_FONT'))} </div></div>
                <font color="red">(如有需要请上传新字体！)</font> </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">预览</label>
              <div class="col-sm-9"> <font id="font_demo"></font> </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="up_text">添加</button>
        </div>
      </div>
      <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
  </div>
  <!-- /.modal -->
    <!--图片预览-->

    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="demo_preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">效果预览</h4>
                </div>
                <div class="modal-body" style="text-align: center;">
                    <img id="demo_img_area">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="save_action_to_server()" >确认提交</button>
                </div>
            </div>
        </div>
    </div>

</block>
<block name="script"> 
  <script src="__ASSETS__/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
  <link href="__ASSETS__/global/plugins/bootstrap-colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="__JS__/bootstrap/bootstrap-table-develop/dist/bootstrap-table.min.css">
  <script src="__JS__/bootstrap/bootstrap-table-develop/dist/bootstrap-table.min.js"></script> 
  <script src="__JS__/bootstrap/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script> 
  <script src="__ASSETS__/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
            type="text/javascript"></script>
  <link href="__ASSETS__/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet" media="screen">
  <script type="text/javascript"
            src="__ASSETS__/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
            charset="UTF-8"></script> 
  <script src="__ASSETS__/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> 
  <script src="__ASSETS__/global/plugins/jquery-ui/jquery-ui.min.js"></script>
  <link href="__ASSETS__/global/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
        var bak_width = '{$bak_width}';
        var bak_height = '{$bak_height}';
        var demo_img = new Image();
        demo_img.src='data:image/jpeg;base64,'+'{$demo_image_base_64}';//生成的效果预览图的底图
        $(document).ready(function () {
            $("#slider").slider({
                range: "max",
                min: 1,
                max: 100,
                value: 100,
                slide: function (event, ui) {
                    $("#amount").val(ui.value + "%");
                }
            });
            $("#amount").val($("#slider").slider("value") + "%");
            $("#up_ajax").click(function () {
                var form = $('#up_form');

                    $.ajax({
                        type: "POST",
                        async: false,
                        url: "{:U('create_water_mark')}",
                        data: form.serialize(),
                        success: function (data) {
                            if (data.status) {
                                var img = "<img id=" + data.pic_id + " class='resize-image' style='position: absolute' src=" + data.basedata + " onmousedown='choose_pic(this)'>";//上传的图片拼接img标签插入到容器中
                                $('#image_area').append(img);
                                resizeableImage($('#' + data.pic_id));
                                set_imgae_alpha('#' + data.pic_id);
                                add_action_log('#' + data.pic_id, "img");
                                $.messager.popup('<span style="color: red;">上传图片成功</span>');
                                $('#myModal').modal('hide')
                            } else {
                                App.unblockUI('#myModal');
                                $.messager.popup('<span style="color: red;">' + data.info + '</span>');
                            }
                        },
                        error: function () {
                            App.unblockUI('#myModal');
                            $.messager.popup('<span style="color: red;">系统出错，请稍后再试</span>');
                        }
                    });


            });

            $("#up_text").click(function () {
                var form = $('#up_form_text');
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "{:U('create_water_text')}",
                    data: form.serialize(),
                    success: function (data) {
                        if (data.status) {
                            var img = "<img id=" + data.pic_id + " class='resize-image' src=" + data.basedata + " onmousedown='choose_pic(this)'>";//上传的图片拼接img标签插入到容器中
                            $('#image_area').append(img);
                            resizeableImage($('#' + data.pic_id));
                            add_action_log('#' + data.pic_id, "text");
                            $.messager.popup('<span style="color: red;">添加文字成功!</span>');
                            $('#myModal_text').modal('hide')
                        } else {
                            App.unblockUI('#myModal');
                            $.messager.popup('<span style="color: red;">' + data.info + '</span>');
                        }
                    },
                    error: function () {
                        App.unblockUI('#myModal');
                        $.messager.popup('<span style="color: red;">系统出错，请稍后再试</span>');
                    }
                });
            });
        });

        $('.modal ,.fade').on('show.bs.modal', function (e) {
            uploader.reset();
            //console.log(uploader.getStats());
            ajax_get_fonts();
            $('.file-item,.thumbnail,.upload-state-done').remove();
            setTimeout(function () {
                $(".webuploader-container").find('div').each(function () {
                    if (!$(this).hasClass('webuploader-pick')) {
                        $(this).height('50px').width('200px');
                    }
                });
            }, 1000);
        });

        //颜色选择器配置
        $("#font_color").colorpicker({
            format:'rgb' ,
            fillcolor:true
        });

        //设置字体样式属性
        function set_font_style() {
            $('#font_demo').text($('#water_text').val());
            if($('#font_color').val()){
                $('#font_demo').css('color',$('#font_color').val());
            }

            $('#font_demo').css('font-size',$('#font_size').val()+"px");
            $('#font_demo').css('font-weight',$('#font_weight').val());
        }
        
        
        //图片处理js
        var resizeableImage = function (image_target) {
            // Some variable and settings
            var $container,
                    orig_src = new Image(),
                    image_target = $(image_target).get(0),
                    event_state = {},
                    constrain = false,
                    min_width = 60, // Change as required
                    min_height = 60,
                    max_width = bak_width, // Change as required
                    max_height = bak_height,
                    resize_canvas = document.createElement('canvas');

            init = function () {

                // When resizing, we will always use this copy of the original as the base
                orig_src.src = image_target.src;
                var parents_id = $(image_target).parents().eq(0).attr('id');
                //console.log(parents_id,parents_id=="image_area");
                if (parents_id == "image_area") {
                    //判断父元素，防止重复创建容器
                    $(image_target).wrap('<div class="resize-container"></div>')
                            .before('<span class="resize-handle resize-handle-nw"></span>')
                            .before('<span class="resize-handle resize-handle-ne"></span>')
                            .after('<span class="resize-handle resize-handle-se"></span>')
                            .after('<span class="resize-handle resize-handle-sw"></span>');

                }
                // Wrap the image with the container and add resize handles

                // Assign the container to a variable
                $container = $(image_target).parent('.resize-container');

                // Add events
                //暂时取消拖动改变大小的功能。
             //   $container.on('mousedown touchstart', '.resize-handle', startResize);
                $container.on('mousedown touchstart', 'img', startMoving);
            };

            startResize = function (e) {
                e.preventDefault();
                e.stopPropagation();
                saveEventState(e);
                $(document).on('mousemove touchmove', resizing);
                $(document).on('mouseup touchend', endResize);
            };

            endResize = function (e) {
                e.preventDefault();
                $(document).off('mouseup touchend', endResize);
                $(document).off('mousemove touchmove', resizing);
            };

            saveEventState = function (e) {
                // Save the initial event details and container state
                event_state.container_width = $container.width();
                event_state.container_height = $container.height();
                event_state.container_left = $container.offset().left;
                event_state.container_top = $container.offset().top;
                event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
                event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

                // This is a fix for mobile safari
                // For some reason it does not allow a direct copy of the touches property
                if (typeof e.originalEvent.touches !== 'undefined') {
                    event_state.touches = [];
                    $.each(e.originalEvent.touches, function (i, ob) {
                        event_state.touches[i] = {};
                        event_state.touches[i].clientX = 0 + ob.clientX;
                        event_state.touches[i].clientY = 0 + ob.clientY;
                    });
                }
                event_state.evnt = e;
            };

            resizing = function (e) {
                var mouse = {},
                        width, height, left, top, offset = $container.offset();
                mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
                mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

                // Position image differently depending on the corner dragged and constraints
                if ($(event_state.evnt.target).hasClass('resize-handle-se')) {
                    width = mouse.x - event_state.container_left;
                    height = mouse.y - event_state.container_top;
                    left = event_state.container_left;
                    top = event_state.container_top;
                } else if ($(event_state.evnt.target).hasClass('resize-handle-sw')) {
                    width = event_state.container_width - (mouse.x - event_state.container_left);
                    height = mouse.y - event_state.container_top;
                    left = mouse.x;
                    top = event_state.container_top;
                } else if ($(event_state.evnt.target).hasClass('resize-handle-nw')) {
                    width = event_state.container_width - (mouse.x - event_state.container_left);
                    height = event_state.container_height - (mouse.y - event_state.container_top);
                    left = mouse.x;
                    top = mouse.y;
                    if (constrain || e.shiftKey) {
                        top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
                    }
                } else if ($(event_state.evnt.target).hasClass('resize-handle-ne')) {
                    width = mouse.x - event_state.container_left;
                    height = event_state.container_height - (mouse.y - event_state.container_top);
                    left = event_state.container_left;
                    top = mouse.y;
                    if (constrain || e.shiftKey) {
                        top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
                    }
                }

                // Optionally maintain aspect ratio
                if (constrain || e.shiftKey) {
                    height = width / orig_src.width * orig_src.height;
                }

                if (width > min_width && height > min_height && width < max_width && height < max_height) {
                    // To improve performance you might limit how often resizeImage() is called
                    resizeImage(width, height);
                    // Without this Firefox will not re-calculate the the image dimensions until drag end
                    $container.offset({
                        'left': left,
                        'top': top
                    });
                }
            }

            resizeImage = function (width, height) {
                resize_canvas.width = width;
                resize_canvas.height = height;
                resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
                $(image_target).attr('src', resize_canvas.toDataURL("image/png"));
            };

            startMoving = function (e) {
                e.preventDefault();
                e.stopPropagation();
                saveEventState(e);
                $(document).on('mousemove touchmove', moving);
                $(document).on('mouseup touchend', endMoving);
            };

            endMoving = function (e) {
                e.preventDefault();
                $(document).off('mouseup touchend', endMoving);
                $(document).off('mousemove touchmove', moving);
            };

            moving = function (e) {
                var mouse = {},
                        touches;
                e.preventDefault();
                e.stopPropagation();

                touches = e.originalEvent.touches;

                mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
                mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
                $container.offset({
                    'left': mouse.x - (event_state.mouse_x - event_state.container_left),
                    'top': mouse.y - (event_state.mouse_y - event_state.container_top)
                });
                // Watch for pinch zoom gesture while moving
                if (event_state.touches && event_state.touches.length > 1 && touches.length > 1) {
                    var width = event_state.container_width,
                            height = event_state.container_height;
                    var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
                    a = a * a;
                    var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
                    b = b * b;
                    var dist1 = Math.sqrt(a + b);

                    a = e.originalEvent.touches[0].clientX - touches[1].clientX;
                    a = a * a;
                    b = e.originalEvent.touches[0].clientY - touches[1].clientY;
                    b = b * b;
                    var dist2 = Math.sqrt(a + b);

                    var ratio = dist2 / dist1;

                    width = width * ratio;
                    height = height * ratio;
                    // To improve performance you might limit how often resizeImage() is called
                    resizeImage(width, height);
                }
            };
            init();

        };
        //切换图片操作
        function choose_pic(obj) {
            resizeableImage($('#' + $(obj).attr('id')));
        }
        //设置图片透明度
        function set_imgae_alpha(id) {
            var alpha_val = $("#amount").val().replace(/%/, '');
            alpha_val = parseFloat(alpha_val / 100);
            $(id).css('opacity', alpha_val);


        }

        //生成完整的水印图片
        function save_actions() {
            //打标效果图预览图生成
            var demo_pic = document.createElement('canvas');
            demo_pic.width = bak_width;
            demo_pic.height = bak_height;
            var demo_context = demo_pic.getContext('2d');
            //把底图画入画布，以便生成效果图
            demo_context.drawImage(demo_img,0,0);

            $(".resize-image").each(function () {
                var save_canvas = document.createElement('canvas');
                save_canvas.width = bak_width;
                save_canvas.height = bak_height;
                var save_context = save_canvas.getContext('2d');
                var $obj = $(this);
                $obj = $obj[0];//jquery对象转成dom对象
                //把添加的调整好的图片画到画布中
                save_context.globalAlpha = $(this).css('opacity');//设置透明度
                save_context.drawImage(this, 0, 0, this.width, this.height, $obj.offsetParent.offsetLeft, $obj.offsetParent.offsetTop, this.width, this.height);

                //把添加的调整好的图片画入预览效果图中
                demo_context.globalAlpha = $(this).css('opacity');//设置透明度
                demo_context.drawImage(this, 0, 0, this.width, this.height, $obj.offsetParent.offsetLeft, $obj.offsetParent.offsetTop, this.width, this.height);

                action_log[$(this).attr('id')].img_data = save_canvas.toDataURL("image/png");
                action_log[$(this).attr('id')].p_x = $obj.offsetParent.offsetLeft;
                action_log[$(this).attr('id')].p_y =  $obj.offsetParent.offsetTop;
            });

            //模态框展示预览图
            $('#demo_img_area').attr('src',demo_pic.toDataURL("image/png"));
            $('#demo_preview').modal('show');


            //
        }

        function save_action_to_server() {
            var test = JSON.stringify(action_log);
            var task_id = '{$task_id}';
            var goods_sn ='{$goods_sn}';
            var need_next = '{$need_next}';
            var database = '{$database}'
            $.post("{:U('save_actions')}", {'action_log': test, 'task_id': task_id,'goods_sn':goods_sn,'need_next':need_next,'database':database}, function (data) {
                if (data.status) {
                    $.messager.popup('<span style="color: red;">提交成功！</span>');
                    setTimeout(function () {
                        location.href = data.url;
                    },1500);
                }else{
                    $.messager.popup('<span style="color: red;">'+data.info+'</span>');
                }
            });
        }

        //获取字体下拉列表
        function ajax_get_fonts() {
            $.post("{:U('ajax_get_fonts')}",'',function (html) {
                $('#font_style').empty();
                $('#font_style').append(html);
            })
        }


        function get_action_log() {
            $.post("{:U('get_action_log')}",'',function (html) {
                $('#action_log').empty();
                $('#action_log').append(html);
            })
        }


        //图片&文字添加记录数组
        var action_log = new Object();
        var img_count = 1;
        var text_count = 1;
        function add_action_log(obj,type) {
            var $obj = $(obj);
            $obj = $obj[0];//jquery对象转成dom对象
            switch (type){
                case "img":
                    var img_attr = new Object();
                    img_attr.id =$obj.id;
                    img_attr.type = type;
                    img_attr.img_type = '{$bak_type}';
                    img_attr.task_id = '{$task_id}';
                    img_attr.action_name = "图片"+img_count;
                    img_attr.alias = "图片"+img_count;
                    img_attr.is_universal = "1";
                    img_attr.p_x = $obj.offsetParent.offsetLeft;
                    img_attr.p_y = $obj.offsetParent.offsetTop;
                    img_attr.p_w = $obj.width;
                    img_attr.p_h = $obj.height;
                    img_attr.opacity =$(obj).css('opacity');
                    action_log[$obj.id]=img_attr;
                    img_count = img_count + 1;
                    set_log_info(img_attr);
                    break;
                case "text":
                    var text_attr = new Object();
                    text_attr.id =$obj.id;
                    text_attr.type = type;
                    text_attr.img_type =  '{$bak_type}';
                    text_attr.task_id = '{$task_id}';
                    if (text_attr.img_type == 1) {
                        text_attr.alias = "800*800文字" + text_count;
                    } else {
                        text_attr.alias = "624*800文字" + text_count;
                    }
                    text_attr.action_name = "文字"+text_count;
                    text_attr.is_universal = "1";
                    text_attr.p_x = $obj.offsetParent.offsetLeft;
                    text_attr.p_y = $obj.offsetParent.offsetTop;
                    var font_style = $("#WU_FILE_0 .info").text();
                    if (font_style == "") {
                        font_style = $('#font_style').val();
                    }
                    text_attr.font_name = font_style;
                    text_attr.rgb = $('#font_color').val();
                    text_attr.text = $('#water_text').val();
                    text_attr.size = $('#font_size').val();
                    text_attr.bold = $('#font_weight').val();
                    action_log[$obj.id]=text_attr;
                    text_count = text_count + 1;
                    set_log_info(text_attr);
                    break;
            }
        }

        function set_log_info(attr) {
            //编辑有问题，暂时不添加
            var button = "<button class='btn btn-info btn-radius' data-toggle='modal' data-target='#myModal' onclick='edit_img_action(" + attr.id + ")'>编辑</button>";
            if(attr.type == "text"){
                button = "<button class='btn btn-info' data-toggle='modal' data-target='#myModal_text' onclick='edit_text_action(" + attr.id + ")'>编辑</button>";
            }
            var universal_html = "<select onchange='edit_universal("+attr.id+",this)'><option value='1'>是</option><option value='2'>否</option></select>";

            var td = "<tr class='tr_action_log' id='tr_" + attr.id + "'>" +
                    "<td>" + attr.id + "</td>" +
                    "<td>" + attr.action_name + "</td>" +
                    "<td><input type='text' value='"+attr.alias+"' onblur='edit_text_action("+attr.id+",this)'></td>" +
                    "<td>" + universal_html + "</td>" +
                    "<td>" +
                    "<button class='btn btn-danger' onclick='del_action(" + attr.id + ")'>删除</button>" +
                    "</td>" +
                    "</tr>";
            if ($(".tr_action_log").length == 0) {
                $('#action_log').empty();
            }
            $('#action_log').append(td);
        }

        function edit_universal(attr_id,obj) {
            action_log[attr_id].is_universal = $(obj).val();
           // console.log(action_log);
        }

        //编辑图片操作
        function edit_img_action(attr_id) {
            $("#edit_id").val(attr_id);
        }

        //编辑文字操作
        function edit_text_action(attr_id,obj) {
            action_log[attr_id].alias =$(obj).val();
            $.messager.popup('<span style="color: red;">修改成功！</span>');
        }

        //删除添加的图片或者文字
        function del_action(attr_id) {
            $("#"+attr_id).remove();
            $("#tr_"+attr_id).remove();
            delete action_log[attr_id];
        }

        //浮窗确认效果图
        function confirm_set_pic() {

        }


    </script> 
</block>