I am trying to use the cropperjs library in an Angular project. The cropper example from the documentation works fine on a normal static web page (simple index.html with <script>
tag for the js and a link to the cropper.css file).
But for some reason this does not work.
Cropper seems to load (console.log(Cropper)
does the the function), and there is some functionality, but it looks like the style is missing.
cropper.component.ts
import {Component} from "@angular/core";
var foo = require('cropperjs/dist/cropper');
@Component({
selector: "cropper",
template: `
<div>
<img id="image" src="https://dl.dropboxusercontent.com/s/vyeh3vqc93hbye4/Capture%20d%27%C3%A9cran%202016-05-27%2017.14.53.png?dl=0">
</div>
`,
styleUrls: ['../styles/cropper.css', '../styles/cropper.component.css']
})
export class CropperComponent implements OnInit{
ngOnInit(){
var image = document.getElementById('image');
var cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop: function(e) {
console.log(e.detail.x);
console.log(e.detail.y);
console.log(e.detail.width);
console.log(e.detail.height);
console.log(e.detail.rotate);
console.log(e.detail.scaleX);
console.log(e.detail.scaleY);
},
});
}
}
Looking in developers tools, the tags added by cropper.js did not have add the custom attributes Angular uses for styling (the ones that look like _ngcontent-xpk-4
), so the cropperjs styling did not work.
Just adding the cropper.css (<link rel="stylesheet" href=".../cropper.css">
) in index.html instead of referring to it in the component solved it.