<!DOCTYPE html><html ng-app="app"><head><meta http-equiv="Content-Type" content="html/text; charset=utf-8"><title>PP鸭</title><link href="../css/style.css" rel="stylesheet"><link href="../css/bootstrap.min.css" rel="stylesheet"><link href="../css/angular-motion.css" rel="stylesheet"><link href="../css/font-awesome.min.css" rel="stylesheet"></head><body ng-controller="TopController"><div ng-class="{'notify-animation': notify.showBox}" class="notify-box"><div class="message-box"><div class="logo"><i class="{{notify.logo}}"></i></div><div class="message">{{ notify.message }}</div><div class="link"><a href="#" ng-click="openExternal(notify.linkSrc)">{{ notify.linkText }}</a></div><div ng-click="notify.showBox = false" class="btn-close"><i class="fa fa-close"></i></div></div></div><div class="tool-bar"><button ng-click="onShowOpenDialog()" class="btn-open"></button><button ng-click="onCleanView()" class="btn-clean"></button><div ng-if="!isVIP()" ng-cloak class="tool-right"><span ng-show="!isNaN(pushedCount)">剩余压缩{{ pushedCount }}张,</span><a href="#" ng-click="openExternal('http://www.ppduck.com/pay')">购买正式版</a><div class="separator"></div><a href="#" ng-click="openExternal('http://www.ppduck.com/user/login#/register')">注册</a><div class="separator"></div><a ng-click="aboutModal.loginView()">登录</a></div></div><div class="main"><span ng-controller="DropController" ng-show="needShow()"><div files-drop="drop" class="drop-view"><div draggable="false" class="drop-area"><p>拖拽图片到区域中,自动开始压缩</p><p>(仅限JPG和PNG格式)</p></div></div></span><div ng-controller="FileViewController" ng-show="needShow()" class="file-list-view"><div class="side-bar"><div class="header">{{ currentModel.pathInfo.base }}</div><table><tr><td class="icon"><i class="fa fa-file-o"></i></td><td class="side-bar-label">原体积</td><td class="detail">{{ currentModel.originSize | fileSize}}</td></tr><tr><td class="icon"><i class="fa fa-file-archive-o"></i></td><td class="side-bar-label">压缩后体积</td><td class="detail"><span ng-show="currentModel&amp;&amp;!currentModel.status.isCompressed()">未压缩</span>{{ currentModel.size | fileSize}}</td></tr><tr><td class="icon"><i class="glyphicon glyphicon-info-sign"></i></td><td class="side-bar-label">压缩比</td><td class="detail"><span ng-show="currentModel&amp;&amp;!currentModel.status.isCompressed()">未压缩</span><span ng-show="currentModel&amp;&amp;currentModel.reduceRate">{{ (1 - currentModel.reduceRate) * 100| number:0}}%</span></td></tr><tr><td class="icon"><i class="fa fa-expand"></i></td><td class="side-bar-label">图片尺寸</td><td class="detail"><span ng-show="currentModel&amp;&amp;currentModel.bound">{{ currentModel.bound.width }} x {{ currentModel.bound.height }} px</span></td></tr><tr><td class="icon"><i class="fa fa-clock-o"></i></td><td class="side-bar-label">压缩时间</td><td class="detail">{{ currentModel.birthTime | date:'y-MM-dd'}}</td></tr><tr><td class="icon"><i class="fa fa-folder-open"></i></td><td class="side-bar-label">文件位置</td><td class="detail"><div ng-show="currentModel" ng-click="reveal(currentModel.fullPath)" role="button" class="reveal"></div><div class="directory">{{ currentModel.pathInfo.dir }}</div></td></tr></table><div class="buttons"><button ng-show="currentMode == MODE.LIST" ng-click="diffMode()" class="btn btn-warning">对比原图</button><button ng-show="currentMode == MODE.DIFF" ng-click="listMode()" class="btn btn-warning">返回</button></div><div class="icon-buttons"><a ng-show="selectedManager.compressed().length &gt; 0" ng-click="selectedManager.onRestore()" class="restore">恢复原图</a><a ng-show="selectedManager.compressible().length &gt; 0" ng-click="selectedManager.onAutoCompress()" class="compress">重新压缩</a></div></div><div class="main-view"><div class="top-bar"><div ng-show="currentMode == MODE.LIST" class="list-tool"><div class="tool-right"><div ng-show="!modelEmpty" class="slider-bar"><a ng-click="zoomListImg.zoomOut()" class="zoom-out"></a><input type="range" min="{{ zoomListImg.min }}" max="{{ zoomListImg.max }}" step="{{ zoomListImg.step }}" ng-model="zoomListImg.cur" class="slider"><a ng-click="zoomListImg.zoomIn()" class="zoom-in"></a></div></div><div class="tool-center"><div ng-show="!modelEmpty" class="bg-switcher"><a href="" ng-click="setBG('dark')" ng-class="{'active': currentBG == 'dark'}" class="bg-dark"></a><a href="" ng-click="setBG('white')" ng-class="{'active': currentBG == 'white'}" class="bg-white"></a><a href="" ng-click="setBG('transparent')" ng-class="{'active': currentBG == 'transparent'}" class="bg-transparent"></a></div></div></div><div ng-show="currentMode == MODE.DIFF" class="diff-tool"><div class="tool-left"><div ng-show="currentModel.status.isCompressed()" class="left-info">左侧为原图</div></div><div class="tool-center"><!--.button-group--><!--    button.btn.btn-default(ng-class="{'active':isCmpOriBtnDown}", bind-left-btn="isCmpOriBtnDown")--><!--        | 长按此处对比--><div class="button-group"><button ng-class="{'active':isZoomOutBtnDown}" bind-left-btn="isZoomOutBtnDown" ng-click="zoomDiffBox.zoomOut()" class="btn btn-default btn-left"><i class="fa fa-search-minus"></i>缩小</button><button ng-class="{'active':isZoomInBtnDown}" bind-left-btn="isZoomInBtnDown" ng-click="zoomDiffBox.zoomIn()" class="btn btn-default btn-right"><i class="fa fa-search-plus"></i>放大</button></div><div class="button-group"><button ng-class="{'active':isFitOriBtnDown}" bind-left-btn="isFitOriBtnDown" ng-click="zoomDiffBox.fitOrigin()" class="btn btn-default btn-left"><i class="fa fa-search"></i>1:1</button><button ng-class="{'active':isFitFullBtnDown}" bind-left-btn="isFitFullBtnDown" ng-click="zoomDiffBox.fitFullScreen()" class="btn btn-default btn-right"><i class="fa fa-eye"></i>全显</button></div></div></div></div><div files-drop="drop" get-element="canvasElement" ng-class="{'diff-view': currentMode == MODE.DIFF}" ng-mousemove="onMouseMove($event)" class="canvas"><div ng-show="currentMode == MODE.LIST" ng-repeat="info in model.filesInfo" ng-class="{'active': info.selected}" ng-dblclick="diffMode(info)" ng-click="selectedManager.onModelSelect(info, $event)" class="file-box"><div class="image-box"><span>{{ maskInfo = maskHandler(info.progress);"" }}</span><div ng-if="maskInfo!=null" class="mask"><div class="icon"><div class="{{ maskInfo.class }}"><div class="icon-outer"><div class="icon-inner"><svg><path pie-path=" {{ info.compressingRate }}"></path></svg></div></div></div></div><div class="text">{{ maskInfo.text }}...</div></div><div class="img"><img data-ng-src="{{ info.thumbSrc }}"></div></div><div ng-show="info.status.isFinished()" ng-class="{                        'compressed':info.progress==COMPRESS_PROGRESS.COMPRESSED,                        'compress-larger':info.progress==COMPRESS_PROGRESS.COMPRESSED_LARGER}" class="badge"><a ng-show="false">{{ info.progress }}</a><div class="icon"><svg><path pie-path="{{ info.reduceRate }}" class="pie"></path></svg></div><span class="compress-rate"><i class="fa fa-arrow-down"></i>{{ info.reduceRate * 100| number:0}}%</span></div><div class="name">{{ info.pathInfo.base | fileName }}</div><div ng-show="info.status.isCompressed()" class="info">{{ info.originSize | fileSize }}<i class="fa fa-long-arrow-right"></i>{{ info.size | fileSize}}</div><div ng-show="!info.status.isCompressed()" class="info">{{ info.originSize | fileSize }}</div></div><div ng-show="currentMode == MODE.DIFF" ng-dblclick="listMode()" disable-child-drag drag-move get-element="diffBoxElement" ng-class="{'move-mode': !currentModel.status.isCompressed()}" class="diff-box"><div ng-show="currentModel.status.isCompressed()" class="ori-box"><img ng-src="{{ originModel.fullPath }}" class="ori"></div><div class="cur-box"><img ng-src="{{ currentModel.fullPath }}?{{ refreshStamp }}" get-element="diffImageElement" class="cur"></div></div><div ng-show="currentMode == MODE.DIFF" ng-class="{'diff-zoom-info-animation': showDiffZoomInfo}" class="diff-zoom-info">{{ zoomDiffBox.curShow }}%</div></div><div ng-show="currentMode == MODE.LIST" class="status-bar solid-border-top"><div ng-show="statistic&amp;&amp;compressedLength&gt;0" class="text">压缩{{ statistic.fileCount }}/{{ statistic.totalCount }}个文件,
从 {{ statistic.origin | fileSize}} 到 {{ statistic.size | fileSize}},
减肥{{ statistic.compress}}%</div></div></div><style>{{ zoomListImg.CSS() }}</style><style>{{ imgBackgroundCSS(currentBG) }}</style><style>{{ zoomDiffBox.CSS() }}</style></div></div><div class="about"><button type="button" ng-click="aboutModal.aboutView()"><i class="fa fa-info-circle"></i><span>关于PP鸭</span></button></div><canvas></canvas><script src="../js/jquery-1.11.3.min.js"></script><!--script(src="../js/bootstrap.min.js")--><script src="../js/vendors/angular/angular.min.js"></script><!--script(src="../js/vendors/angular/angular-animate.min.js")--><script src="../js/vendors/angular-strap/angular-strap.min.js"></script><script src="../js/vendors/angular-strap/angular-strap.tpl.min.js"></script><script src="../js/vendors/mousetrap.min.js"></script><script src="../js/app.js"></script><script src="../js/drop.js"></script><script src="../js/fileView.js"></script><script src="../js/about.js"></script></body></html>