Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
angular-cropperjs
Advanced tools
angular-cropperjs - npm Package Compare versions
Comparing version 0.1.3 to 0.1.4
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":3,"metadata":{"AngularCropperjsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"AngularCropperjsComponent"}],"exports":[{"__symbolic":"reference","name":"AngularCropperjsComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularCropperjsModule"},"providers":[]}}}},"ImageCropperSetting":{"__symbolic":"interface"},"ImageCropperResult":{"__symbolic":"interface"},"AngularCropperjsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular-cropper","template":"<div class=\"angular-cropper-wrapper\"> <div class=\"loading-block\" *ngIf=\"isLoading\"> <div class=\"spinner\"></div></div><div class=\"alert alert-warning\" *ngIf=\"loadError\">{{loadImageErrorText}}</div><div class=\"cropper\"> <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" crossorigin=\"anonymous\" (error)=\"imageLoadError($event)\"/> </div></div>","styles":[":host{display:block}.cropper img{max-width:100%;max-height:100%}.angular-cropper-wrapper{position:relative;min-height:80px}.angular-cropper-wrapper .loading-block{position:absolute;top:0;left:0;width:100%;height:100%}.angular-cropper-wrapper .loading-block .spinner{width:31px;height:31px;margin:0 auto;border:2px solid rgba(97,100,193,.98);border-radius:50%;border-left-color:transparent;border-right-color:transparent;-webkit-animation:cssload-spin 425ms infinite linear;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);animation:cssload-spin 425ms infinite linear}@-webkit-keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}/*! * Cropper.js v0.8.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2015-2016 Fengyuan Chen * Released under the MIT license * * Date: 2016-09-03T04:55:16.458Z */.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr}.cropper-container img{display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;width:100%;height:100%;image-orientation:0deg}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:#39f solid 1px;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;opacity:.5;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:' ';background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line{width:100%;height:100%;opacity:.1}.cropper-face,.cropper-line,.cropper-point,.cropper-point.point-se:before{position:absolute;display:block}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line,.cropper-point{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1}.cropper-point.point-se:before{right:-50%;bottom:-50%;width:200%;height:200%;content:' ';opacity:0;background-color:#39f}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75}}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"image":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["image"]}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cropbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loadImageErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cropperOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"export":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"imageLoaded":[{"__symbolic":"method"}],"imageLoadError":[{"__symbolic":"method"}],"exportCanvas":[{"__symbolic":"method"}]}}},"origins":{"AngularCropperjsModule":"./index","ImageCropperSetting":"./angular-cropperjs.component","ImageCropperResult":"./angular-cropperjs.component","AngularCropperjsComponent":"./angular-cropperjs.component"},"importAs":"angular-cropperjs"} | ||
| {"__symbolic":"module","version":3,"metadata":{"AngularCropperjsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"AngularCropperjsComponent"}],"exports":[{"__symbolic":"reference","name":"AngularCropperjsComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularCropperjsModule"},"providers":[]}}}},"ImageCropperSetting":{"__symbolic":"interface"},"ImageCropperResult":{"__symbolic":"interface"},"AngularCropperjsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"angular-cropper","template":"<div class=\"angular-cropper-wrapper\"> <div class=\"loading-block\" *ngIf=\"isLoading\"> <div class=\"spinner\"></div></div><div class=\"alert alert-warning\" *ngIf=\"loadError\">{{loadImageErrorText}}</div><div class=\"cropper\"> <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" [attr.crossorigin]=\"cropperConfig.checkCrossOrigin ? 'anonymous' : null\" (error)=\"imageLoadError($event)\"/> </div></div>","styles":[":host{display:block}.cropper img{max-width:100%;max-height:100%}.angular-cropper-wrapper{position:relative;min-height:80px}.angular-cropper-wrapper .loading-block{position:absolute;top:0;left:0;width:100%;height:100%}.angular-cropper-wrapper .loading-block .spinner{width:31px;height:31px;margin:0 auto;border:2px solid rgba(97,100,193,.98);border-radius:50%;border-left-color:transparent;border-right-color:transparent;-webkit-animation:cssload-spin 425ms infinite linear;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);animation:cssload-spin 425ms infinite linear}@-webkit-keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}/*! * Cropper.js v0.8.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2015-2016 Fengyuan Chen * Released under the MIT license * * Date: 2016-09-03T04:55:16.458Z */.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr}.cropper-container img{display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;width:100%;height:100%;image-orientation:0deg}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:#39f solid 1px;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;opacity:.5;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:' ';background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line{width:100%;height:100%;opacity:.1}.cropper-face,.cropper-line,.cropper-point,.cropper-point.point-se:before{position:absolute;display:block}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line,.cropper-point{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1}.cropper-point.point-se:before{right:-50%;bottom:-50%;width:200%;height:200%;content:' ';opacity:0;background-color:#39f}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75}}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"image":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["image"]}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cropbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"loadImageErrorText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cropperOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"export":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ready":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"imageLoaded":[{"__symbolic":"method"}],"imageLoadError":[{"__symbolic":"method"}],"exportCanvas":[{"__symbolic":"method"}]}}},"origins":{"AngularCropperjsModule":"./index","ImageCropperSetting":"./angular-cropperjs.component","ImageCropperResult":"./angular-cropperjs.component","AngularCropperjsComponent":"./angular-cropperjs.component"},"importAs":"angular-cropperjs"} |
@@ -62,3 +62,4 @@ (function (global, factory) { | ||
| zoomable: false, | ||
| viewMode: 1 | ||
| viewMode: 1, | ||
| checkCrossOrigin: true | ||
| }, this.cropperOptions); | ||
@@ -120,3 +121,3 @@ // | ||
| selector: 'angular-cropper', | ||
| template: "<div class=\"angular-cropper-wrapper\"> <div class=\"loading-block\" *ngIf=\"isLoading\"> <div class=\"spinner\"></div></div><div class=\"alert alert-warning\" *ngIf=\"loadError\">{{loadImageErrorText}}</div><div class=\"cropper\"> <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" crossorigin=\"anonymous\" (error)=\"imageLoadError($event)\"/> </div></div>", | ||
| template: "<div class=\"angular-cropper-wrapper\"> <div class=\"loading-block\" *ngIf=\"isLoading\"> <div class=\"spinner\"></div></div><div class=\"alert alert-warning\" *ngIf=\"loadError\">{{loadImageErrorText}}</div><div class=\"cropper\"> <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" [attr.crossorigin]=\"cropperConfig.checkCrossOrigin ? 'anonymous' : null\" (error)=\"imageLoadError($event)\"/> </div></div>", | ||
| styles: [":host{display:block}.cropper img{max-width:100%;max-height:100%}.angular-cropper-wrapper{position:relative;min-height:80px}.angular-cropper-wrapper .loading-block{position:absolute;top:0;left:0;width:100%;height:100%}.angular-cropper-wrapper .loading-block .spinner{width:31px;height:31px;margin:0 auto;border:2px solid rgba(97,100,193,.98);border-radius:50%;border-left-color:transparent;border-right-color:transparent;-webkit-animation:cssload-spin 425ms infinite linear;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);animation:cssload-spin 425ms infinite linear}@-webkit-keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}/*! * Cropper.js v0.8.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2015-2016 Fengyuan Chen * Released under the MIT license * * Date: 2016-09-03T04:55:16.458Z */.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr}.cropper-container img{display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;width:100%;height:100%;image-orientation:0deg}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:#39f solid 1px;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;opacity:.5;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:' ';background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line{width:100%;height:100%;opacity:.1}.cropper-face,.cropper-line,.cropper-point,.cropper-point.point-se:before{position:absolute;display:block}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line,.cropper-point{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1}.cropper-point.point-se:before{right:-50%;bottom:-50%;width:200%;height:200%;content:' ';opacity:0;background-color:#39f}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75}}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}"], | ||
@@ -123,0 +124,0 @@ encapsulation: core.ViewEncapsulation.None |
@@ -60,3 +60,4 @@ import { Component, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation } from '@angular/core'; | ||
| zoomable: false, | ||
| viewMode: 1 | ||
| viewMode: 1, | ||
| checkCrossOrigin: true | ||
| }, this.cropperOptions); | ||
@@ -118,3 +119,3 @@ // | ||
| selector: 'angular-cropper', | ||
| template: "<div class=\"angular-cropper-wrapper\"> <div class=\"loading-block\" *ngIf=\"isLoading\"> <div class=\"spinner\"></div></div><div class=\"alert alert-warning\" *ngIf=\"loadError\">{{loadImageErrorText}}</div><div class=\"cropper\"> <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" crossorigin=\"anonymous\" (error)=\"imageLoadError($event)\"/> </div></div>", | ||
| template: "<div class=\"angular-cropper-wrapper\"> <div class=\"loading-block\" *ngIf=\"isLoading\"> <div class=\"spinner\"></div></div><div class=\"alert alert-warning\" *ngIf=\"loadError\">{{loadImageErrorText}}</div><div class=\"cropper\"> <img #image alt=\"image\" [src]=\"imageUrl\" (load)=\"imageLoaded($event)\" [attr.crossorigin]=\"cropperConfig.checkCrossOrigin ? 'anonymous' : null\" (error)=\"imageLoadError($event)\"/> </div></div>", | ||
| styles: [":host{display:block}.cropper img{max-width:100%;max-height:100%}.angular-cropper-wrapper{position:relative;min-height:80px}.angular-cropper-wrapper .loading-block{position:absolute;top:0;left:0;width:100%;height:100%}.angular-cropper-wrapper .loading-block .spinner{width:31px;height:31px;margin:0 auto;border:2px solid rgba(97,100,193,.98);border-radius:50%;border-left-color:transparent;border-right-color:transparent;-webkit-animation:cssload-spin 425ms infinite linear;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);animation:cssload-spin 425ms infinite linear}@-webkit-keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}/*! * Cropper.js v0.8.1 * https://github.com/fengyuanchen/cropperjs * * Copyright (c) 2015-2016 Fengyuan Chen * Released under the MIT license * * Date: 2016-09-03T04:55:16.458Z */.cropper-container{font-size:0;line-height:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;direction:ltr}.cropper-container img{display:block;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;width:100%;height:100%;image-orientation:0deg}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-wrap-box{overflow:hidden}.cropper-drag-box{opacity:0;background-color:#fff}.cropper-modal{opacity:.5;background-color:#000}.cropper-view-box{display:block;overflow:hidden;width:100%;height:100%;outline:#39f solid 1px;outline-color:rgba(51,153,255,.75)}.cropper-dashed{position:absolute;display:block;opacity:.5;border:0 dashed #eee}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-center{position:absolute;top:50%;left:50%;display:block;width:0;height:0;opacity:.75}.cropper-center:after,.cropper-center:before{position:absolute;display:block;content:' ';background-color:#eee}.cropper-center:before{top:0;left:-3px;width:7px;height:1px}.cropper-center:after{top:-3px;left:0;width:1px;height:7px}.cropper-face,.cropper-line{width:100%;height:100%;opacity:.1}.cropper-face,.cropper-line,.cropper-point,.cropper-point.point-se:before{position:absolute;display:block}.cropper-face{top:0;left:0;background-color:#fff}.cropper-line,.cropper-point{background-color:#39f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;opacity:1}.cropper-point.point-se:before{right:-50%;bottom:-50%;width:200%;height:200%;content:' ';opacity:0;background-color:#39f}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;opacity:.75}}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{position:absolute;display:block;width:0;height:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}"], | ||
@@ -121,0 +122,0 @@ encapsulation: ViewEncapsulation.None |
| { | ||
| "name": "angular-cropperjs", | ||
| "description": "CropperJS integration for Angular 2/4", | ||
| "version": "0.1.3", | ||
| "version": "0.1.4", | ||
| "repository": { | ||
@@ -6,0 +6,0 @@ "type": "git", |
| # angular-cropperjs | ||
| ## Installation | ||
| [CropperJS](https://fengyuanchen.github.io/cropperjs/) integration for Angular 2/4 | ||
| ## How to use | ||
| To install this library, run: | ||
| 1- Install the library: | ||
@@ -11,12 +13,4 @@ ```bash | ||
| ## Consuming your library | ||
| 2- Import and load `AngularCropperjsModule` in the module you want to use, for example `AppModule`: | ||
| Once you have published your library to npm, you can import your library in any Angular application by running: | ||
| ```bash | ||
| $ npm install angular-cropperjs | ||
| ``` | ||
| and then from your Angular `AppModule`: | ||
| ```typescript | ||
@@ -28,2 +22,3 @@ import { BrowserModule } from '@angular/platform-browser'; | ||
| // | ||
| // Import angular-cropperjs | ||
@@ -38,3 +33,4 @@ import { AngularCropperjsModule } from 'angular-cropperjs'; | ||
| BrowserModule, | ||
| // | ||
| // Load angular-cropperjs | ||
@@ -49,3 +45,3 @@ AngularCropperjsModule | ||
| Once your library is imported, you can use its components, directives and pipes in your Angular application: | ||
| 3- Use the component in your template like this: | ||
@@ -57,2 +53,33 @@ ```html | ||
| **Using CropperJS methods:** | ||
| Use @ViewChild in your component to get the element: | ||
| *In your app.component.html* | ||
| ```html | ||
| <angular-cropper #angularCropper ..> | ||
| ``` | ||
| *And in your app.component.ts* | ||
| ```js | ||
| // | ||
| // Import AngularCropperjsComponent | ||
| import { AngularCropperjsComponent } from 'angular-cropperjs'; | ||
| // | ||
| // Get with @ViewChild | ||
| @ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent; | ||
| ``` | ||
| Then just call the CropperJS method you want: | ||
| *anywhere in your app.component.ts* | ||
| ```js | ||
| // | ||
| // Lets try to zoom | ||
| this.angularCropper.cropper.zoom(0.1); | ||
| ``` | ||
| ## Development | ||
@@ -59,0 +86,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.18%
32665
- Lines of code
- increased by0.47%
425
- Number of lines in readme file
- increased by38.57%
97
No dependency changes