Skip to content
Browse files

Initial commit

Not working yet
  • Loading branch information...
1 parent e2e28ec commit 8c9af3883ddc64ecad8b4703c207b9c208f92313 Jesús committed Nov 4, 2012
View
269 css/editor.css
@@ -0,0 +1,269 @@
+@charset "utf-8";
+/* CSS Document */
+
+/*MAIN STYLES*/
+body{
+ background:url(../images/bg.gif);
+}
+
+#main{
+ background:#E7E7E7;
+ position:fixed;
+ z-index:-1;
+ box-shadow: 0px 0px 25px black;
+}
+
+#topBar {
+ top: 0px;
+ left: 0px;
+ height: 50px;
+ width: 100%;
+ background: rgba(54, 54, 54, 0.85);
+ position: fixed;
+ border-bottom: 1px solid black;
+ box-shadow: 0px 0px 25px black;
+ z-index:2;
+}
+
+#leftBar {
+ width: 70px;
+ height: 750px;
+ position: fixed;
+ left: 0px;
+ top: 100px;
+ background: rgba(54, 54, 54, 0.85);
+ box-shadow: 0px 0px 25px black;
+}
+
+#rightBar {
+ width: 70px;
+ height: 750px;
+ position: fixed;
+ right: 0px;
+ top: 100px;
+ background: rgba(54, 54, 54, 0.85);
+ box-shadow: 0px 0px 25px black;
+}
+
+#layersContainer {
+ position:relative;
+ height:710px;
+ width:100%;
+}
+
+#layerActionsContainer{
+ height:40px;
+ width:70px;
+ border-top:1px solid darkgray;
+ position:absolute;
+ bottom:0px;
+}
+
+/*BUTTON & LAYER STYLES*/
+
+#topBar > .button{
+ width:70px;
+ height:50px;
+ background-size:100% !important;
+ display:inline-block;
+ background-color:transparent !important;
+}
+
+#topBar > .button:hover, #topBar > .button.active{
+ background-color:whitesmoke !important;
+}
+
+#leftBar > .button{
+ width:70px;
+ height:50px;
+ background-size:100% !important;
+ display:inline-block;
+ background-color:transparent !important;
+ padding-bottom: 5px;
+}
+
+#leftBar > .button:hover, #leftBar > .button.active{
+ background-color:whitesmoke !important;
+}
+
+#rightBar .layer{
+ width:70px;
+ height:50px;
+ position:absolute;
+ bottom:0px;
+}
+
+#layerActionsContainer > .action{
+ width:50%;
+ height:100%;
+}
+
+#layerActionsContainer > #layerSettings{
+ border-right:1px solid darkgray;
+ display: inline-block;
+ margin: -1px;
+ float:left;
+}
+
+#layerActionsContainer > #newLayer{
+ float:right;
+}
+
+/*ICONS STYLES*/
+
+#topBar > #back {
+ background: url(../images/back.svg) ;
+ margin-right:-15px;
+}
+
+#topBar > #divisor {
+ width: 30px;
+ height: 50px;
+ display:inline-block;
+ background:url(../images/topDivisor.svg);
+ margin-right:-10px;
+}
+
+#topBar > #edit {
+ background: url(../images/edit.svg) ;
+}
+
+
+#topBar > #settings {
+ background: url(../images/settings.svg) ;
+ float:right;
+}
+
+#topBar > #effects {
+ background: url(../images/effects.svg) ;
+ float:right;
+}
+
+#topBar > #curves {
+ background: url(../images/curves.svg) ;
+ float:right;
+}
+
+#leftBar > #crop {
+ background: url(../images/crop.svg) ;
+}
+
+#leftBar > #select {
+ background: url(../images/select.svg) ;
+}
+
+#leftBar > #lasso {
+ background: url(../images/lasso.svg) ;
+}
+
+#leftBar > #magicWand {
+ background: url(../images/magicWand.svg) ;
+}
+
+#leftBar > #pen {
+ background: url(../images/pen.svg) ;
+}
+
+/*POPUP STYLES*/
+
+#topBar > #effects > .popup{
+ height: 350px;
+ width: 400px;
+ background: whitesmoke;
+ top: 50px;
+ position: fixed;
+ -webkit-transform: translateX(-330px);
+ display:none;
+}
+#topBar > #effects.active > .popup{
+ display:block;
+}
+#selectEffects {
+ margin-left: 25px;
+ margin-top: 15px;
+ width: 351px;
+ height: 30px;
+ font-family: helvetica;
+ font-size: 20px;
+ color: white;
+}
+#selectEffects > div {
+ display: inline-block;
+ background: black;
+ margin: 0px;
+ height: 30px;
+ padding-left: 20px;
+ padding-right: 20px;
+ float: left;
+ border-right: 1px solid black;
+ width: 76px;
+ text-align:center;
+}
+#selectEffect > div{
+ display:none
+}
+#selectEffect > div.active{
+ display:block
+}
+
+.effect {
+ float: left;
+ width: 150px;
+ height: 120px;
+ margin-left: 25px;
+ margin-bottom: 0px;
+ margin-top: 25px;
+ margin-right: 25px;
+}
+.effectPreview {
+ height: 100px;
+ width: 150px;
+ background-color: #141414;
+}
+.effectCaption {
+ width: 150px;
+ height: 20px;
+ text-align: center;
+ font-family: calibri;
+ font-style: italic;
+ color: #3F3F3F;
+}
+
+
+
+/*FANCY BUTTONS : http://papermashup.com/demos/css-buttons/*/
+.fancyButton, .fancyButton:visited {
+ background: #222 url(http://papermashup.com/demos/css-buttons/overlay.png) repeat-x !important;
+ display: inline-block;
+ padding: 5px 10px 6px;
+ color: #fff;
+ text-decoration: none;
+ -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
+ -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
+ text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+ border-bottom: 1px solid rgba(0,0,0,0.25);
+ position: relative;
+ cursor: pointer
+}
+.active.fancyButton, .active.fancyButton:visited { background-color: #e62727 !important }
+.active.fancyButton:hover { background-color: #cf2525 !important; }
+
+.fancyButton:first-child {
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+.fancyButton:last-child {
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+
+.pink.fancyButton, .magenta.fancyButton:visited { background-color: #e22092; }
+.pink.fancyButton:hover { background-color: #c81e82; }
+.green.fancyButton, .green.fancyButton:visited { background-color: #91bd09; }
+.green.fancyButton:hover { background-color: #749a02; }
+.orange.fancyButton, .orange.fancyButton:visited { background-color: #ff5c00; }
+.orange.fancyButton:hover { background-color: #d45500; }
+.blue.fancyButton, .blue.fancyButton:visited { background-color: #2981e4; }
+.blue.fancyButton:hover { background-color: #2575cf; }
+.yellow.fancyButton, .yellow.fancyButton:visited { background-color: #ffb515; }
+.yellow.fancyButton:hover { background-color: #fc9200; }
View
65 editor.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Documento sin título</title>
+<link rel="stylesheet" type="text/css" href="css/editor.css" />
+<script type="text/javascript" src="js/editor.js"></script>
+</head>
+
+<body>
+<div id="topBar">
+ <div class="button" id="back"></div>
+ <div id="divisor"></div>
+ <div class="button" id="edit"></div>
+ <!-- Right part-->
+ <div class="button" id="settings"> </div>
+ <div class="button active" id="effects">
+ <div class="popup">
+ <div id="selectEffects">
+ <div class="fancyButton active">Common</div>
+ <div class="fancyButton">Advance</div>
+ <div class="fancyButton">Fun</div>
+ </div>
+ <div id="selectEffect">
+ <div id="selectEffectCommon" class="active">
+ <div class="effect" id="effectBlackAndWhite">
+ <div class="effectPreview"></div>
+ <div class="effectCaption">Black and White</div>
+ </div>
+ <div class="effect">
+ <div class="effectPreview"></div>
+ <div class="effectCaption">Sepia</div>
+ </div>
+ <div class="effect">
+ <div class="effectPreview"></div>
+ <div class="effectCaption"></div>
+ </div>
+ <div class="effect">
+ <div class="effectPreview"></div>
+ <div class="effectCaption"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="button" id="curves"></div>
+</div>
+<div id="leftBar">
+ <div class="button" id="crop"></div>
+ <div class="button" id="select"></div>
+ <div class="button" id="lasso"></div>
+ <div class="button" id="magicWand"></div>
+ <div class="button" id="pen"></div>
+</div>
+<div id="rightBar">
+<div id="layersContainer">
+</div>
+<div id="layerActionsContainer">
+ <div class="action" id="layerSettings"></div>
+ <div class="action" id="newLayer"></div>
+</div>
+</div>
+<canvas id="main" width="3937" height="2610"></canvas>
+</body>
+</html>
View
8 images/back.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<rect x="106" y="69" fill="#FFFFFF" width="94" height="61"/>
+<polygon fill="#FFFFFF" points="116,156.896 68.162,99.469 116,42.042 "/>
+</svg>
View
BIN images/bg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 images/crop.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" x1="61" y1="63.5" x2="179" y2="63.5"/>
+<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" x1="95.5" y1="29" x2="95.5" y2="142"/>
+<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" x1="100" y1="134.5" x2="209" y2="134.5"/>
+<line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" x1="172.5" y1="57" x2="172.5" y2="169"/>
+</svg>
View
10 images/curves.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<rect x="48" y="93" fill="#FFFFFF" width="90" height="29"/>
+<path fill="#FFFFFF" d="M164,158.568c0,5.762-4.67,10.432-10.431,10.432h-0.139C147.67,169,143,164.33,143,158.568V63.432
+ C143,57.67,147.67,53,153.431,53h0.139C159.33,53,164,57.67,164,63.432V158.568z"/>
+<rect x="169" y="93" fill="#FFFFFF" width="62" height="29"/>
+</svg>
View
8 images/edit.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<rect x="133.5" y="38.5" transform="matrix(-0.8952 -0.4456 0.4456 -0.8952 244.843 234.5717)" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="33" height="100"/>
+<polygon fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" points="141.258,143.396 116.01,158.046 112.108,129.117 "/>
+</svg>
View
122 images/effects.svg
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<g>
+ <path fill="#FFFFFF" d="M135.302,26.585c2.005,0,3.938,0.314,5.801,0.94c1.861,0.627,3.519,1.63,4.968,3.008
+ c1.451,1.379,2.605,3.142,3.465,5.291s1.289,4.745,1.289,7.788c0,2.722-0.341,5.192-1.021,7.412
+ c-0.681,2.221-1.63,4.118-2.847,5.693c-1.218,1.576-2.668,2.793-4.351,3.652c-1.684,0.859-3.527,1.289-5.532,1.289
+ c-1.325,0-2.507-0.206-3.545-0.618c-1.039-0.411-1.916-0.967-2.632-1.665c-0.717-0.698-1.262-1.521-1.638-2.471
+ c-0.376-0.948-0.564-1.96-0.564-3.035c0-0.752,0.089-1.521,0.269-2.31c0.179-0.787,0.519-1.539,1.021-2.256
+ c0.501-0.716,1.19-1.414,2.068-2.095c0.877-0.68,1.996-1.289,3.357-1.826c2.649-1.038,4.592-2.31,5.827-3.813
+ c1.236-1.504,1.854-3.312,1.854-5.425c0-0.716-0.126-1.521-0.376-2.417c-0.251-0.895-0.698-1.727-1.343-2.498
+ c-0.645-0.77-1.54-1.423-2.686-1.96c-1.146-0.537-2.614-0.806-4.404-0.806c-2.221,0-4.127,0.583-5.72,1.746
+ c-1.594,1.164-2.946,2.704-4.055,4.619c-1.11,1.916-2.006,4.101-2.686,6.553c-0.681,2.453-1.2,4.96-1.558,7.52
+ c-0.358,2.561-0.6,5.067-0.725,7.52c-0.126,2.453-0.188,4.646-0.188,6.58c0,1.396,0.027,2.785,0.081,4.163
+ c0.054,1.379,0.259,2.614,0.618,3.706c0.357,1.093,0.913,1.979,1.665,2.659c0.752,0.681,1.826,1.021,3.223,1.021
+ c1.109,0,2.247-0.107,3.411-0.322c1.163-0.215,2.273-0.438,3.33-0.671c1.056-0.232,2.032-0.457,2.927-0.671
+ c0.895-0.215,1.646-0.322,2.256-0.322c1.002,0,1.504,0.376,1.504,1.128c0,0.502-0.224,0.896-0.671,1.182
+ c-0.448,0.287-1.245,0.537-2.39,0.752c-0.537,0.107-1.137,0.207-1.799,0.295c-0.663,0.09-1.423,0.188-2.283,0.295
+ s-1.826,0.251-2.9,0.43c-1.074,0.18-2.31,0.43-3.706,0.752c-0.932,0.215-1.674,0.493-2.229,0.833
+ c-0.556,0.341-0.976,0.725-1.262,1.155c-0.358,0.573-0.583,1.281-0.671,2.122c-0.09,0.842-0.134,1.782-0.134,2.82
+ c0,0.287,0.027,1.361,0.081,3.223c0.054,1.862,0.125,4.226,0.215,7.09c0.089,2.865,0.188,6.105,0.295,9.722
+ c0.107,3.617,0.223,7.322,0.349,11.117c0.125,3.797,0.25,7.547,0.376,11.253c0.125,3.706,0.242,7.081,0.349,10.124
+ c0.107,3.045,0.206,5.632,0.295,7.762c0.089,2.131,0.169,3.518,0.242,4.162c0.179,2.149,0.599,3.921,1.262,5.317
+ c0.662,1.396,1.817,2.346,3.464,2.848c0.572,0.179,1.101,0.313,1.584,0.402c0.483,0.089,0.984,0.161,1.504,0.215
+ c0.519,0.054,1.074,0.116,1.665,0.188c0.591,0.072,1.28,0.162,2.068,0.27c0.931,0.107,1.665,0.295,2.202,0.563
+ s0.806,0.671,0.806,1.208c0,0.717-0.412,1.244-1.235,1.585c-0.824,0.34-1.952,0.511-3.384,0.511c-0.824,0-1.943-0.019-3.357-0.055
+ c-1.415-0.035-2.91-0.053-4.485-0.053c-3.366,0.035-6.338,0.366-8.916,0.993c-2.578,0.626-4.843,1.315-6.794,2.067
+ c-1.952,0.752-3.635,1.441-5.049,2.068c-1.415,0.626-2.624,0.939-3.625,0.939c-0.824,0-1.235-0.34-1.235-1.02
+ c0-0.43,0.206-0.798,0.618-1.102c0.411-0.305,1.011-0.636,1.799-0.994c1.611-0.645,2.954-1.324,4.028-2.041
+ c1.074-0.716,1.951-1.557,2.632-2.523c0.68-0.967,1.172-2.141,1.477-3.519c0.304-1.379,0.492-3.07,0.564-5.075
+ c0.071-1.683,0.107-3.761,0.107-6.231s0-5.209,0-8.217c0-2.973-0.009-6.123-0.027-9.453c-0.019-3.33-0.036-6.678-0.054-10.045
+ c-0.019-3.365-0.045-6.695-0.081-9.99c-0.036-3.293-0.072-6.391-0.107-9.292c-0.036-2.9-0.081-5.523-0.134-7.869
+ c-0.054-2.345-0.099-4.288-0.134-5.828c-0.036-0.895-0.126-1.629-0.269-2.202c-0.144-0.572-0.376-1.021-0.698-1.343
+ s-0.761-0.545-1.316-0.671c-0.556-0.125-1.262-0.188-2.122-0.188c-0.752,0-1.594,0.036-2.524,0.107
+ c-0.932,0.072-1.853,0.153-2.766,0.242c-0.913,0.09-1.754,0.17-2.524,0.242c-0.77,0.072-1.387,0.107-1.853,0.107
+ c-0.608,0-1.109-0.089-1.504-0.269c-0.394-0.179-0.591-0.501-0.591-0.967c0-0.501,0.215-0.85,0.645-1.047
+ c0.43-0.196,1.057-0.349,1.88-0.457c1.325-0.179,2.624-0.331,3.894-0.457c1.271-0.125,2.784-0.349,4.539-0.671
+ c1.504-0.25,2.686-0.76,3.545-1.531c0.859-0.77,1.539-1.7,2.041-2.793c0.501-1.092,0.859-2.31,1.074-3.652s0.43-2.748,0.645-4.216
+ c0.43-3.223,0.948-6.4,1.558-9.534c0.608-3.133,1.37-6.123,2.283-8.97s1.969-5.479,3.169-7.896
+ c1.199-2.417,2.605-4.502,4.216-6.257c1.611-1.754,3.428-3.133,5.452-4.136C130.476,27.087,132.759,26.585,135.302,26.585z"/>
+ <path fill="#FFFFFF" d="M126.01,89.051c0.501,0,1.065,0.019,1.692,0.054c0.626,0.036,1.351,0.054,2.175,0.054
+ c1.36,0,3.088-0.044,5.183-0.134c2.095-0.089,4.627-0.438,7.6-1.047c2.649-0.537,4.977-1.119,6.982-1.746
+ c2.005-0.626,3.732-1.226,5.184-1.799c1.449-0.572,2.667-1.047,3.652-1.423c0.984-0.376,1.799-0.564,2.443-0.564
+ c0.43,0,0.716,0.081,0.859,0.242c0.143,0.161,0.215,0.349,0.215,0.564c0,0.395-0.224,0.681-0.672,0.859
+ c-0.447,0.18-0.922,0.322-1.423,0.43c-0.681,0.215-1.37,0.457-2.067,0.725c-0.699,0.269-1.335,0.636-1.907,1.101
+ c-0.573,0.466-1.039,1.057-1.396,1.772c-0.358,0.717-0.537,1.611-0.537,2.686c0,1.611,0.215,3.232,0.645,4.861
+ c0.43,1.63,0.859,3.053,1.289,4.27c0.215,0.645,0.563,1.584,1.048,2.82c0.482,1.235,0.993,2.471,1.53,3.706s1.029,2.31,1.478,3.223
+ c0.447,0.913,0.76,1.369,0.939,1.369c0.071,0,0.286-0.205,0.645-0.617c0.357-0.411,0.779-0.931,1.262-1.558
+ c0.484-0.626,1.012-1.307,1.585-2.041c0.572-0.733,1.109-1.432,1.611-2.095c0.501-0.662,0.931-1.235,1.289-1.719
+ c0.357-0.483,0.572-0.779,0.645-0.887c0.215-0.393,0.465-0.85,0.752-1.369c0.286-0.519,0.43-1.047,0.43-1.584
+ c0-0.501-0.144-0.975-0.43-1.423c-0.287-0.447-0.842-0.814-1.665-1.101c-0.717-0.25-1.405-0.42-2.068-0.51
+ c-0.662-0.089-1.244-0.188-1.745-0.295c-0.967-0.215-1.45-0.68-1.45-1.396c0-0.394,0.116-0.68,0.35-0.859
+ c0.232-0.179,0.51-0.269,0.832-0.269c0.501,0,1.137,0.063,1.906,0.188c0.771,0.126,1.639,0.26,2.605,0.403
+ c0.967,0.144,2.005,0.295,3.115,0.457c1.109,0.161,2.237,0.26,3.384,0.295c0.895,0.072,1.71,0.107,2.444,0.107
+ c0.733,0,1.423,0,2.067,0c1.719,0,3.106-0.054,4.163-0.161c1.056-0.107,2.014-0.161,2.873-0.161c0.501,0,0.922,0.081,1.262,0.242
+ c0.341,0.161,0.511,0.439,0.511,0.833c0,0.932-0.913,1.45-2.739,1.558c-1.254,0.072-2.363,0.161-3.33,0.269
+ s-1.845,0.269-2.632,0.483c-1.11,0.322-2.31,0.896-3.599,1.719c-1.289,0.824-2.65,2.13-4.082,3.921
+ c-1.684,2.076-3.124,3.912-4.324,5.505c-1.199,1.594-2.067,2.839-2.604,3.733c-0.287,0.502-0.502,0.993-0.645,1.477
+ c-0.144,0.483-0.215,1.012-0.215,1.584c0,0.395,0.045,0.824,0.134,1.289c0.09,0.467,0.188,0.949,0.296,1.451
+ c0.179,0.68,0.438,1.513,0.778,2.497c0.341,0.985,0.717,2.032,1.129,3.142c0.411,1.111,0.841,2.229,1.289,3.357
+ c0.447,1.128,0.867,2.167,1.262,3.115c0.394,0.949,0.733,1.781,1.021,2.498c0.286,0.717,0.501,1.199,0.645,1.449
+ c0.465,0.932,1.002,1.692,1.611,2.283c0.608,0.591,1.28,1.074,2.015,1.45c0.733,0.376,1.512,0.653,2.336,0.833
+ c0.823,0.18,1.665,0.34,2.524,0.482c1.934,0.287,3.276,0.529,4.028,0.726c0.752,0.197,1.128,0.546,1.128,1.048
+ c0,0.572-0.403,0.958-1.208,1.154c-0.807,0.197-1.943,0.295-3.411,0.295c-0.645,0-1.379-0.018-2.202-0.053
+ c-0.824-0.035-1.737-0.055-2.739-0.055c-1.039,0-2.157,0.037-3.356,0.107c-1.2,0.072-2.463,0.215-3.787,0.43
+ c-1.361,0.215-2.73,0.564-4.109,1.048c-1.378,0.483-2.686,0.967-3.92,1.45c-1.236,0.483-2.346,0.904-3.33,1.262
+ c-0.986,0.359-1.782,0.537-2.391,0.537c-0.717,0-1.209-0.178-1.477-0.537c-0.27-0.357-0.403-0.697-0.403-1.02
+ c0-0.609,0.196-1.065,0.591-1.37c0.394-0.304,0.859-0.546,1.396-0.726c0.608-0.178,1.334-0.366,2.176-0.563
+ c0.84-0.196,1.646-0.43,2.416-0.698c0.771-0.269,1.424-0.572,1.961-0.913c0.537-0.34,0.806-0.743,0.806-1.208
+ c0-0.572-0.197-1.379-0.591-2.418c-0.395-1.037-0.842-2.085-1.343-3.142c-0.502-1.056-0.993-2.022-1.478-2.9
+ c-0.482-0.877-0.814-1.44-0.993-1.692c-0.322-0.645-0.824-0.967-1.504-0.967c-0.215,0-0.456,0.055-0.726,0.162
+ c-0.268,0.107-0.546,0.305-0.832,0.59c-0.251,0.252-0.627,0.699-1.128,1.344c-0.502,0.645-1.03,1.324-1.585,2.041
+ s-1.074,1.388-1.557,2.014c-0.484,0.627-0.815,1.066-0.994,1.316c-0.072,0.107-0.18,0.26-0.322,0.456
+ c-0.144,0.197-0.287,0.412-0.43,0.645c-0.144,0.233-0.26,0.448-0.35,0.645c-0.09,0.197-0.134,0.349-0.134,0.456
+ c0,0.18,0.107,0.305,0.322,0.377s0.465,0.134,0.752,0.188c0.286,0.054,0.572,0.09,0.859,0.107c0.286,0.019,0.519,0.045,0.698,0.08
+ c0.465,0.072,0.841,0.162,1.128,0.27c0.286,0.107,0.43,0.322,0.43,0.645c0,0.287-0.144,0.502-0.43,0.645
+ c-0.287,0.143-0.627,0.215-1.021,0.215c-0.859,0-1.701-0.035-2.524-0.107c-0.824-0.072-1.809-0.107-2.954-0.107
+ c-0.896,0-1.906,0.072-3.035,0.215c-1.128,0.143-2.248,0.295-3.357,0.456c-1.11,0.161-2.122,0.313-3.035,0.456
+ c-0.913,0.145-1.584,0.215-2.014,0.215c-0.395,0-0.698-0.098-0.913-0.295c-0.215-0.196-0.322-0.438-0.322-0.725
+ c0-0.68,0.483-1.074,1.45-1.182c0.537-0.035,1.182-0.125,1.934-0.27c0.752-0.143,1.548-0.33,2.39-0.563
+ c0.841-0.232,1.656-0.491,2.444-0.778c0.787-0.287,1.468-0.627,2.041-1.021c0.895-0.607,1.8-1.315,2.712-2.121
+ c0.914-0.806,1.791-1.656,2.633-2.551c0.84-0.895,1.638-1.809,2.39-2.74c0.752-0.93,1.396-1.807,1.934-2.631
+ s0.967-1.585,1.289-2.283s0.483-1.262,0.483-1.691c0-0.395-0.027-0.717-0.08-0.967c-0.055-0.25-0.171-0.572-0.35-0.967
+ c-0.322-0.752-0.771-1.728-1.343-2.928c-0.573-1.199-1.208-2.516-1.907-3.947c-0.697-1.432-1.432-2.918-2.201-4.459
+ c-0.771-1.539-1.504-3.008-2.203-4.404c-0.697-1.396-1.352-2.676-1.96-3.84c-0.609-1.163-1.11-2.085-1.504-2.766
+ c-0.322-0.537-0.708-1.109-1.155-1.719c-0.448-0.608-0.958-1.217-1.531-1.826c-0.573-0.608-1.191-1.19-1.853-1.746
+ c-0.663-0.555-1.352-1.029-2.068-1.423c-1.218-0.68-2.507-1.109-3.867-1.289c-1.361-0.179-2.704-0.269-4.028-0.269
+ c-1.254,0-1.88-0.394-1.88-1.182c0-0.286,0.09-0.545,0.269-0.779C125.169,89.168,125.508,89.051,126.01,89.051z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
View
12 images/lasso.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M106.524,121.952"/>
+<path fill="none" stroke="#FFFFFF" stroke-width="13" stroke-miterlimit="10" d="M73.496,117.396
+ c14.609,18.974,56.388,20.593,93.316,3.613c36.928-16.978,55.021-46.123,40.412-65.098c-14.608-18.974-56.387-20.593-93.315-3.615
+ C76.981,69.275,58.888,98.421,73.496,117.396z"/>
+<path fill="none" stroke="#FFFFFF" stroke-width="13" stroke-miterlimit="10" d="M70.7,112.845
+ c0,22.543,45.57,40.784,101.888,40.784"/>
+</svg>
View
155 images/magicWand.svg
@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<line fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" x1="75.533" y1="166.802" x2="147.804" y2="66.644"/>
+<g>
+ <g>
+ <line fill="#FFFFFF" x1="156.599" y1="58.155" x2="163.691" y2="59.147"/>
+ <ellipse fill="#FFFFFF" cx="156.598" cy="58.155" rx="5.97" ry="5.844"/>
+ <ellipse fill="#FFFFFF" cx="156.598" cy="58.155" rx="7.164" ry="7.013"/>
+ <polyline fill="#FFFFFF" points="156.599,58.155 180.357,72.031 156.599,58.155 132.84,44.28 156.599,58.155 142.422,81.411
+ 156.599,58.155 170.774,34.9 156.599,58.155 158.332,74.015 156.599,58.155 154.866,42.296 156.599,58.155 140.396,59.852
+ 156.599,58.155 172.802,56.459 156.599,58.155 157.314,58.449 156.599,58.155 155.885,57.861 156.599,58.155 156.298,58.855
+ 156.599,58.155 156.898,57.456 156.599,58.155 156.979,91.052 156.599,58.155 156.22,25.258 156.599,58.155 122.989,58.527
+ 156.599,58.155 190.207,57.783 156.599,58.155 158.167,64.019 156.599,58.155 155.028,52.292 156.599,58.155 150.607,59.691
+ 156.599,58.155 162.59,56.62 156.599,58.155 169.849,66.23 156.599,58.155 143.349,50.081 156.599,58.155 148.35,71.124
+ 156.599,58.155 164.849,45.187 156.599,58.155 186.572,74.052 156.599,58.155 126.625,42.259 156.599,58.155 140.357,87.494
+ 156.599,58.155 172.84,28.816 156.599,58.155 169.326,64.743 156.599,58.155 143.871,51.568 156.599,58.155 149.869,70.613
+ 156.599,58.155 163.328,45.698 156.599,58.155 170.617,72.828 156.599,58.155 142.579,43.483 156.599,58.155 141.608,71.877
+ 156.599,58.155 171.589,44.434 156.599,58.155 162.238,92.458 156.599,58.155 150.96,23.852 156.599,58.155 121.552,63.675
+ 156.599,58.155 191.646,52.636 156.599,58.155 178.627,62.765 156.599,58.155 134.571,53.545 156.599,58.155 151.889,79.716
+ 156.599,58.155 161.308,36.595 156.599,58.155 171.546,86.9 156.599,58.155 141.651,29.411 156.599,58.155 127.231,72.786
+ 156.599,58.155 185.966,43.525 156.599,58.155 165.722,89.906 156.599,58.155 147.475,26.405 156.599,58.155 124.16,67.085
+ 156.599,58.155 189.037,49.226 156.599,58.155 184.275,72.447 156.599,58.155 128.921,43.864 156.599,58.155 141.998,85.246
+ 156.599,58.155 171.199,31.064 156.599,58.155 156.414,74.307 156.599,58.155 156.783,42.004 156.599,58.155 140.098,57.975
+ 156.599,58.155 173.098,58.336 "/>
+ <ellipse fill="#FFFFFF" cx="156.599" cy="58.155" rx="14.328" ry="14.024"/>
+ <ellipse fill="#FFFFFF" cx="156.598" cy="58.155" rx="7.164" ry="7.013"/>
+ <ellipse fill="#FFFFFF" cx="156.598" cy="58.155" rx="5.97" ry="5.844"/>
+ <polyline fill="#FFFFFF" points="156.599,58.155 180.357,72.031 156.599,58.155 132.84,44.28 156.599,58.155 142.422,81.411
+ 156.599,58.155 170.774,34.9 156.599,58.155 158.332,74.015 156.599,58.155 154.866,42.296 156.599,58.155 140.396,59.852
+ 156.599,58.155 172.802,56.459 156.599,58.155 157.314,58.449 156.599,58.155 155.885,57.861 156.599,58.155 156.298,58.855
+ 156.599,58.155 156.898,57.456 156.599,58.155 156.979,91.052 156.599,58.155 156.22,25.258 156.599,58.155 122.989,58.527
+ 156.599,58.155 190.207,57.783 156.599,58.155 158.167,64.019 156.599,58.155 155.028,52.292 156.599,58.155 150.607,59.691
+ 156.599,58.155 162.59,56.62 156.599,58.155 169.849,66.23 156.599,58.155 143.349,50.081 156.599,58.155 148.35,71.124
+ 156.599,58.155 164.849,45.187 156.599,58.155 186.572,74.052 156.599,58.155 126.625,42.259 156.599,58.155 140.357,87.494
+ 156.599,58.155 172.84,28.816 156.599,58.155 169.326,64.743 156.599,58.155 143.871,51.568 156.599,58.155 149.869,70.613
+ 156.599,58.155 163.328,45.698 156.599,58.155 170.617,72.828 156.599,58.155 142.579,43.483 156.599,58.155 141.608,71.877
+ 156.599,58.155 171.589,44.434 156.599,58.155 162.238,92.458 156.599,58.155 150.96,23.852 156.599,58.155 121.552,63.675
+ 156.599,58.155 191.646,52.636 156.599,58.155 178.627,62.765 156.599,58.155 134.571,53.545 156.599,58.155 151.889,79.716
+ 156.599,58.155 161.308,36.595 156.599,58.155 171.546,86.9 156.599,58.155 141.651,29.411 156.599,58.155 127.231,72.786
+ 156.599,58.155 185.966,43.525 156.599,58.155 165.722,89.906 156.599,58.155 147.475,26.405 156.599,58.155 124.16,67.085
+ 156.599,58.155 189.037,49.226 156.599,58.155 184.275,72.447 156.599,58.155 128.921,43.864 156.599,58.155 141.998,85.246
+ 156.599,58.155 171.199,31.064 156.599,58.155 156.414,74.307 156.599,58.155 156.783,42.004 156.599,58.155 140.098,57.975
+ 156.599,58.155 173.098,58.336 "/>
+ </g>
+ <g>
+
+ <radialGradient id="SVGID_1_" cx="142.0117" cy="54.9224" r="12.7029" gradientTransform="matrix(1.128 0 0 1.1041 -3.587 -2.4822)" gradientUnits="userSpaceOnUse">
+ <stop offset="0" style="stop-color:#220504"/>
+ <stop offset="0.73" style="stop-color:#974026"/>
+ <stop offset="1" style="stop-color:#220504"/>
+ </radialGradient>
+ <ellipse opacity="0.15" fill="url(#SVGID_1_)" cx="156.599" cy="58.155" rx="14.328" ry="14.024"/>
+
+ <radialGradient id="SVGID_2_" cx="142.0107" cy="54.9224" r="6.3516" gradientTransform="matrix(1.128 0 0 1.1041 -3.587 -2.4822)" gradientUnits="userSpaceOnUse">
+ <stop offset="0.15" style="stop-color:#FFFFFF"/>
+ <stop offset="0.2114" style="stop-color:#E3D1D1"/>
+ <stop offset="0.2918" style="stop-color:#C39A9B"/>
+ <stop offset="0.3613" style="stop-color:#AB7274"/>
+ <stop offset="0.4163" style="stop-color:#9C5A5C"/>
+ <stop offset="0.45" style="stop-color:#975153"/>
+ <stop offset="0.5685" style="stop-color:#6B3435"/>
+ <stop offset="0.6916" style="stop-color:#431B1A"/>
+ <stop offset="0.7898" style="stop-color:#2B0B0A"/>
+ <stop offset="0.85" style="stop-color:#220504"/>
+ <stop offset="0.8573" style="stop-color:#260705"/>
+ <stop offset="0.8648" style="stop-color:#330C08"/>
+ <stop offset="0.8725" style="stop-color:#47150C"/>
+ <stop offset="0.8802" style="stop-color:#642112"/>
+ <stop offset="0.888" style="stop-color:#8A311A"/>
+ <stop offset="0.8958" style="stop-color:#B74424"/>
+ <stop offset="0.9" style="stop-color:#D3502A"/>
+ <stop offset="0.9025" style="stop-color:#C84B28"/>
+ <stop offset="0.9142" style="stop-color:#9C391E"/>
+ <stop offset="0.9263" style="stop-color:#772916"/>
+ <stop offset="0.9389" style="stop-color:#581C10"/>
+ <stop offset="0.952" style="stop-color:#40120A"/>
+ <stop offset="0.9659" style="stop-color:#2F0B07"/>
+ <stop offset="0.9811" style="stop-color:#250605"/>
+ <stop offset="1" style="stop-color:#220504"/>
+ </radialGradient>
+ <ellipse opacity="0.5" fill="url(#SVGID_2_)" cx="156.598" cy="58.155" rx="7.164" ry="7.013"/>
+
+ <radialGradient id="SVGID_3_" cx="142.0117" cy="54.9224" r="5.293" gradientTransform="matrix(1.128 0 0 1.1041 -3.587 -2.4822)" gradientUnits="userSpaceOnUse">
+ <stop offset="0.15" style="stop-color:#FFFFFF"/>
+ <stop offset="0.2824" style="stop-color:#C2C2C2"/>
+ <stop offset="0.4253" style="stop-color:#888888"/>
+ <stop offset="0.5636" style="stop-color:#575757"/>
+ <stop offset="0.6936" style="stop-color:#313131"/>
+ <stop offset="0.8134" style="stop-color:#161616"/>
+ <stop offset="0.9192" style="stop-color:#060606"/>
+ <stop offset="1" style="stop-color:#000000"/>
+ </radialGradient>
+ <ellipse fill="url(#SVGID_3_)" cx="156.598" cy="58.155" rx="5.97" ry="5.844"/>
+ <polyline opacity="0.03" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="156.599,58.155
+ 180.357,72.031 156.599,58.155 132.84,44.28 156.599,58.155 142.422,81.411 156.599,58.155 170.774,34.9 156.599,58.155
+ 158.332,74.015 156.599,58.155 154.866,42.296 156.599,58.155 140.396,59.852 156.599,58.155 172.802,56.459 156.599,58.155
+ 157.314,58.449 156.599,58.155 155.885,57.861 156.599,58.155 156.298,58.855 156.599,58.155 156.898,57.456 156.599,58.155
+ 156.979,91.052 156.599,58.155 156.22,25.258 156.599,58.155 122.989,58.527 156.599,58.155 190.207,57.783 156.599,58.155
+ 158.167,64.019 156.599,58.155 155.028,52.292 156.599,58.155 150.607,59.691 156.599,58.155 162.59,56.62 156.599,58.155
+ 169.849,66.23 156.599,58.155 143.349,50.081 156.599,58.155 148.35,71.124 156.599,58.155 164.849,45.187 156.599,58.155
+ 186.572,74.052 156.599,58.155 126.625,42.259 156.599,58.155 140.357,87.494 156.599,58.155 172.84,28.816 156.599,58.155
+ 169.326,64.743 156.599,58.155 143.871,51.568 156.599,58.155 149.869,70.613 156.599,58.155 163.328,45.698 156.599,58.155
+ 170.617,72.828 156.599,58.155 142.579,43.483 156.599,58.155 141.608,71.877 156.599,58.155 171.589,44.434 156.599,58.155
+ 162.238,92.458 156.599,58.155 150.96,23.852 156.599,58.155 121.552,63.675 156.599,58.155 191.646,52.636 156.599,58.155
+ 178.627,62.765 156.599,58.155 134.571,53.545 156.599,58.155 151.889,79.716 156.599,58.155 161.308,36.595 156.599,58.155
+ 171.546,86.9 156.599,58.155 141.651,29.411 156.599,58.155 127.231,72.786 156.599,58.155 185.966,43.525 156.599,58.155
+ 165.722,89.906 156.599,58.155 147.475,26.405 156.599,58.155 124.16,67.085 156.599,58.155 189.037,49.226 156.599,58.155
+ 184.275,72.447 156.599,58.155 128.921,43.864 156.599,58.155 141.998,85.246 156.599,58.155 171.199,31.064 156.599,58.155
+ 156.414,74.307 156.599,58.155 156.783,42.004 156.599,58.155 140.098,57.975 156.599,58.155 173.098,58.336 "/>
+ </g>
+ <g>
+ <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="156.599" y1="58.155" x2="163.691" y2="59.147"/>
+ <ellipse fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="156.598" cy="58.155" rx="5.97" ry="5.844"/>
+ <ellipse fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="156.598" cy="58.155" rx="7.164" ry="7.013"/>
+ <polyline fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="156.599,58.155 180.357,72.031 156.599,58.155
+ 132.84,44.28 156.599,58.155 142.422,81.411 156.599,58.155 170.774,34.9 156.599,58.155 158.332,74.015 156.599,58.155
+ 154.866,42.296 156.599,58.155 140.396,59.852 156.599,58.155 172.802,56.459 156.599,58.155 157.314,58.449 156.599,58.155
+ 155.885,57.861 156.599,58.155 156.298,58.855 156.599,58.155 156.898,57.456 156.599,58.155 156.979,91.052 156.599,58.155
+ 156.22,25.258 156.599,58.155 122.989,58.527 156.599,58.155 190.207,57.783 156.599,58.155 158.167,64.019 156.599,58.155
+ 155.028,52.292 156.599,58.155 150.607,59.691 156.599,58.155 162.59,56.62 156.599,58.155 169.849,66.23 156.599,58.155
+ 143.349,50.081 156.599,58.155 148.35,71.124 156.599,58.155 164.849,45.187 156.599,58.155 186.572,74.052 156.599,58.155
+ 126.625,42.259 156.599,58.155 140.357,87.494 156.599,58.155 172.84,28.816 156.599,58.155 169.326,64.743 156.599,58.155
+ 143.871,51.568 156.599,58.155 149.869,70.613 156.599,58.155 163.328,45.698 156.599,58.155 170.617,72.828 156.599,58.155
+ 142.579,43.483 156.599,58.155 141.608,71.877 156.599,58.155 171.589,44.434 156.599,58.155 162.238,92.458 156.599,58.155
+ 150.96,23.852 156.599,58.155 121.552,63.675 156.599,58.155 191.646,52.636 156.599,58.155 178.627,62.765 156.599,58.155
+ 134.571,53.545 156.599,58.155 151.889,79.716 156.599,58.155 161.308,36.595 156.599,58.155 171.546,86.9 156.599,58.155
+ 141.651,29.411 156.599,58.155 127.231,72.786 156.599,58.155 185.966,43.525 156.599,58.155 165.722,89.906 156.599,58.155
+ 147.475,26.405 156.599,58.155 124.16,67.085 156.599,58.155 189.037,49.226 156.599,58.155 184.275,72.447 156.599,58.155
+ 128.921,43.864 156.599,58.155 141.998,85.246 156.599,58.155 171.199,31.064 156.599,58.155 156.414,74.307 156.599,58.155
+ 156.783,42.004 156.599,58.155 140.098,57.975 156.599,58.155 173.098,58.336 "/>
+ <ellipse fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="156.599" cy="58.155" rx="14.328" ry="14.024"/>
+ <ellipse fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="156.598" cy="58.155" rx="7.164" ry="7.013"/>
+ <ellipse fill="none" stroke="#FFFFFF" stroke-miterlimit="10" cx="156.598" cy="58.155" rx="5.97" ry="5.844"/>
+ <polyline fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="156.599,58.155 180.357,72.031 156.599,58.155
+ 132.84,44.28 156.599,58.155 142.422,81.411 156.599,58.155 170.774,34.9 156.599,58.155 158.332,74.015 156.599,58.155
+ 154.866,42.296 156.599,58.155 140.396,59.852 156.599,58.155 172.802,56.459 156.599,58.155 157.314,58.449 156.599,58.155
+ 155.885,57.861 156.599,58.155 156.298,58.855 156.599,58.155 156.898,57.456 156.599,58.155 156.979,91.052 156.599,58.155
+ 156.22,25.258 156.599,58.155 122.989,58.527 156.599,58.155 190.207,57.783 156.599,58.155 158.167,64.019 156.599,58.155
+ 155.028,52.292 156.599,58.155 150.607,59.691 156.599,58.155 162.59,56.62 156.599,58.155 169.849,66.23 156.599,58.155
+ 143.349,50.081 156.599,58.155 148.35,71.124 156.599,58.155 164.849,45.187 156.599,58.155 186.572,74.052 156.599,58.155
+ 126.625,42.259 156.599,58.155 140.357,87.494 156.599,58.155 172.84,28.816 156.599,58.155 169.326,64.743 156.599,58.155
+ 143.871,51.568 156.599,58.155 149.869,70.613 156.599,58.155 163.328,45.698 156.599,58.155 170.617,72.828 156.599,58.155
+ 142.579,43.483 156.599,58.155 141.608,71.877 156.599,58.155 171.589,44.434 156.599,58.155 162.238,92.458 156.599,58.155
+ 150.96,23.852 156.599,58.155 121.552,63.675 156.599,58.155 191.646,52.636 156.599,58.155 178.627,62.765 156.599,58.155
+ 134.571,53.545 156.599,58.155 151.889,79.716 156.599,58.155 161.308,36.595 156.599,58.155 171.546,86.9 156.599,58.155
+ 141.651,29.411 156.599,58.155 127.231,72.786 156.599,58.155 185.966,43.525 156.599,58.155 165.722,89.906 156.599,58.155
+ 147.475,26.405 156.599,58.155 124.16,67.085 156.599,58.155 189.037,49.226 156.599,58.155 184.275,72.447 156.599,58.155
+ 128.921,43.864 156.599,58.155 141.998,85.246 156.599,58.155 171.199,31.064 156.599,58.155 156.414,74.307 156.599,58.155
+ 156.783,42.004 156.599,58.155 140.098,57.975 156.599,58.155 173.098,58.336 "/>
+ </g>
+</g>
+</svg>
View
19 images/pen.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<rect x="126.084" y="63.019" transform="matrix(-0.821 -0.5709 0.5709 -0.821 200.5921 248.6405)" fill="#FFFFFF" width="26.379" height="59.712"/>
+<g>
+ <defs>
+ <path id="XMLID_1_" d="M99.077,125.565c5.677-7.985,13.438-8.229,19.656-3.807c6.219,4.42,9.231,12.999,2.863,19.814
+ c-3.726,3.988-9.727,3.643-14.503,5.632c-8.677,3.615-12.344,11.458-12.344,11.458S93.4,133.553,99.077,125.565z"/>
+ </defs>
+ <use xlink:href="#XMLID_1_" overflow="visible" fill="#FFFFFF"/>
+ <clipPath id="XMLID_3_">
+ <use xlink:href="#XMLID_1_" overflow="visible"/>
+ </clipPath>
+ <path clip-path="url(#XMLID_3_)" fill="#FFFFFF" d="M161.354,121.094"/>
+</g>
+<line fill="#FFFFFF" stroke="#FFFFFF" stroke-width="27" stroke-linecap="round" stroke-miterlimit="10" x1="137.877" y1="94.883" x2="179.302" y2="34.432"/>
+</svg>
View
22 images/select.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<g>
+ <g>
+ <polyline fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" points="62,74 62,54 82,54 "/>
+
+ <line fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" stroke-dasharray="42,10" x1="92" y1="54" x2="191" y2="54"/>
+ <polyline fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" points="196,54 216,54 216,74 "/>
+
+ <line fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" stroke-dasharray="35,9" x1="216" y1="83" x2="216" y2="122"/>
+ <polyline fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" points="216,126 216,146 196,146 "/>
+
+ <line fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" stroke-dasharray="42,10" x1="186" y1="146" x2="87" y2="146"/>
+ <polyline fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" points="82,146 62,146 62,126 "/>
+
+ <line fill="none" stroke="#FFFFFF" stroke-width="12" stroke-miterlimit="10" stroke-dasharray="35,9" x1="62" y1="118" x2="62" y2="78"/>
+ </g>
+</g>
+</svg>
View
30 images/settings.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="280px" height="200px" viewBox="0 0 280 200" enable-background="new 0 0 280 200" xml:space="preserve">
+<g id="XMLID_1_">
+ <g>
+ <path fill="#FFFFFF" d="M143.65,66.39c21.47,0,38.88,17.41,38.88,38.89c0,21.47-17.41,38.88-38.88,38.88
+ c-21.48,0-38.891-17.41-38.891-38.88C104.76,83.8,122.17,66.39,143.65,66.39z"/>
+ <path fill="#FFFFFF" d="M104.76,105.28c0,21.47,17.41,38.88,38.891,38.88c21.47,0,38.88-17.41,38.88-38.88
+ c0-21.48-17.41-38.89-38.88-38.89C122.17,66.39,104.76,83.8,104.76,105.28z M143.65,53.03c28.85,0,52.239,23.39,52.239,52.25
+ c0,28.85-23.39,52.239-52.239,52.239c-28.86,0-52.25-23.39-52.25-52.239C91.4,76.42,114.79,53.03,143.65,53.03z"/>
+ </g>
+ <g>
+ <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M195.89,105.28c0,28.85-23.39,52.239-52.239,52.239
+ c-28.86,0-52.25-23.39-52.25-52.239c0-28.86,23.39-52.25,52.25-52.25C172.5,53.03,195.89,76.42,195.89,105.28z"/>
+ <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M143.65,66.39c21.47,0,38.88,17.41,38.88,38.89
+ c0,21.47-17.41,38.88-38.88,38.88c-21.48,0-38.891-17.41-38.891-38.88C104.76,83.8,122.17,66.39,143.65,66.39z"/>
+ </g>
+</g>
+<circle fill="none" cx="143.647" cy="105.275" r="10.928"/>
+<rect x="133.5" y="33.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="20" height="31"/>
+<rect x="133.5" y="146.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="20" height="31"/>
+<rect x="184.5" y="95.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="31" height="20"/>
+<rect x="70.5" y="95.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="31" height="20"/>
+<rect x="175" y="130" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -48.6986 173.4311)" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="20.001" height="31"/>
+<rect x="91" y="51" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.4402 90.8955)" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="20.001" height="31"/>
+<rect x="173" y="49" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 266.792 239.5093)" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="20.001" height="31"/>
+<rect x="91" y="130" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 69.5334 319.8027)" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="20.001" height="31"/>
+</svg>
View
1,130 images/svg/back.ai
1,130 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,136 images/svg/crop.ai
1,136 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,190 images/svg/curves.ai
1,190 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,092 images/svg/edit.ai
1,092 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,145 images/svg/effects.ai
1,145 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,124 images/svg/lasso.ai
1,124 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,376 images/svg/magicWand.ai
1,376 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,125 images/svg/pen.ai
1,125 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,102 images/svg/select.ai
1,102 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,255 images/svg/settings.ai
1,255 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
1,196 images/svg/topDivisor.ai
1,196 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
7 images/topDivisor.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="30px" height="50px" viewBox="0 0 30 50" enable-background="new 0 0 30 50" xml:space="preserve">
+<rect x="-22.5" y="19.5" transform="matrix(0.3567 0.9342 -0.9342 0.3567 32.0697 1.4255)" fill="#4D4D4D" stroke="#333333" stroke-miterlimit="10" width="75" height="9"/>
+</svg>
View
185 js/editor.js
@@ -0,0 +1,185 @@
+/*VARIABLES*/
+
+var layers = []
+var context
+
+/*LOAD THE WORKER*/
+
+var worker = new Worker('js/worker.js');
+
+worker.addEventListener('message', function(e) {
+ if(e.data[0]=="filterApplied"){
+ layers[e.data[2]].content.filters[e.data[3]]=e.data[1]
+ renderLayers()
+ }
+}, false);
+
+worker.postMessage('Hello World'); // Send data to our worker.
+
+/*HELP FUNCTIONS*/
+
+function getPixels(img) {
+ var c,ctx;
+ if (img.getContext) {
+ c = img;
+ try { ctx = c.getContext('2d'); } catch(e) {}
+ }
+ if (!ctx) {
+ c = this.getCanvas(img.width, img.height);
+ ctx = c.getContext('2d');
+ ctx.drawImage(img, 0, 0);
+ }
+ return ctx.getImageData(0,0,c.width,c.height);
+}
+
+function getCanvas(w,h) {
+ var c = document.createElement('canvas');
+ c.width = w;
+ c.height = h;
+ return c;
+};
+
+/*SET ZOOM*/
+
+var leftX
+var topY
+var width
+var height
+var canvas
+
+function calculateCenterCanvas(){
+ var cWidth = canvas.width
+ var cHeight = canvas.height
+ var wWidth = document.width
+ var wHeight = document.height
+ width = wWidth - 160
+ height = wHeight - 60
+
+ if((cHeight/height) > (cWidth/width)){
+ width = cWidth / (cHeight/height)
+ }
+ else{
+ height = cHeight / (cWidth/width)
+ }
+ leftX = (wWidth - width)/2
+ topY = (wHeight - height)/2
+
+ centerCanvas()
+}
+function centerCanvas(){
+ canvas.style.left = leftX+"px"
+ canvas.style.top = topY+"px"
+ canvas.style.width = width+"px"
+}
+
+/*RENDERING*/
+var tLayer
+function renderLayers(){
+ //Modify DOM
+ document.getElementById("layersContainer").innerHTML="" //Clean all layers
+ for(i=0;i<layers.length;i++){
+ if(layers[i].type=="layer"){
+ tLayer = document.createElement("div")
+ tLayer.className="layer"
+ tLayer.innerHTML='<img src="" />'
+ if(layers[i].content.thumb!=""){//Set the thumbnail
+ tLayer.firstChild.src=layers[i].content.thumb
+ }
+ document.getElementById("layersContainer").appendChild(tLayer)
+ }
+ }
+ //Render Data
+ var needToRender = false
+ for(i=0;i<layers.length;i++){
+ if(layers[i].type=="layer"){
+ for(h=0;h<layers[i].content.filters.length;h++){//Process all filters
+ if(layers[i].content.filters[h].data==""){
+ /*Send it to worker*/
+ var dataToSend
+ if(h==0){
+ dataToSend = layers[i].content.data
+ }
+ else{
+ dataToSend = layers[i].content.filters[h-1].data
+ }
+ needToRender=true
+ worker.postMessage(["applyFilter",dataToSend,layers[i].content.filters[h],i,h])
+ break;
+ }
+ }
+ }
+ }
+ //Paint data
+ if(needToRender == false){
+ for(i=0;i<layers.length;i++){
+ if(layers[i].type=="layer"){
+ var dataToPut
+ if(layers[i].content.filters.length==0){
+ c
+ dataToPut = layers[i].content.data
+ }
+ else{
+ dataToPut = layers[i].content.filters[layers[i].content.filters.length-1].data
+ }
+ context.putImageData(dataToPut,0,0)
+ }
+ }
+ }
+}
+
+/*LAYER CONTROL*/
+
+function layerAdd(type,position,imgData){
+ if(type=="normal"){
+ layers.splice(position, 0, {type:"layer",content:{data:imgData,thumb:"",filters:[{
+ type:"blackAndWhite",data:"",parameters:["human"]
+ }]}});
+ }
+ renderLayers()
+}
+
+/*MOUSE CONTROL*/
+var a
+function clc(event){
+ var pixelX = Math.floor((canvas.width/width) * (event.clientX - this.offsetLeft))
+ var pixelY = Math.floor((canvas.height/height) * (event.clientY - this.offsetTop))
+ console.log("pixelX: "+pixelX)
+ console.log("pixelY: "+pixelY)
+}
+
+/*SET EVENTS*/
+function setEvents(){
+ canvas = document.getElementById('main')
+ open("paisaje2.jpg")
+ document.getElementById('main').addEventListener('click',clc,false)
+}
+
+/*SÓLO PARA PRUEBAS*/
+
+var newImg
+function open(URL){
+ if(URL=="none"){
+ canvas.width=wid
+ canvas.height=hei
+ calculateCenterCanvas()
+ }
+ else{
+ newImg = document.createElement("img")
+ newImg.src=URL
+ newImg.onload=canvasLoaded
+ }
+
+}
+
+function canvasLoaded(){
+ canvas.width=newImg.width
+ canvas.height=newImg.height
+ context = canvas.getContext('2d')
+ calculateCenterCanvas()
+ layerAdd("normal",0,getPixels(newImg))
+}
+
+
+/*LOAD EVENTS*/
+
+window.onload=setEvents
View
88 js/worker.js
@@ -0,0 +1,88 @@
+// JavaScript Document
+
+self.addEventListener('message', function(e) {
+ if(e.data[0]=="applyFilter"){
+ if(e.data[2].type=="blackAndWhite"){
+ blackAndWhite(e.data[1],e.data[2],e.data[3],e.data[4])
+ }
+ }
+}, false);
+
+/*BLACK AND WHITE*/
+function blackAndWhite(data,parameters,position,filterNumber){
+ if(parameters.parameters[0]=="average"){
+ for(i=0;i<data.data.length;i+=4){
+ var v = (data.data[i] + data.data[i+1] + data.data[i+2])/3
+ data.data[i] = v
+ data.data[i+1] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="human"){
+ for(i=0;i<data.data.length;i+=4){
+ var v = data.data[i]*0.299 + data.data[i+1]*0.587 + data.data[i+2]*0.114
+ data.data[i] = v
+ data.data[i+1] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="desaturate"){
+ for(i=0;i<data.data.length;i+=4){
+ var max,min
+ if(data.data[i]>data.data[i+1]){max=data.data[i],min=data.data[i+1]}
+ else{min=data.data[i],max=data.data[i+1]}
+ if(data.data[i+2]>max){max=data.data[i+2]}
+ else if(data.data[i+2]<min){min=data.data[i+2]}
+ v = (max+min)/2
+ data.data[i] = v
+ data.data[i+1] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="maximum"){
+ for(i=0;i<data.data.length;i+=4){
+ var v
+ if(data.data[i]>data.data[i+1]){v=data.data[i]}
+ else{v=data.data[i+1]}
+ if(data.data[i+2]>v){v=data.data[i+2]}
+ data.data[i] = v
+ data.data[i+1] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="minimum"){
+ for(i=0;i<data.data.length;i+=4){
+ var v
+ if(data.data[i]<data.data[i+1]){v=data.data[i]}
+ else{v=data.data[i+1]}
+ if(data.data[i+2]<v){v=data.data[i+2]}
+ data.data[i] = v
+ data.data[i+1] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="red"){
+ for(i=0;i<data.data.length;i+=4){
+ var v = data.data[i]
+ data.data[i+1] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="green"){
+ for(i=0;i<data.data.length;i+=4){
+ var v = data.data[i+1]
+ data.data[i] = v
+ data.data[i+2] = v
+ }
+ }
+ if(parameters.parameters[0]=="blue"){
+ for(i=0;i<data.data.length;i+=4){
+ var v = data.data[i+2]
+ data.data[i] = v
+ data.data[i+1] = v
+ }
+ }
+ //Send back the result
+ parameters.data=data
+ self.postMessage(["filterApplied",parameters,position,filterNumber])
+}
View
BIN paisaje.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN paisaje2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN paisaje3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
136 performance.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Documento sin título</title>
+<script type="text/javascript">
+Filters = {};
+Filters.getPixels = function(img) {
+ var c,ctx;
+ if (img.getContext) {
+ c = img;
+ try { ctx = c.getContext('2d'); } catch(e) {}
+ }
+ if (!ctx) {
+ c = this.getCanvas(img.width, img.height);
+ ctx = c.getContext('2d');
+ ctx.drawImage(img, 0, 0);
+ }
+ return ctx.getImageData(0,0,c.width,c.height);
+ }
+
+Filters.getCanvas = function(w,h) {
+ var c = document.createElement('canvas');
+ c.width = w;
+ c.height = h;
+ return c;
+};
+Filters.filterImage = function(filter, image, var_args) {
+ var args = [this.getPixels(image)];
+ for (var i=2; i<arguments.length; i++) {
+ args.push(arguments[i]);
+ }
+ return filter.apply(null, args);
+};
+Filters.tmpCanvas = document.createElement('canvas');
+Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');
+
+Filters.createImageData = function(w,h) {
+ return this.tmpCtx.createImageData(w,h);
+};
+
+Filters.convolute = function(pixels, weights, opaque) {
+ var side = Math.round(Math.sqrt(weights.length));
+ var halfSide = Math.floor(side/2);
+ var src = pixels.data;
+ var sw = pixels.width;
+ var sh = pixels.height;
+ // pad output by the convolution matrix
+ var w = sw;
+ var h = sh;
+ var output = Filters.createImageData(w, h);
+ var dst = output.data;
+ // go through the destination image pixels
+ var alphaFac = opaque ? 1 : 0;
+ for (var y=0; y<h; y++) {
+ for (var x=0; x<w; x++) {
+ var sy = y;
+ var sx = x;
+ var dstOff = (y*w+x)*4;
+ // calculate the weighed sum of the source image pixels that
+ // fall under the convolution matrix
+ var r=0, g=0, b=0, a=0;
+ for (var cy=0; cy<side; cy++) {
+ for (var cx=0; cx<side; cx++) {
+ var scy = sy + cy - halfSide;
+ var scx = sx + cx - halfSide;
+ if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
+ var srcOff = (scy*sw+scx)*4;
+ var wt = weights[cy*side+cx];
+ r += src[srcOff] * wt;
+ g += src[srcOff+1] * wt;
+ b += src[srcOff+2] * wt;
+ a += src[srcOff+3] * wt;
+ }
+ }
+ }
+ dst[dstOff] = r;
+ dst[dstOff+1] = g;
+ dst[dstOff+2] = b;
+ dst[dstOff+3] = a + alphaFac*(255-a);
+ }
+ }
+ return output;
+};
+
+ function runFilter(id, filter, arg1, arg2, arg3) {
+ var c = document.getElementById(id);
+ var s = c.previousSibling.style;
+ var b = c.parentNode.getElementsByTagName('button')[0];
+ if (b.originalText == null) {
+ b.originalText = b.textContent;
+ }
+ if (s.display == 'none') {
+ s.display = 'inline';
+ c.style.display = 'none';
+ b.textContent = b.originalText;
+ } else {
+ var a1 = performance.webkitNow()
+ var idata = Filters.filterImage(filter, img, arg1, arg2, arg3);
+ var b1 = performance.webkitNow()
+ c.width = idata.width;
+ c.height = idata.height;
+ var ctx = c.getContext('2d');
+ var c1 = performance.webkitNow()
+ console.log(idata)
+ ctx.putImageData(idata, 0, 0);
+ var d1 = performance.webkitNow()
+ s.display = 'none';
+ c.style.display = 'inline';
+ b.textContent = 'Restore original image';
+ console.log(a1)
+ console.log(b1)
+ console.log(c1)
+ console.log(d1)
+ }
+ }
+
+/*Ejecuta*/
+var img
+function sharpen() {
+ img = document.getElementById('orig')
+ runFilter('sharpen', Filters.convolute,
+ [ 0, -1, 0,
+ -1, 5, -1,
+ 0, -1, 0]);
+ }
+</script>
+</head>
+
+<body>
+<figure>
+ <img id="orig" src="paisaje.jpg" width="3937" height="2610"><canvas id="sharpen" width="600" height="337" style="display: none; "></canvas>
+ <button onclick="sharpen()">Sharpen the image</button>
+ </figure>
+</body>
+</html>

0 comments on commit 8c9af38

Please sign in to comment.
Something went wrong with that request. Please try again.