-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="A photo editing application based on the Cropper.js"><meta name="keywords" content="HTML, CSS, JS, JavaScript, photo, editor, front-end, web development"><meta name="author" content="Fengyuan Chen"><title>Photo Editor</title><link href="css/font-awesome.min.css" rel="stylesheet"><link href="css/cropper.min.css" rel="stylesheet"><link href="css/main.css" rel="stylesheet"></head><body><header class="header"><span class="title">Photo Editor</span><button-box></button-box></header><main class="main"><upload-box></upload-box><canvas-box></canvas-box></main><script id="button-box" type="text/x-template"><div @click="click" class="menu"><label for="file" title="Upload" v-show="!uploaded" class="menu__button"><span class="fa fa-upload"></span></label><button data-action="restore" title="Undo (Ctrl + Z)" v-show="cropped" class="menu__button"><span class="fa fa-undo"></span></button><button data-action="remove" title="Delete (Delete)" v-show="uploaded && !cropping" class="menu__button menu__button--danger"><span class="fa fa-trash"></span></button><button data-action="clear" title="Cancel (Esc)" v-show="cropping" class="menu__button menu__button--danger"><span class="fa fa-ban"></span></button><button data-action="crop" title="OK (Enter)" v-show="cropping" class="menu__button menu__button--success"><span class="fa fa-check"></span></button><a data-action="download" href="{{ url }}" title="Download" download="{{ name }}" v-show="url" class="menu__button menu__button--success"><span class="fa fa-download"></span></a><a data-action="download" href="https://github.com/fengyuanchen/photo-editor" title="View on GitHub" class="menu__button"><span class="fa fa-github"></span></a></div></script><script id="upload-box" type="text/x-template"><div @change="change" @dragover="dragover" @drop="drop" v-show="!uploaded" class="upload"><p>Drop image here or<label class="browse">browse...<input id="file" type="file" accept="image/*" class="sr-only"></label></p></div></script><script id="canvas-box" type="text/x-template"><div v-show="editable" class="canvas"><div class="editor"><template v-if="url"><img src="{{ url }}" alt="{{ name }}" @load="load"></template></div><div @click="click" v-show="cropper" class="toolbar"><button data-action="move" title="Move (M)" class="toolbar__button"><span class="fa fa-arrows"></span></button><button data-action="crop" title="Crop (C)" class="toolbar__button"><span class="fa fa-crop"></span></button><button data-action="zoom-in" title="Zoom In (I)" class="toolbar__button"><span class="fa fa-search-plus"></span></button><button data-action="zoom-out" title="Zoom Out (O)" class="toolbar__button"><span class="fa fa-search-minus"></span></button><button data-action="rotate-left" title="Rotate Left (L)" class="toolbar__button"><span class="fa fa-rotate-left"></span></button><button data-action="rotate-right" title="Rotate Right (R)" class="toolbar__button"><span class="fa fa-rotate-right"></span></button><button data-action="flip-horizontal" title="Flip Horizontal (H)" class="toolbar__button"><span class="fa fa-arrows-h"></span></button><button data-action="flip-vertical" title="Flip Vertical (V)" class="toolbar__button"><span class="fa fa-arrows-v"></span></button></div></div></script><script src="js/vue.min.js"></script><script src="js/cropper.min.js"></script><script src="js/main.js"></script></body></html>
0 commit comments