"paint"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/WangWeiqiang/pen/Cadyu?depth=everything&order=popularity&page=9&q=tools&show_forks=false" /> <style class="cp-pen-styles"> body { margin: 0px; padding: 0px; background-image:url("http://wangweiqiang.net/demo/MagicNote/images/background.jpg"); } a{ text-decoration:none; } #myCanvas{ border:solid 1px #ccc; margin-right:auto; margin-left:auto; display:block; margin-top:10px; box-shadow:#555 0px 0px 18px; background-color:#fff; } #myCanvas:active{ /*cursor: url(images/pencil-cursor.png) -80 -40;*/ } #bottombar{ text-align:center; font-size:2em } .toolbar{ position:fixed; background-color:#fff; width:42px; left:0px; box-shadow: #999 1px 1px 11px; border-bottom-right-radius:5px; } #handler{ position:absolute; top:0; left:42px; background-color:#fff; padding: 5px; border-top-right-radius: 3px; border-bottom-right-radius: 16px; box-shadow: #999 3px 1px 5px; } #handler .handler-item{ display:block; width:10px; height:10px; border-radius:5px; background-color:#999; margin:5px 2px; } #handler .colorshow{ background-color:#000; } .show{ left:0; } .toolbar ul{ margin:5px; padding:0; } .spliter{ height:1px; background-color:#ddd; margin: 5px 5px 10px 5px; } .toolbar ul:last{ border-bottom:none; } .toolbar ul li{ list-style:none; height:42px; } .toolbar ul li img{ opacity:0.5 } .toolbar ul li img:hover{ opacity:1; } #backgroundlist li img{ opacity:1; } #selectedcolor{ display:block; width:32px; height:32px; border-radius:32px; } #colorpicker{ height:78px; } #colorlist{ position: relative; margin: 0; padding: 0; width: 404px; top: -38px; left: 37px; background-color: #fff; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-left: 15px; box-shadow: #999 5px 1px 8px } #colorlist li{ display: inline-block; width: 32px; height: 32px; border-radius: 32px; margin: 5px 0 0 0; } #backgroundlist{ position: relative; margin: 0; padding: 0; width: 500px; top: -38px; left: 37px; background-color: #fff; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-left: 15px; box-shadow: #999 5px 1px 8px } #backgroundlist li{ display: inline-block; width: 120px; height: 120px; margin: 5px 0 0 0; } #tools{ position: relative; margin: 0; padding: 0; width: 150px; top: -38px; left: 37px; background-color: #fff; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-left: 15px; box-shadow: #999 5px 1px 8px } #tools li{ display: inline-block; width: 32px; height: 32px; margin: 5px 0 0 0; } #opendialog{ position: relative; margin: 0; padding: 0; width: 530px; top: -38px; left: 37px; background-color: #fff; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-left: 15px; box-shadow: #999 5px 1px 8px; overflow:hidden; height:156px; } #opendialog li{ display: inline-block; width: 120px; height: 149px; margin: 5px; text-align: center }</style></head><body> <script src="https://wangweiqiang.net/demo/MagicNote/js/background.js"></script> <script src="https://wangweiqiang.net/demo/MagicNote/js/canvas2image.js"></script> <script src="https://wangweiqiang.net/demo/MagicNote/js/base64.js"></script> <script src="https://wangweiqiang.net/demo/MagicNote/js/canvastoblob.js"></script> <script src="https://wangweiqiang.net/demo/MagicNote/js/canvastoblob.js"></script> <div class="toolbar"> <a id="handler" href="javascript:;" onclick="switchToolBar()"> <span class="handler-item"></span> <span class="handler-item colorshow"></span> <span class="handler-item"></span> </a> <ul> <li><a href="javascript:;" onclick="myCanvas.Brush.Change('pencil')" title="Pencil"><img src="http://wangweiqiang.net/demo/MagicNote/images/pencil.png" alt="Pencil"></a></li> <li><a href="javascript:;" onclick="myCanvas.Brush.Change('quill')" title="Quill"><img src="http://wangweiqiang.net/demo/MagicNote/images/quill.png" alt="Quill"></a></li> <li><a href="javascript:;" onclick="myCanvas.Brush.Change('highlightmarker')" title="Highlight Marker"><img src="http://wangweiqiang.net/demo/MagicNote/images/highlightmarker.png" alt="Highlight Marker"></a></li> <li><a href="javascript:;" onclick="myCanvas.Brush.Change('ereaser')" title="Eraser"><img src="http://wangweiqiang.net/demo/MagicNote/images/eraser.png" alt="Eraser"></a></li> <li> <a href="javascript:;" onclick="showTools()" title="More Tools"><img src="http://wangweiqiang.net/demo/MagicNote/images/tools.png"></a> <ul id="tools" style="display:none"> <li><a href="javascript:;" onclick="myCanvas.Brush.Change('line')" title="Line"><img src="http://wangweiqiang.net/demo/MagicNote/images/line.png"></a></li> <li><img src="http://wangweiqiang.net/demo/MagicNote/images/square.png"></li> <li><img src="http://wangweiqiang.net/demo/MagicNote/images/circle.png"></li> <li><a href="javascript:;" onclick="myCanvas.Brush.Change('coordinate')" title="Insert Coordinate"><img src="http://wangweiqiang.net/demo/MagicNote/images/chart_xy.png"></a></li> </ul> </li> </ul> <div class="spliter"></div> <ul id="colorpicker"> <li> <a href="javascript:;" onclick="showColorList()" id="selectedcolor" data-color="#000" style="background-color:#000;" title="Color"></a> <ul id="colorlist" style="display:none"> <li data-color="#000000" style="background-color:#000000"></li> <li data-color="#2e3136" style="background-color:#2e3136"></li> <li data-color="#ae352c" style="background-color:#ae352c"></li> <li data-color="#126a76" style="background-color:#126a76"></li> <li data-color="#677333" style="background-color:#677333"></li> <li data-color="#972f38" style="background-color:#972f38"></li> <li data-color="#c4a000" style="background-color:#c4a000"></li> <li data-color="#9b59b6" style="background-color:#9b59b6"></li> <li data-color="#16a085" style="background-color:#16a085"></li> <li data-color="#910000" style="background-color:#910000"></li> <li data-color="#8f5902" style="background-color:#8f5902"></li> </ul> </li> <li> <a href="javascript:;" onclick="showBackgroundList()" data-background="" title="Background"><img src="http://wangweiqiang.net/demo/MagicNote/images/background.png"></a> <ul id="backgroundlist" style="display:none"> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> <li data-img=""><img src="data:image/jpg;base64,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"></li> </ul> </li> </ul> <div class="spliter"></div> <ul> <li><a href="javascript:;" onclick="myCanvas.Clear()" title="New"><img src="http://wangweiqiang.net/demo/MagicNote/images/new.png" alt="New"></a></li> <li> <a href="javascript:;" onclick="showOpenDialog()" title="Open"><img src="http://wangweiqiang.net/demo/MagicNote/images/open.png" alt="Open"></a> <ul id="opendialog" style="display:none"> </ul> </li> <li><a href="javascript:;" onclick="myCanvas.Save()" title="Save"><img src="http://wangweiqiang.net/demo/MagicNote/images/save.png" alt="Save"></a></li> <li><a href="javascript:;" onclick="myCanvas.DownloadPngImage()" title="Export PNG Image"><img src="http://wangweiqiang.net/demo/MagicNote/images/download.png" alt="Download Image"></a></li> <li><a href="javascript:;" onclick="shareImage()" title="Share"><img src="http://wangweiqiang.net/demo/MagicNote/images/share.png" alt="Share"></a></li> <li><a href="http://wangweiqiang.net" target="_blank" title="About"><img src="http://wangweiqiang.net/demo/MagicNote/images/information.png" alt="About"></a></li> </ul> </div> <canvas id="myCanvas" data-backgroundimg="" width="1880" height="980" style="cursor: url(http://wangweiqiang.net/demo/MagicNote/images/pencil-cursor.png) 0 0, auto;"></canvas> <div id="bottombar"><a href="javascript:myCanvas.ExtandHeight(500)"><img src="http://wangweiqiang.net/demo/MagicNote/images/expand-down.png"></a></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >var ProjectList=[]; function Canvas(domid){ var canvasobj=this; this.canvas=document.getElementById(domid); this.canvas.width=screen.width-40; this.canvas.height=screen.height-100; this.Context=this.canvas.getContext('2d'); this.mouse={x:0,y:0}; this.Brush=new Brush(this.Context,0,0); this.Saved=false; this.Data={ filename:"Untitled", thum:"", background:"", content:"", createdate:new Date(), lastmodify:new Date() }; this.SetBackground=function(img){ $("#"+domid).css("background-image","url(data:image/jpg;base64,"+img+")"); $("#"+domid).data().backgroundimg=img; }; this.ExtandHeight=function(height){ var buffer=document.createElement("canvas"); buffer.width=canvasobj.canvas.width; buffer.height=canvasobj.canvas.height; var bufferCtx=buffer.getContext('2d'); bufferCtx.drawImage(canvasobj.canvas,0,0); canvasobj.canvas.height+=height; canvasobj.Context.drawImage(buffer,0,0); }; this.Clear=function(){ canvasobj.canvas.width=screen.width-40; canvasobj.canvas.height=screen.height-100; canvasobj.Context.clearRect(0,0,canvasobj.canvas.width,canvasobj.canvas.height); canvasobj.Data.filename="Untitled"; canvasobj.Data.thum=""; canvasobj.Data.background=""; canvasobj.Data.content=""; canvasobj.Data.createdate=new Date(); canvasobj.Data.lastmodify=new Date(); }; this.DownloadPngImage=function(){ var buffer=document.createElement("canvas"); buffer.width=canvasobj.canvas.width; buffer.height=canvasobj.canvas.height; var bufferCtx=buffer.getContext('2d'); //draw background var imageObj = new Image(); imageObj.onload = function() { var pattern = bufferCtx.createPattern(imageObj, 'repeat'); bufferCtx.rect(0, 0, buffer.width, buffer.height); bufferCtx.fillStyle = pattern; bufferCtx.fill(); //draw front bufferCtx.drawImage(canvasobj.canvas,0,0); //save as png img buffer.toBlob(function (blob) { saveAs(blob, "exported_image.png"); }, "image/png"); }; imageObj.src ="data:image/jpg;base64,"+ $("#"+domid).data().backgroundimg; } this.Load=function(data){ canvasobj.Data=data; var img=new Image(); img.onload=function(){ canvasobj.canvas.width=img.width; canvasobj.canvas.height=img.height; canvasobj.Context.clearRect(0,0,canvasobj.canvas.width,canvasobj.canvas.height); canvasobj.Context.drawImage(img,0,0); canvasobj.SetBackground(data.background); }; img.src=data.content; }; this.Save=function(){ if(canvasobj.Data.filename=="Untitled" && canvasobj.Data.thum=="" && canvasobj.Data.content==""){ //new document var filename=prompt("Please input a name:"); if(filename==""){ alert("Name can not be empty!"); return false; } //update canvasobj.Data canvasobj.Data.filename=filename; canvasobj.Data.background=$(myCanvas.canvas).data().backgroundimg; canvasobj.Data.content=myCanvas.canvas.toDataURL(); resizeImage(canvasobj.Data.content, 120, 120, function(url,f){ canvasobj.Data.thum=url; if(ProjectList==null || ProjectList.length==0){ ProjectList=[]; ProjectList.push(canvasobj.Data); } else { ProjectList.push(canvasobj.Data); } localStorage.setItem("magicnote",JSON.stringify(ProjectList)); canvasobj.Saved=true; }, canvasobj.Data); } else //exist document { $.each(ProjectList,function(i,n){ if(n.filename==canvasobj.Data.filename){ n.content=myCanvas.canvas.toDataURL(); n.background=$(myCanvas.canvas).data().backgroundimg; resizeImage(n.content, 120, 120, function(url,f){ n.thum=url; localStorage.setItem("magicnote",JSON.stringify(ProjectList)); canvasobj.Saved=true; }, n); } }); } }; this.mouseDown=function(e){ var xy=canvasobj.ev_canvas(e); canvasobj.mouse.x=xy.x; canvasobj.mouse.y=xy.y; canvasobj.Brush.x=canvasobj.mouse.x; canvasobj.Brush.y=canvasobj.mouse.y; canvasobj.Brush.StartStroke(); }; this.mouseMove=function(e){ var xy=canvasobj.ev_canvas(e); canvasobj.mouse.x=xy.x; canvasobj.mouse.y=xy.y; canvasobj.Brush._latest.x=canvasobj.mouse.x; canvasobj.Brush._latest.y=canvasobj.mouse.y; if(canvasobj.Brush._isStroke){ canvasobj.Saved=false; } canvasobj.Brush.render(); }; this.mouseUp=function(e){ var xy=canvasobj.ev_canvas(e); canvasobj.mouse.x=xy.x; canvasobj.mouse.y=xy.y; canvasobj.Brush.EndStroke(); }; this.ev_canvas=function(ev) { if (false) { ev._x = ev.touches[0].clientX; ev._y = ev.touches[0].clientY; // CH: Is there a better way to do this? } else if (ev.layerX || ev.layerX == 0) { // Firefox ev._x = ev.layerX; ev._y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera ev._x = ev.offsetX; ev._y = ev.offsetY; } ev._x = ev._x + 0.5; return {x:ev._x,y:ev._y}; }; this.canvas.addEventListener("mousedown",canvasobj.mouseDown,false); this.canvas.addEventListener("mousemove",canvasobj.mouseMove,false); this.canvas.addEventListener("mouseup",canvasobj.mouseUp,false); } function Brush(ctx,x,y){ var brushObj=this; this.Name="pencil"; this.Color={r:0,g:0,b:0,a:0}; this.Opacity=1; this.Size=1; this.DrawMode="source-over"; this.LineJoin="round"; this.LineCap="round"; this.InkAmount=0; this.ShadowBlur=0.5; this.ShadowColor="#000000"; this.SplashRange=0; this.SplashInkSize=0; this._currentLineWidth=1; this._strokeId=null; this._isStroke=false; this._strokeRenderCount=0; this._hairs=null; this._latest={x:0,y:0}; this.x=x; this.y=y; this.StartStroke=function(){ brushObj.resetTip(); brushObj._strokeId = new Date().getTime(); brushObj._isStroke = true; }; this.EndStroke=function() { brushObj._isStroke = false; brushObj._strokeRenderCount = 0; brushObj._strokeId = null; }; this.resetTip=function() { var hairs = brushObj._hairs = []; var inkAmount = brushObj.InkAmount; var hairNum = brushObj.Size * 10; var range = brushObj.Size / 4; var rx, ry, c0, x0, y0; var c = random(Math.PI * 4), cv, sv, x, y; for (var i = 0, r; i < hairNum/3; i++) {if (window.CP.shouldStopExecution(1)){break;} rx = random(range); ry = rx / 4; c0 = random(Math.PI * 4); x0 = rx * Math.sin(c0); y0 = ry * Math.cos(c0); cv = Math.cos(c); sv = Math.sin(c); x = brushObj.x; y = brushObj.y; hairs[i] = new Hair(x, y, brushObj); } window.CP.exitedLoop(1); //this.color.h += 140; }; this.render=function() { brushObj._strokeRenderCount++; if (!brushObj._latest) { brushObj._latest = { x: brushObj.x, y: brushObj.y }; } else { //brushObj._latest.x = brushObj.x; //brushObj._latest.y = brushObj.y; } var dx = brushObj._latest.x-brushObj.x ; var dy = brushObj._latest.y-brushObj.y ; var dist = brushObj._latestStrokeLength = Math.sqrt(dx * dx + dy * dy); var hairs = brushObj._hairs; var i, len; for (i = 0, len = hairs.length; i < len; i++) {if (window.CP.shouldStopExecution(2)){break;} hairs[i].update(dx, dy, dist,brushObj); } window.CP.exitedLoop(2); if (brushObj._isStroke) { for (i = 0, len = hairs.length; i < len; i++) {if (window.CP.shouldStopExecution(3)){break;} hairs[i].draw(ctx); } window.CP.exitedLoop(3); } brushObj.x=brushObj._latest.x; brushObj.y=brushObj._latest.y; }; this.Change=function(type){ switch(type){ case "pencil": myCanvas.Brush.Name="pencil"; myCanvas.Brush.Opacity=0.8; myCanvas.Brush.Size=1; myCanvas.Brush.DrawMode="source-over"; myCanvas.Brush.LineJoin="round"; myCanvas.Brush.LineCap="round"; myCanvas.Brush.InkAmount=1; myCanvas.Brush.ShadowBlur=2; myCanvas.Brush.ShadowColor="#000000"; myCanvas.Brush.SplashRange=0; myCanvas.Brush.SplashInkSize=0; $("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/pencil-cursor.png) 0 0,auto") break; case "quill": myCanvas.Brush.Name="quill"; myCanvas.Brush.Opacity=1; myCanvas.Brush.Size=1; myCanvas.Brush.DrawMode="source-over"; myCanvas.Brush.InkAmount=5; myCanvas.Brush.ShadowBlur=2; myCanvas.Brush.ShadowColor="#000000"; myCanvas.Brush.SplashRange=2; myCanvas.Brush.SplashInkSize=2; $("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/quill-cursor.png) 0 0,auto") break; case "highlightmarker": myCanvas.Brush.Name="highlightmarker"; myCanvas.Brush.Opacity=0.005; myCanvas.Brush.Size=40; myCanvas.Brush.DrawMode="source-over"; myCanvas.Brush.InkAmount=50; myCanvas.Brush.ShadowBlur=50; myCanvas.Brush.SplashRange=20; myCanvas.Brush.SplashInkSize=20; $("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/highlightmarker-cursor.png) 0 0,auto"); break; case "ereaser": myCanvas.Brush.Name="ereaser"; myCanvas.Brush.Opacity=1; myCanvas.Brush.Size=20; myCanvas.Brush.DrawMode="destination-out"; myCanvas.Brush.LineJoin="round"; myCanvas.Brush.LineCap="round"; myCanvas.Brush.InkAmount=0; myCanvas.Brush.ShadowBlur=0; myCanvas.Brush.ShadowColor="#000000"; myCanvas.Brush.SplashRange=0; myCanvas.Brush.SplashInkSize=0; $("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/eraser-cursor.png) 0 0,auto") break; case "coordinate": gPenMode="coordinate"; $("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/chart_xy.png) 0 0,auto") break; } }; this.resetTip(); } function Hair(x, y, brush) { this.x = x || 0; this.y = y || 0; this.brush=brush; this._latest = { x: this.x, y: this.y }; } Hair.prototype = { update: function(strokeX, strokeY, strokeLength,brush) { this._latest.x = this.x; this._latest.y = this.y; this.x += strokeX; this.y += strokeY; this.brush=brush; this.opacity=brush.Opacity; this.shadowblur=brush.ShadowBlur; this.drawmode=brush.DrawMode; this.name=brush.Name; this.linecap=brush.LineCap; this.linejoin=brush.LineJoin; switch(brush.Name){ case "pencil": case "quill": case "highlightmarker": this._currentLineWidth=brush.Size* Math.min(brush.InkAmount / strokeLength, 1); break; default: this._currentLineWidth=brush.Size; break; } }, draw: function(ctx) { ctx.save(); line(ctx, this,this._latest, this._currentLineWidth,this.brush); ctx.restore(); } }; function line(ctx, p1, p2,lineWidth,brush) { ctx.shadowColor='rgba('+brush.Color.r+','+brush.Color.g+','+brush.Color.b+','+brush.Opacity+')'; ctx.strokeStyle='rgba('+brush.Color.r+','+brush.Color.g+','+brush.Color.b+','+brush.Opacity+')'; ctx.lineWidth = lineWidth; ctx.lineCap=brush.LineCap; ctx.lineJoin=brush.LineJoin; ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); //ctx.arcTo(p1.x + lineWidth, p1.y, p1.x + lineWidth,p1.y + lineWidth/2, lineWidth/2); ctx.shadowBlur=brush.ShadowBlur; ctx.globalCompositeOperation=brush.DrawMode ctx.stroke(); } function random(max, min) { if (typeof max !== 'number') { return Math.random(); } else if (typeof min !== 'number') { min = 0; } return Math.random() * (max - min) + min; } function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } function resizeImage(url, width, height, callback, file) { var sourceImage = new Image(); sourceImage.onload = (function (f) { return function (evt) { var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; if (sourceImage.width == sourceImage.height) { canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height); } else { minVal = Math.min(sourceImage.width, sourceImage.height); if (sourceImage.width > sourceImage.height) { canvas.getContext("2d").drawImage(sourceImage, (sourceImage.width - minVal) / 2, 0, minVal, minVal, 0, 0, width, height); } else { canvas.getContext("2d").drawImage(sourceImage, 0, (sourceImage.height - minVal) / 2, minVal, minVal, 0, 0, width, height); } } callback(canvas.toDataURL(), f); } })(file); sourceImage.src = url; } function switchToolBar(){ if($(".toolbar").hasClass("show")){ $("#colorlist").fadeOut('slow',function(){ $(".toolbar").animate({ left:'-42px' },500,function(){ $(".toolbar").removeClass("show") }); }); } else { $(".toolbar").animate({ left:'0' },500,function(){ $(".toolbar").addClass("show"); }); } } function showColorList(){ $("#colorlist").fadeToggle(); } function showBackgroundList(){ $("#backgroundlist").fadeToggle(); } function showOpenDialog(){ $("#opendialog").fadeToggle(); } function showTools(){ $("#tools").fadeToggle(); } function saveImage(canvas){ var buffer=document.createElement("canvas"); buffer.width=canvas.width; buffer.height=canvas.height; var bufferCtx=buffer.getContext('2d'); bufferCtx.drawImage(canvas,0,0); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); context.rect(0, 0, canvas.width, canvas.height); context.fillStyle = pattern; context.fill(); canvas.getContext('2d').drawImage(buffer,0,0); }; imageObj.src = gBackground; var oCanvas = document.getElementById("myCanvas"); Canvas2Image.saveAsPNG(oCanvas); } function open(){ } var myCanvas; $(function(){ ProjectList=JSON.parse(localStorage.getItem("magicnote")); if(ProjectList!=null){ var filelist=""; $.each(ProjectList,function(i,n){ filelist+="<li data-filename='"+n.filename+"'><img src='"+n.thum+"' style='background-image:url(data:image/png;base64,"+n.background+")'/><br/>"+n.filename+"</li>"; }); $("#opendialog").html(filelist); $("#opendialog li").click(function(){ var item=this; $.each(ProjectList,function(i,n){ if(n.filename==$(item).data().filename){ myCanvas.Load(n); } }); showOpenDialog(); }); } myCanvas=new Canvas("myCanvas"); myCanvas.Brush.Change('pencil'); $("#colorlist li").click(function(){ gColor=$(this).data().color; gHighLightColor=gColor; myCanvas.Brush.Color=hexToRgb(gColor); $("#selectedcolor").css("background-color",gColor); $("#handler span.colorshow").css("background-color",gColor); $("#colorlist").fadeOut(); }); $.each($("#backgroundlist li"),function(i,n){ $(n).data().img=Background[i].bg; $(n).find("img").attr("src","data:image/jpg;base64,"+Background[i].thum); }); $("#backgroundlist li").click(function(){ gBackground=$(this).data().img; myCanvas.SetBackground(gBackground); $("#backgroundlist").fadeOut(); }); document.onselectstart=function(){return false;} }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: