$(document).ready(function(){ //var imgsrc = "media/1517533995690XZB2018RJYYB01021_1.jpg"; var imgsrc = $(".imgsview img:first").attr("src"); var canvasWidth = $(".imgsview img:first").get(0).naturalWidth/3; var canvasHeight = $(".imgsview img:first").get(0).naturalHeight/3; //alert(canvasWidth); //alert(canvasHeight); $("#pureCanvas").attr("data-width"); $("#pureCanvas").attr("data-height"); //检测按键 var keyCode = null; var cailiao_flag = false; //document.onkeydown=function(event){ // var e = event || window.event || arguments.callee.caller.arguments[0]; // keyCode = e.keyCode; //} //document.onkeyup=function(event){ // var e = event || window.event || arguments.callee.caller.arguments[0]; // keyCode = null; //} document.addEventListener("keydown",function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; keyCode = e.keyCode; }); document.addEventListener("keyup",function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; keyCode = e.keyCode; keyCode = null; }); // 切割出的图片可切割 $("#paperpiecesul").sortable(); // $(".clean_ul").each(function(){ // $(this).sortable(); // }); //放大缩小滑块 $( "#slider" ).slider(); function initCanvas(){ //实例化canvas $("#pureCanvas").pureCanvas('setting', 'backgroundImage', { width:canvasWidth, height:canvasHeight, imageSrc: imgsrc, callback: function(imageInfo){ var data = imageInfo; data.eventType = 'bg'; } }); $("#pureCanvas").pureCanvas('Rectangle', 'type', 'Rectangle'); } initCanvas(); //$("#pureCanvas").pureCanvas('Rectangle', 'type', 'Rectangle'); function getImgData(_cropCanvas,x,y,x1,y1){ //var dataImg = bb.getImageData(x,y,x1-x,y1-y) var bb = _cropCanvas.getContext('2d'); var dataImg = bb.getImageData(50,50,500,300) console.log(dataImg) // 将图像放回画布 var canvas2 = document.createElement("canvas") canvas2.width = 500; canvas2.height = 300; var ctx2 = canvas2.getContext("2d") ctx2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height); // 试卷url var imgurl = canvas2.toDataURL("image/jpeg", 1) imgtmp = document.createElement("img"); imgtmp.setAttribute('src',imgurl); document.getElementById("imgsview").append(imgtmp); } //图像裁剪 function crop(imgsrc,x,y,x1,y1){ x = parseInt(x)*6.37; y = parseInt(y)*6.37; x1 = parseInt(x1)*6.37; y1 = parseInt(y1)*6.37; if(!imgsrc){return;} var img = new Image; img.setAttribute("crossOrigin",'anonymous'); img.src = imgsrc; var _cropCanvas = document.createElement('canvas'); _cropCanvas.width = img.width; _cropCanvas.height = img.height; var ctx = _cropCanvas.getContext('2d'); img.onload = function () { ctx.drawImage(img,0,0,img.width,img.height); var dataImg = ctx.getImageData(x,y,x1-x,y1-y) console.log(dataImg) // 将图像放回画布 var canvas2 = document.createElement("canvas") canvas2.width = x1-x; canvas2.height = y1-y; var ctx2 = canvas2.getContext("2d") ctx2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height); // 试卷url var imgurl = canvas2.toDataURL("image/jpeg", 1) imgtmp = document.createElement("img"); imgtmp.setAttribute('src',imgurl); imgtmp.setAttribute('width','100%'); document.getElementById("imgsview").append(imgtmp); } } // 快捷工具条切换 $("[data-pure-canvas-option]").on('click input change', function(e){ var $this = $(this); if($this.attr('type') == 'file' && !$this.val()){ return; } var optionName = $this.attr('data-pure-canvas-option'); var optionType = $this.attr('data-pure-canvas-type'); var value; if($this.attr('data-pure-canvas-value') == 'rate'){ value = {'type': 'rate', 'rateVal': $this.val()}; } else if(optionType == 'type' || $this.attr('data-pure-canvas-value')){ value = $this.attr('data-pure-canvas-value'); } else if(optionType == 'backgroundImage'){ value = { width:canvasWidth, height:canvasHeight, imageSrc: $this.prev().val(), callback: function(imageInfo){ var data = imageInfo; data.eventType = 'bg'; PureWebSocket.send(data); } } } else{ value = $this.val(); } $("#pureCanvas").pureCanvas(optionName, optionType, value); }); //切换背景图 $("#imgsview img").on('click input change', function(e){ var $this = $(this); if($this.attr('type') == 'file' && !$this.val()){ return; } var optionName = $this.attr('data-pure-canvas-option'); var optionType = $this.attr('data-pure-canvas-type'); var value; if($this.attr('data-pure-canvas-value') == 'rate'){ value = {'type': 'rate', 'rateVal': $this.val()}; } else if(optionType == 'type' || $this.attr('data-pure-canvas-value')){ value = $this.attr('data-pure-canvas-value'); } else if(optionType == 'backgroundImage'){ value = { width:canvasWidth, height:canvasHeight, imageSrc: $this.attr("src"), callback: function(imageInfo){ var data = imageInfo; data.eventType = 'bg'; // PureWebSocket.send(data); } } } else{ value = $this.val(); } $("#pureCanvas").pureCanvas(optionName, optionType, value); imgsrc = $this.attr("src"); }); //获取画矩形结果 $("#pureCanvas").on('complate.draw.pureCanvas', function(e){ var data = e.drawData; var point = data.points.split(",")[0].split(" ").concat(data.points.split(",")[1].split(" ")); console.log(point); var timeStamp = e.timeStamp; var src = imgsrc; // 切割单题 var _this = $("#paperpieces .cut_imgview_active"); var point_site = check_point_site(); // var toolkit_type = get_toolkit_type(); // 单题切割 console.log(keyCode); if(toolkit_type=='danti'){ var imgviewer = cut_single(src,point); //如果cailiao_flag 且上一题有材料 if(cailiao_flag&&_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").length){ //_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(_this.find(".clean_ul")); //_this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(_this.find(".clean_ul")); _this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(imgviewer.find(".clean_ul")); _this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(imgviewer.find(".clean_ul")); } // if(keyCode==17){ // 如果当前激活状态在最后一位则转移指针特性位置 if($(_this).hasClass("forward_point")){ $(_this).removeClass("forward_point"); if($("#paperpieces .forward_point").length==0){ $(_this).after(gen_forward_point()); // 移动指针 change_forward_point(); } } if($(_this).find(".cut_imgview").length<1){ $(_this).html(imgviewer.html()); }else{ $(_this).find(".clean_ul").append($(imgviewer).find(".cut_imgview")); } }else{ // 移动指针 change_forward_point(); // 指针在结尾 if($(_this).hasClass("forward_point")){ $(".forward_point").before(imgviewer); // 滚动条滚动 $("#paperpieces").scrollTop($("#paperpieces")[0].scrollHeight); }else{ imgviewer.find("input").attr("value",_this.find("input").val()); _this.html(imgviewer.html()); } } // 切小题 }else if(toolkit_type=='xiaoti'){ var imgviewer = cut_mul_li(src,point); //如果cailiao_flag 且上一题有材料 if(cailiao_flag&&_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").length){ //_this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(_this.find(".clean_ul")); //_this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(_this.find(".clean_ul")); if(!_this.find(".cailiao_clean_ul").length){ _this.prev(".cut_img_box_li").find(".cailiao_clean_ul").clone().insertBefore(imgviewer.find(".clean_ul")); _this.prev(".cut_img_box_li").find(".cailiao_num").clone().insertBefore(imgviewer.find(".clean_ul")); } } //抛弃 if(keyCode==100){ // 如果当前激活状态在最后一位则转移指针特性位置 if($(_this).hasClass("forward_point")){ $(_this).removeClass("forward_point"); if($("#paperpieces .forward_point").length==0){ $(_this).after(gen_forward_point()); } } // if($(_this).find(".cut_imgview").length<1){ $(_this).html(imgviewer.html()); }else{ $(_this).append($(imgviewer).find(".cut_imgview")); } }else{ // 移动指针 change_forward_point(); // 指针在结尾 if($(_this).hasClass("forward_point")){ $(imgviewer).addClass("cut_imgview_active"); $(".forward_point").before(imgviewer); $(_this).removeClass("cut_imgview_active"); // 滚动条滚动 $("#paperpieces").scrollTop($("#paperpieces")[0].scrollHeight); }else{ // imgviewer.find("input").attr("value",_this.find("input").val()); // _this.html(imgviewer.html()); if(_this.find(".clean_ul").length){ //如果原来是单题全覆盖如果是小题则增加 if(_this.find(".clean_ul").find(".subqueinput").length){ _this.find(".clean_ul").append(imgviewer.find(".cut_imgview")); }else{ _this.find(".clean_ul").remove(); _this.append(imgviewer.find(".clean_ul")); } //改成全覆盖 //_this.append(imgviewer.find(".clean_ul")); }else{ _this.append(imgviewer.find(".clean_ul")); } } } // 切材料 }else{ var imgviewer = cut_cailiao_li(src,point); // 移动指针 change_forward_point(); // 指针在最后 if($(_this).hasClass("forward_point")){ $(imgviewer).addClass("cut_imgview_active"); $(_this).removeClass("cut_imgview_active"); // if(_this.find(".cailiao_clean_ul").length){ _this.find(".cailiao_clean_ul").append(imgviewer.find(".cut_imgview")); }else{ $(".forward_point").before(imgviewer); } }else{ //已存在切割好的题目 if(_this.find(".clean_ul").length){ // if(_this.find(".cailiao_clean_ul").length){ _this.find(".cailiao_clean_ul").append(imgviewer.find(".cut_imgview")); }else{ imgviewer.find(".cailiao_clean_ul").insertBefore(_this.find(".clean_ul")); } // 添加材料提示 var cailiao_num = _this.find(".cailiao_clean_ul .cut_imgview").length; if(_this.find(".cailiao_num").length){ _this.find(".cailiao_num").text("第"+cailiao_num+"张材料"); }else{ _this.append(gen_cailiao_num(cailiao_num)); } }else{ // if(_this.find(".cailiao_clean_ul").length){ _this.find(".cailiao_clean_ul").append(imgviewer.find(".cut_imgview")); }else{ _this.append(imgviewer); } } } // } //添加hover事件 add_hover(); //添加点击激活事件 active_cut_img(imgviewer); }); // //去除多余的canvas $("canvas:eq(1)").remove(); $("canvas:eq(1)").remove(); function check_point_site(){ var _this = $("#paperpieces .cut_imgview_active"); var point_site = _this.index()+1; return point_site; } //删除操作 function del_myself(_this){ $(_this).remove(); } // 切割操作 // 单题切割 function cut_single(src,point){ // var imgtmp = gen_single_li(src,point); var imgtmp = gen_danti(src,point); return $(imgtmp) } // 生成定位指针 function gen_forward_point(){ var tmp_div = document.createElement("div"); var value = $("#paperpieces li").length+1; var htmlstr = '
  • '; $(tmp_div).html(htmlstr); return $(tmp_div).find(".forward_point"); } //单题目li生成 function gen_single_li(src,point){ var imgtmp = document.createElement("li"); $(imgtmp).addClass("cut_img_box_li"); var sub_html = gen_cut_imgview(src,point); imgtmp.innerHTML=sub_html; return imgtmp; } // 切材料 function cut_cailiao_li(src,point){ // 大题号计算 var queno = $("#paperpieces .cut_img_box_li").length; var tmpli = document.createElement("li"); $(tmpli).addClass("cut_img_box_li"); $(tmpli).append(''); $(tmpli).append(''+'第1张材料'+''); var imgtmp = document.createElement("ul"); // $(imgtmp).addClass("cut_img_box_li"); $(imgtmp).addClass("cailiao_clean_ul"); var sub_html = gen_cailiao_li(src,point); console.log(sub_html); imgtmp.innerHTML=sub_html; $(tmpli).append($(imgtmp)); console.log($(tmpli).html()); return $(tmpli); } // 生成材料提示 function gen_cailiao_num(num){ var tmp = document.createElement("div"); $(tmp).append('第'+num+'张材料'); return $(tmp).html(); } // 生成材料预览 function gen_cailiao_li(src,point){ // var src="media/1517533995690XZB2018RJYYB01021_1.jpg"; var subqueno = 1; // var _this = $("#paperpieces .cut_imgview_active"); var subqueno_num = _this.find(".cailiao_clean_ul").find(".cut_imgview").length; if(keyCode==17){ var subqueno = 1; if(subqueno_num<1){ subqueno = subqueno_num+1; }else{ subqueno = parseInt(_this.find(".cailiao_clean_ul").find(".cut_imgview:last").find(".subqueinput").val()); } }else{ var subqueno = 1; if(subqueno_num<1){ subqueno = subqueno_num+1; }else{ subqueno = parseInt(_this.find(".cailiao_clean_ul").find(".cut_imgview:last").find("input").val())+1; } } // var width = point[2]-point[0]; var viewWidth=$('#paperpiecesul li:first').width(); var widthRate=viewWidth/width; var background_position =(-point[0]*widthRate)+'px ' +(-point[1]*widthRate)+'px'; var rate =(point[3]-point[1])/(point[2]-point[0]); // 子题号html var tmp_ul = document.createElement("ul"); $(tmp_ul).addClass("clean_ul"); // // var sub_html = ''; var page = $("#imgsview").find(".active_green_border").attr("data-page"); var sub_html = '
  • '; sub_html += '
  • '; $(tmp_ul).html(sub_html); $(tmp_ul).find(".cut_imgview").attr('style','height:'+rate*20+'vw;background-image:url("'+src+'");background-position:'+background_position+';background-size:'+(canvasWidth*widthRate*1.01)+'px;'); return $(tmp_ul).html(); } // 切小题 function cut_mul_li(src,point){ // 大题号计算 var queno = $("#paperpieces .cut_img_box_li").length; var tmpli = document.createElement("li"); $(tmpli).addClass("cut_img_box_li"); $(tmpli).append(''); $(tmpli).append(''); var imgtmp = document.createElement("ul"); // $(imgtmp).addClass("cut_img_box_li"); $(imgtmp).addClass("clean_ul"); var sub_html = gen_cut_subque(src,point); console.log(sub_html); imgtmp.innerHTML=sub_html; $(tmpli).append($(imgtmp)); return $(tmpli); } // 图片查看div单题 function gen_cut_imgview(src,point){ //裁剪 // var src="media/1517533995690XZB2018RJYYB01021_1.jpg"; var width = point[2]-point[0]; var viewWidth=$('#paperpiecesul li:first').width(); var widthRate=viewWidth/width; var background_position =(-point[0]*widthRate)+'px ' +(-point[1]*widthRate)+'px'; var rate =(point[3]-point[1])/(point[2]-point[0]); // var tmp_div = document.createElement("div"); var queno = $('#paperpiecesul li').length; var sub_html = ''; sub_html += ''; sub_html += '
    '; $(tmp_div).html(sub_html); $(tmp_div).find(".cut_imgview").attr('style','height:'+rate*20+'vw;background-image:url("'+src+'");background-position:'+background_position+';background-size:'+(canvasWidth*widthRate*1.01)+'px;'); return $(tmp_div).html(); } // 生成单题 function gen_danti(src,point){ // 大题号计算 var queno = $("#paperpieces .cut_img_box_li").length; var tmpli = document.createElement("li"); $(tmpli).addClass("cut_img_box_li"); $(tmpli).append(''); $(tmpli).append(''); var imgtmp = document.createElement("ul"); // $(imgtmp).addClass("cut_img_box_li"); $(imgtmp).addClass("clean_ul"); var sub_html = gen_cut_subque(src,point,true); console.log(sub_html); imgtmp.innerHTML=sub_html; $(tmpli).append($(imgtmp)); return $(tmpli); } function gen_cut_subque(src,point,flag){ // 计算子题号 // 当前所属题 var _this = $("#paperpieces .cut_imgview_active"); var subqueno_num = _this.find(".clean_ul").find(".cut_imgview").find(".subqueinput").length; if(keyCode==17){ var subqueno = 1; if(subqueno_num<1){ subqueno = subqueno_num+1; }else{ subqueno = parseInt(_this.find(".cut_imgview:last").find("input").val()); } }else{ var subqueno = 1; if(subqueno_num<1){ subqueno = subqueno_num+1; }else{ subqueno = parseInt(_this.find(".cut_imgview:last").find("input").val())+1; } } // var src="media/1517533995690XZB2018RJYYB01021_1.jpg"; var width = point[2]-point[0]; var viewWidth=$('#paperpiecesul li:first').width(); var widthRate=viewWidth/width; var background_position =(-point[0]*widthRate)+'px ' +(-point[1]*widthRate)+'px'; var rate =(point[3]-point[1])/(point[2]-point[0]); // 子题号html var tmp_ul = document.createElement("ul"); $(tmp_ul).addClass("clean_ul"); // if(flag){ var page = $("#imgsview").find(".active_green_border").attr("data-page"); var sub_html = '
  • '; }else{ var page = $("#imgsview").find(".active_green_border").attr("data-page"); var sub_html = '
  • '; } // sub_html += '
  • '; $(tmp_ul).html(sub_html); $(tmp_ul).find(".cut_imgview").attr('style','height:'+rate*20+'vw;background-image:url("'+src+'");background-position:'+background_position+';background-size:'+(canvasWidth*widthRate*1.01)+'px;'); return $(tmp_ul).html(); } //已切割图片的hover效果 function add_hover(targetimg){ $(".cut_imgview").hover(function(index){ $(this).css("cursor","pointer"); $("#paperpieces").append('
    '); var style=$(this).attr("style"); var top = $(this).offset().top; $('.imgzoom').attr("style",style); $('.imgzoom').css("top",top); },function(){ $('.imgzoom').remove(); }); } // 已切割图片添加点击切换激活状态 function active_cut_img(targetimg){ $("#paperpieces").on("click",".cut_img_box_li",function(){ $(this).addClass("cut_imgview_active"); $(this).siblings().removeClass("cut_imgview_active"); $(".forward_point").css("background",null); // $(".del_li").hide(); $(".del_cut_imgview").hide(); $(this).find(".del_li").show(); $(this).find(".del_cut_imgview").show(); }); } //当按住ctrl键时寻找当前处于激活状态的切图插入新的切图 function insert_merge(){ var cur_cut_img = $("#paperpieces[class='cut_imgview_active']"); } // 改变指针位置 function change_forward_point(){ if($("#paperpieces .cut_imgview_active").hasClass("forward_point")){ var _this = $(".forward_point") var prev_img = _this.prev(); if(prev_img.length>0){ var point_value = parseInt(_this.find("input").val())+1; console.log(point_value); _this.find("input").val(point_value); }else{ _this.find("input").val(2); } } } // 工具hover事件 $("#purePallete").find("button:lt(3)").each(function(){ $(this).click(function(){ $(this).addClass("toolkit_active"); $(this).siblings().removeClass("toolkit_active"); if($(this).attr("data-type")=="cailiao"){ cailiao_flag = true; } }); }); // 获取切割工具 function get_toolkit_type(){ var type = $("#purePallete").find(".toolkit_active").attr("data-type"); return type; } $("#paperpieces").on("click",".cut_img_box_li",function(){ $(this).addClass("cut_imgview_active"); $(this).siblings().removeClass("cut_imgview_active"); $(".forward_point").css("background",null); // $(".del_li").hide(); $(".del_cut_imgview").hide(); $(this).find(".del_li").show(); $(this).find(".del_cut_imgview").show(); }); $("#paperpieces").on("mouseover mouseout",".cut_imgview",function(event){ if(event.type=="mouseover"){ $(this).css("cursor","pointer"); $("#paperpieces").append('
    '); var style=$(this).attr("style"); var top = $(this).offset().top; $('.imgzoom').attr("style",style); $('.imgzoom').css("top",top); }else if(event.type=="mouseout"){ $('.imgzoom').remove(); } }); //$("#paperpieces").on("mouseover mouseout",".cut_imgview",function(){ // alert(22222222222222); //}); //删除图片 $('#paperpiecesul').on('click','.del_cut_imgview',function(){ $(this).parents('.cut_imgview').remove() $('.imgzoom').remove() }) //删除图片 $('#paperpiecesul').on('click','.del_li',function(){ $(this).parents('.cut_img_box_li').remove() $('.imgzoom').remove() }) //试卷图片切换 $('#imgsview img').each(function(){ $(this).click(function(index){ $(this).addClass("active_green_border"); $(this).siblings().removeClass("active_green_border"); }); }); //全屏 var openFullScreen = function() { var e = document.documentElement; if (e.requestFullscreen) e.requestFullscreen(); else if (e.mozRequestFullScreen) e.mozRequestFullScreen(); else if (e.webkitRequestFullScreen) e.webkitRequestFullScreen(); else if ("undefined" != typeof window.ActiveXObject) { var t = new ActiveXObject("WScript.Shell"); t && t.SendKeys("{F11}") } } $(".icon-quanping").click(function(){ openFullScreen(); }); //结束材料 $(".icon-msnui-poweroff").click(function(){ cailiao_flag = false; }); //给快捷工具栏添加hover事件 $(".paint_menu button").each(function(){ var _this = $(this); $(this).hover(function(){ layer.tips(_this.attr("data-desc"),_this,{tips:1}); }); }); });