$(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 = '