|
|
@@ -16,6 +16,8 @@ import { CirclePlus, Remove } from '@element-plus/icons-vue'
|
|
|
import iconRate from '../col-upload/images/icon_rate.png'
|
|
|
import request from '@/helpers/request'
|
|
|
|
|
|
+import Cropper from "cropperjs";
|
|
|
+import "cropperjs/dist/cropper.css";
|
|
|
export default defineComponent({
|
|
|
name: 'cropper',
|
|
|
props: {
|
|
|
@@ -63,7 +65,8 @@ export default defineComponent({
|
|
|
url: {
|
|
|
upload: '/sys/common/saveToImgByStr'
|
|
|
},
|
|
|
- submitLoading: false
|
|
|
+ submitLoading: false,
|
|
|
+ myCropper:null as any
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -84,7 +87,9 @@ export default defineComponent({
|
|
|
* 确认截图
|
|
|
*/
|
|
|
okHandel() {
|
|
|
- ;(this as any).$refs.cropperRef.getCropBlob(async data => {
|
|
|
+ ;(this as any).myCropper.getCroppedCanvas({
|
|
|
+ imageSmoothingQuality: 'high'
|
|
|
+ }).toBlob(async data => {
|
|
|
this.submitLoading = true
|
|
|
const options: any = this.options
|
|
|
const fileName =
|
|
|
@@ -117,7 +122,8 @@ export default defineComponent({
|
|
|
for (let key in this.dataObj) {
|
|
|
formData.append(key, this.dataObj[key])
|
|
|
}
|
|
|
- formData.append('file', this.blobToFile(data, fileName), fileName)
|
|
|
+ // this.blobToFile(data, fileName)
|
|
|
+ formData.append('file', data, fileName)
|
|
|
await umiRequest(this.ossUploadUrl, {
|
|
|
method: 'POST',
|
|
|
data: formData
|
|
|
@@ -167,6 +173,22 @@ export default defineComponent({
|
|
|
//向右旋转
|
|
|
rotateRight() {
|
|
|
;(this as any).$refs.cropperRef.rotateRight()
|
|
|
+ },
|
|
|
+ initImgCropper(){
|
|
|
+ this.myCropper = new Cropper((this as any).$refs.imgCropper, {
|
|
|
+ viewMode: 1, //定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以延伸到画布外部，而值为1、2或3将限制裁剪框的大小为画布的大小。viewMode为2或3会将画布限制为容器。请注意，如果画布和容器的比例相同，则2和3之间没有差别。
|
|
|
+ dragMode: 'move', //定义的拖动模式裁剪器.canvas和容器一样，2和3没有区别。move:移动画布 crop:创建新的裁剪框（默认） none:什么也不做
|
|
|
+ //定义裁剪框的固定纵横比。默认情况下，裁剪框为自由比率。
|
|
|
+ aspectRatio: this.options.autoCropWidth / this.options.autoCropHeight,
|
|
|
+ initialAspectRatio: 1,
|
|
|
+ autoCropArea: 1, //定义0到1之间的fA编号。定义自动裁剪区域大小（百分比）。默认0.8
|
|
|
+ cropBoxMovable: true, //允许通过拖动移动裁剪框。默认true
|
|
|
+ cropBoxResizable: false, //以通过拖动来调整裁剪框的大小 默认true
|
|
|
+ background: false, //显示容器的网格背景
|
|
|
+ movable: true, //移动图像
|
|
|
+ modal: true,
|
|
|
+ preview: '.before'
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
render() {
|
|
|
@@ -178,6 +200,8 @@ export default defineComponent({
|
|
|
title={this.options.title}
|
|
|
closeOnClickModal={false}
|
|
|
width={'900px'}
|
|
|
+ destroyOnClose={true}
|
|
|
+ onOpened={()=>{this.initImgCropper()}}
|
|
|
v-slots={{
|
|
|
footer: () => (
|
|
|
<span class="dialog-footer !text-center block">
|
|
|
@@ -200,7 +224,10 @@ export default defineComponent({
|
|
|
>
|
|
|
<ElRow>
|
|
|
<ElCol xs={24} md={12} style={{ width: '350px' }}>
|
|
|
- <VueCropper
|
|
|
+ <div class={styles.imgwarp}>
|
|
|
+ <img ref="imgCropper" id="myImages" src={this.options.img} alt="" style={{ height: '350px' }}/>
|
|
|
+ </div>
|
|
|
+ {/* <VueCropper
|
|
|
ref="cropperRef"
|
|
|
img={this.options.img}
|
|
|
info={true}
|
|
|
@@ -214,8 +241,8 @@ export default defineComponent({
|
|
|
enlarge={this.options.enlarge}
|
|
|
onRealTime={this.realTime}
|
|
|
style={{ height: '350px' }}
|
|
|
- />
|
|
|
- <div class="flex pt-2">
|
|
|
+ /> */}
|
|
|
+ {/* <div class="flex pt-2">
|
|
|
<div
|
|
|
onClick={() => {
|
|
|
this.changeScale(1)
|
|
|
@@ -245,23 +272,23 @@ export default defineComponent({
|
|
|
>
|
|
|
<img src={iconRate} class="w-[30px] h-[30px]" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> */}
|
|
|
</ElCol>
|
|
|
<ElCol xs={24} md={12} style={{ height: '350px' }}>
|
|
|
<div class={styles.previewImg}>
|
|
|
<span>预览图片</span>
|
|
|
<div
|
|
|
class={
|
|
|
- this.options.previewsCircle
|
|
|
+ [this.options.previewsCircle
|
|
|
? styles['avatar-upload-preview']
|
|
|
- : styles['avatar-upload-preview_range']
|
|
|
+ : styles['avatar-upload-preview_range'], 'before']
|
|
|
}
|
|
|
style={{
|
|
|
width: this.options.autoCropWidth + 'px',
|
|
|
height: this.options.autoCropHeight + 'px'
|
|
|
}}
|
|
|
>
|
|
|
- <ElImage src={this.previews.url} style={this.previews.img} />
|
|
|
+ {/* <ElImage src={this.previews.url} style={this.previews.img} /> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
</ElCol>
|
mo