forked from Gitlink/forgeplus-react
92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { getUrl2, isDev } from 'educoder'
|
|
const $ = window.$
|
|
|
|
let _url_origin = getUrl2()
|
|
|
|
|
|
|
|
/**
|
|
props 说明：
|
|
imageId 源图片标签的id
|
|
previewId crop后预览dom的id
|
|
imageSrc 源图片src
|
|
width 数字格式
|
|
height 数字格式
|
|
*/
|
|
class Cropper extends Component {
|
|
|
|
componentDidMount() {
|
|
this.options = {
|
|
aspectRatio: 1,
|
|
preview: this.props.previewId ? `#${this.props.previewId}` : '.img-preview',
|
|
}
|
|
|
|
if (!window.Cropper) {
|
|
$.ajaxSetup({
|
|
cache: true
|
|
});
|
|
const _isDev = isDev()
|
|
let _path = _isDev ? 'public' : 'build'
|
|
|
|
$('head').append($('<link rel="stylesheet" type="text/css" />')
|
|
.attr('href', `${_url_origin}/react/${_path}/js/cropper/cropper.min.css`));
|
|
|
|
$.getScript(
|
|
`${_url_origin}/react/${_path}/js/cropper/cropper.js`,
|
|
(data, textStatus, jqxhr) => {
|
|
|
|
});
|
|
$.getScript(
|
|
`${_url_origin}/react/${_path}/js/cropper/html2canvas.min.js`,
|
|
(data, textStatus, jqxhr) => {
|
|
|
|
});
|
|
}
|
|
|
|
setTimeout(() => {
|
|
const image = document.getElementById(this.props.imageId || '__image');
|
|
this.cropper = new window.Cropper(image, this.options);
|
|
}, 1200)
|
|
}
|
|
|
|
renew = (image) => {
|
|
this.cropper && this.cropper.destroy();
|
|
this.cropper = new window.Cropper(image, this.options);
|
|
|
|
}
|
|
render() {
|
|
|
|
const { width, height, previewId, imageSrc } = this.props;
|
|
|
|
return (
|
|
<div>
|
|
{/* This rule is very important, please do not ignore this! */}
|
|
<style>{`
|
|
.wrapper {
|
|
width: ${ width ? (width + 'px') : '500px'};
|
|
height: ${ height ? (height + 'px') : '500px'};
|
|
border: 1px solid #eee;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
.preview-lg {
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
}
|
|
`}</style>
|
|
<div className="wrapper">
|
|
<img id={this.props.imageId || "__image"} src={`${imageSrc}`}></img>
|
|
</div>
|
|
{!previewId && <div id="img-preview" className="img-preview preview-lg" style={{ width: '128px', height: '128px', }}>
|
|
</div>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Cropper;
|