/** * Created by yangjian on 17-9-18. */ (function($) { // 设置元素可用状态 $.fn.enable = function() { $(this).addClass("active"); $(this).removeAttr("disabled"); } // 设置元素不可用状态 $.fn.disable = function() { $(this).removeClass("active"); $(this).attr("disabled", true); } var Canvas = function(options) { var configs = { width : 360, height : 300 }; //默认配置 options = options || {}; $.extend(configs, options); var canvas = $("#"+configs.canvasId)[0]; //画布 canvas.width = configs.width; canvas.height = configs.height; var context = canvas.getContext("2d"); //绘图环境 context.lineCap = "round"; //设置线条两端为圆弧 context.lineJoin = "round"; //设置线条转折为圆弧 //设置默认颜色 setColor(); var $prevBtn = $("#J_prevStep"); //上一步 var $nextBtn = $("#J_nextStep"); //下一步 var $clearBtn = $("#J_clearBoard"); //清空画板 var drawing = false; //是否正在绘制 var erasering = false; //是否正在擦除 var prevSteps = []; //返回上一步操作集合 var nextSteps = []; //恢复下一步操作集合 var o = {}; $("#picBoard").css({ width : configs.width + "px", height : configs.height + "px" }); // 事件绑定 canvas.onmousedown = startDrawing; canvas.onmouseup = stopDrawing; canvas.onmouseout = stopDrawing; canvas.onmousemove = doDrawing; $prevBtn.on("click", gotoPrevStep); $nextBtn.on("click", gotoNextStep); $clearBtn.on("click", clearBoard); // 清空设置 $("#clearSetting").on("click", function() { context.lineWidth = 1; setColor($(".colorBar span:first").data("color")); context.shadowBlur = 0; alert("画笔已重新初始化,请重新配置画笔。"); }); //上传背景图片 $("#J_canvas_bg").on("change", function() { if ($("#picBoard img").length > 0) { $("#picBoard img:eq(0)").attr("src", window.URL.createObjectURL(this.files[0])); return; } var $img = '<img src="'+window.URL.createObjectURL(this.files[0])+'" width="'+configs.width+'" height="'+configs.height+'" />'; $("#picBoard").append($img); // 激活删除背景按钮 $("#J_removeImg").enable(); }); // 删除背景图片 $("#J_removeImg").on("click", function() { $("#picBoard").empty(); $(this).disable(); }); //保存图片 $('#J_saveImg').on("click", saveImage); // 设置笔刷大小 $("#scrawl-main .brush-size").on("click", function() { context.restore(); //恢复到canvas的上一个状态 context.lineWidth = parseInt($(this).text()); erasering = false; }); // 设置笔触虚化 $("#scrawl-main .blur-size").on("click", function() { context.shadowBlur = parseInt($(this).text()); }); // 橡皮擦功能 $("#scrawl-main .eraser-size").on("click", function() { if (erasering == true) { return; } erasering = true; context.save(); //保存canvas状态 context.lineCap = "round"; //设置线条两端为圆弧 context.lineJoin = "round"; //设置线条转折为圆弧 context.lineWidth = 10; context.globalCompositeOperation = "destination-out"; }); //设置颜色 $("#scrawl-main .colorBar span").on("click",function() { $("#scrawl-main .colorBar .active").removeClass("active"); $(this).addClass("active"); setColor($(this).data("color")); }); // 开始绘制 function startDrawing(e) { drawing = true; //记录上一步的数据 prevSteps.push(context.getImageData(0, 0, configs.width, configs.height)); // 创建一个新的绘图路径 context.beginPath(); // 把画笔移动到鼠标位置 var offset = $(canvas).offset(); context.moveTo(e.pageX - offset.left, e.pageY - offset.top); } // 停止绘制 function stopDrawing() { drawing = false; //清空下一步的数据集合,从新开始记录 nextSteps = []; $nextBtn.disable(); if (prevSteps.length == 1) { $prevBtn.enable(); $clearBtn.enable(); } } //绘制图像 function doDrawing(e) { if (drawing) { // 找到鼠标最新位置 var offset = $(canvas).offset(); var x = e.pageX - offset.left; var y = e.pageY - offset.top; // 画一条直线到鼠标最新位置 context.lineTo(x, y); context.stroke(); } } /** * 返回上一步操作 */ function gotoPrevStep() { if (prevSteps.length > 0) { //保存当前状态到下一步的操作历史库 nextSteps.push(context.getImageData(0, 0, configs.width, configs.height)); var popData = prevSteps.pop(); context.putImageData(popData, 0, 0); $nextBtn.enable(); if (prevSteps.length == 0) { $prevBtn.disable(); } } } /** * 恢复下一步操作 */ function gotoNextStep() { if (nextSteps.length > 0) { //保存当前状态到上一步的操作历史库 prevSteps.push(context.getImageData(0, 0, configs.width, configs.height)); var imgData = nextSteps.pop(); context.putImageData(imgData, 0, 0); $prevBtn.enable(); if (nextSteps.length == 0) { $nextBtn.disable(); } } } /** * 清空画板 */ function clearBoard() { context.clearRect(0, 0, context.canvas.width, context.canvas.height); prevSteps = []; nextSteps = []; $prevBtn.disable(); $nextBtn.disable(); $clearBtn.disable(); } /** * 设置画笔颜色 * @param color */ function setColor(color) { if (!color) { color = $(".colorBar .active:eq(0)").data("color"); } context.strokeStyle = color; context.shadowColor = color; } /** * 获取图片 base64 编码 */ function saveImage(callback) { if ($("#picBoard img").length > 0) { var image = new Image(); image.src = $("#picBoard img:eq(0)").attr("src"); image.onload = function() { context.save(); context.shadowBlur = 0; context.shadowColor = '#FFF'; context.globalCompositeOperation = "destination-atop"; context.drawImage(this, 0, 0, configs.width, configs.height); context.restore(); callback(canvas.toDataURL("image/png")); } } else { callback(canvas.toDataURL("image/png")); } } //要导出的API o.nextStep = gotoNextStep; o.prevStep = gotoNextStep; o.setColor = setColor; o.save = saveImage; o.isEmpty = function() { return prevSteps.length == 0; } return o; } window.Canvas = Canvas; })(jQuery);