<template>
|
<div v-if="isOne && type === 'image'" class="attr-item-box">
|
<div class="bg-item">
|
<Button @click="cropper" type="text" long>{{ $t('cropperImg') }}</Button>
|
</div>
|
</div>
|
<cropperDialog ref="cropperDialogRef"></cropperDialog>
|
</template>
|
|
<script setup name="CropperImg">
|
import useSelect from '@/hooks/select';
|
|
import cropperDialog from '@/components/cropperDialog.vue';
|
import { Utils } from '@kuaitu/core';
|
const { insertImgFile } = Utils;
|
|
const update = getCurrentInstance();
|
// const canvasEditor = inject('canvasEditor');
|
const { canvasEditor, isOne } = useSelect();
|
const type = ref('');
|
const cropperDialogRef = ref();
|
const cropper = () => {
|
console.log('🚀 ~ cropper ~ cropper:');
|
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
|
if (activeObject && activeObject.type === 'image') {
|
console.log('🚀 ~ cropper ~ activeObject:', activeObject);
|
cropperDialogRef.value.open({ img: activeObject._element.src }, async (data) => {
|
console.log('🚀 ~ cropper ~ data:', data);
|
const imgEl = await insertImgFile(data);
|
// const width = activeObject.get('width');
|
// const height = activeObject.get('height');
|
// const scaleX = activeObject.get('scaleX');
|
// const scaleY = activeObject.get('scaleY');
|
// console.log('🚀 ~ cropper ~ scaleX:', scaleX);
|
// console.log('🚀 ~ cropper ~ scaleY:', scaleY);
|
activeObject.setSrc(imgEl.src, () => {
|
// activeObject.set('scaleX', scaleX);
|
// activeObject.set('scaleY', scaleY);
|
canvasEditor.canvas.renderAll();
|
});
|
imgEl.remove();
|
});
|
}
|
};
|
|
// 替换图片
|
// const repleace = async () => {
|
// const activeObject = canvasEditor.canvas.getActiveObjects()[0];
|
// if (activeObject && activeObject.type === 'image') {
|
// // 图片
|
// const [file] = await selectFiles({ accept: 'image/*', multiple: false });
|
// // 转字符串
|
// const fileStr = await getImgStr(file);
|
// // 字符串转El
|
// const imgEl = await insertImgFile(fileStr);
|
// const width = activeObject.get('width');
|
// const height = activeObject.get('height');
|
// const scaleX = activeObject.get('scaleX');
|
// const scaleY = activeObject.get('scaleY');
|
// activeObject.setSrc(imgEl.src, () => {
|
// activeObject.set('scaleX', (width * scaleX) / imgEl.width);
|
// activeObject.set('scaleY', (height * scaleY) / imgEl.height);
|
// canvasEditor.canvas.renderAll();
|
// });
|
// imgEl.remove();
|
// }
|
// };
|
|
const init = () => {
|
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
|
if (activeObject) {
|
type.value = activeObject.type;
|
update?.proxy?.$forceUpdate();
|
}
|
};
|
|
onMounted(() => {
|
canvasEditor.on('selectOne', init);
|
});
|
|
onBeforeUnmount(() => {
|
canvasEditor.off('selectOne', init);
|
});
|
</script>
|
<style lang="less" scoped>
|
.attr-item-box {
|
margin-top: 8px;
|
}
|
</style>
|
