Skip to content

N
NodeJS_668036

Five-菜鸟级 / NodeJS_668036
与 Fork 源项目一致

Fork自 inscode / NodeJS

通知 1
Star 0
Fork 0
N
NodeJS_668036
提交 51c6405e 编写于 作者: Q qq_41923622
浏览文件
操作

Fri Feb 7 11:15:00 CST 2025 inscode

上级 d75f300f
显示空白变更内容
内联 并排
Showing with 222 addition and 196 deletion
src/tiny-image-editor/src/components/Download.tsx
浏览文件 @ 51c6405e
......@@ -110,6 +110,8 @@ const useDownload = () => {
annotations:annotations,
imageWidth: canvas.backgroundImage.width,
imageHeight: canvas.backgroundImage.height,
imageLeft: canvas.backgroundImage.left,
imageTop: canvas.backgroundImage.top,
originalCanvasWidth: canvas.getWidth(),
originalCanvasHeight: canvas.getHeight(),
imgUrl: currentSrc,
......
src/tiny-image-editor/src/components/Upload.tsx
浏览文件 @ 51c6405e
......@@ -3,14 +3,14 @@ import React, { forwardRef, useContext, useImperativeHandle } from 'react';
import { ACTION, LANG, MENU_TYPE_ENUM, MENU_TYPE_TEXT } from '../constants';
import { EditorContext } from '../util';
import Popover from './setting/Popover';
import {fabric} from 'fabric';
import { fabric } from 'fabric';
import ArrowClass from '../helpers/Arrow';
function annotationsInit(imgData,canvas,historyRef,positionInfo){
function annotationsInit(imgData, canvas, historyRef, positionInfo) {
const { scaleX, scaleY, leftOffset, topOffset, } = positionInfo
const { scaleX,scaleY} = positionInfo
console.log("scaleX,scaleY ",scaleX,scaleY,currentCanvasWidth,currentCanvasHeight,currentImageWidth,currentImageHeight,imageWidth,imageHeight,imgData)
// 遍历标注信息，重新创建元素并添加到画布上
imgData.annotations.forEach((annotation) => {
let newObject;
......@@ -18,16 +18,16 @@ function annotationsInit(imgData,canvas,historyRef,positionInfo){
switch (annotation.type) {
case 'rect':
newObject = new fabric.Rect({
left: annotation.left* scaleX,
top: annotation.top* scaleY,
left: annotation.left * scaleX + leftOffset,
top: annotation.top * scaleY + topOffset,
originX: 'left',
originY: 'top',
width: annotation.width* scaleX,
height: annotation.height* scaleY,
angle: annotation.angle||0,
width: annotation.width * scaleX,
height: annotation.height * scaleY,
angle: annotation.angle || 0,
fill: annotation.fill || 'rgba(255,0,0,0)',
stroke: annotation.stroke,
strokeWidth: annotation.size* Math.max(scaleX, scaleY),
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
transparentCorners: false,
opacity: annotation.opacity || 1
});
......@@ -36,9 +36,9 @@ function annotationsInit(imgData,canvas,historyRef,positionInfo){
case 'i-text':
case 'text':
newObject = new fabric.IText(annotation.text, {
left: annotation.left* scaleX,
top: annotation.top* scaleY,
width: annotation.width* scaleX,
left: annotation.left * scaleX + leftOffset,
top: annotation.top * scaleY + topOffset,
width: annotation.width * scaleX,
fontSize: annotation.fontSize,
fill: annotation.fill,
id: Math.random() * 4 + '_' + Date.now(),
......@@ -47,40 +47,40 @@ function annotationsInit(imgData,canvas,historyRef,positionInfo){
break;
case 'circle':
newObject = new fabric.Circle({
left: annotation.left* scaleX,
top: annotation.top* scaleY,
radius: (annotation.width / 2)* Math.max(scaleX, scaleY),
angle: annotation.angle||0,
fill: annotation.fill||'',
left: annotation.left * scaleX + leftOffset,
top: annotation.top * scaleY + topOffset,
radius: (annotation.width / 2) * Math.max(scaleX, scaleY),
angle: annotation.angle || 0,
fill: annotation.fill || '',
originX: 'left',
originY: 'top',
stroke: annotation.stroke,
strokeWidth: annotation.size* Math.max(scaleX, scaleY),
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
opacity: annotation.opacity || 1
});
break;
case 'arrow' :
let pointList = annotation.pointList||[annotation.left,annotation.top,annotation.left,annotation.top]
pointList[0] = pointList[0]*scaleX;
pointList[1] = pointList[1]*scaleY;
pointList[2] = pointList[2]*scaleX;
pointList[3] = pointList[3]*scaleY;
case 'arrow':
let pointList = annotation.pointList || [annotation.left, annotation.top, annotation.left, annotation.top]
pointList[0] = pointList[0] * scaleX + leftOffset;
pointList[1] = pointList[1] * scaleY + topOffset;
pointList[2] = pointList[2] * scaleX + leftOffset;
pointList[3] = pointList[3] * scaleY + topOffset;
newObject = new ArrowClass(pointList, {
strokeWidth: annotation.size* Math.max(scaleX, scaleY),
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
stroke: annotation.stroke,
id: new Date().valueOf() + '_' + Math.random() * 4,
});
newObject.strokeUniform = true;
break;
case 'path' :
case 'path':
const adjustedPath = annotation.path.map((segment) => {
const newSegment = [...segment];
for (let i = 1; i < newSegment.length; i++) {
if (typeof newSegment[i] === 'number') {
if (i % 2 === 1) {
newSegment[i] *= scaleX;
newSegment[i] = newSegment[i] * scaleX + leftOffset;
} else {
newSegment[i] *= scaleY;
newSegment[i] = newSegment[i] * scaleY + topOffset;
}
}
}
......@@ -89,7 +89,7 @@ function annotationsInit(imgData,canvas,historyRef,positionInfo){
newObject = new fabric.Path(adjustedPath, {
fill: annotation.fill,
stroke: annotation.stroke,
strokeWidth: annotation.size* Math.max(scaleX, scaleY),
strokeWidth: annotation.size * Math.max(scaleX, scaleY),
opacity: annotation.opacity || 1
});
break;
......@@ -98,7 +98,7 @@ function annotationsInit(imgData,canvas,historyRef,positionInfo){
if (newObject) {
console.log(`annotation`,newObject,annotation,canvas)
console.log(`annotation`, newObject, annotation, canvas)
canvas.add(newObject)
canvas.setActiveObject(newObject);
historyRef.current.updateCanvasState(ACTION.add, true, true);
......@@ -116,19 +116,19 @@ export const useUpload = () => {
initBackGroundImage,
} = useContext(EditorContext);
const handleUpload = (e: any,imgData?:any) => {
console.log(`e`,e,imgData)
const handleUpload = (e: any, imgData?: any) => {
console.log(`e`, e, imgData)
const canvas = canvasInstanceRef.current;
if(canvasEl?.current&&typeof e === 'string'){
if (canvasEl ?.current && typeof e === 'string') {
let imgObj = new Image();
if(imgData){
if (imgData) {
// 获取当前图片和画布尺寸
const currentImageWidth = canvas.backgroundImage.width;
const currentImageHeight = canvas.backgroundImage.height;
const currentCanvasWidth = canvas.getWidth();
const currentCanvasHeight = canvas.getHeight();
let imageWidth = imgData.imageWidth||imgData.imgWidth;
let imageHeight = imgData.imageHeight||imgData.imgHeight;
let imageWidth = imgData.imageWidth || imgData.imgWidth;
let imageHeight = imgData.imageHeight || imgData.imgHeight;
// 计算缩放比例
const originalScaleX = imgData.originalCanvasWidth / imageWidth;
......@@ -139,31 +139,48 @@ export const useUpload = () => {
const scaleX = currentScaleX / originalScaleX;
const scaleY = currentScaleY / originalScaleY;
const newScaleFactor = Math.min(currentCanvasWidth / imageWidth, currentCanvasHeight / imageHeight);
const newLeft = (currentCanvasWidth - imageWidth * newScaleFactor) / 2;
const newTop = (currentCanvasHeight - imageHeight * newScaleFactor) / 2;
annotationsInit(imgData,canvas,historyRef,{
const leftOffset = newLeft - imgData.imageLeft * scaleX;
const topOffset = newTop - imgData.imageTop * scaleY;
imgObj.src = e as string;
initBackGroundImage(e as string, true, () => {
historyRef.current.updateCanvasState(ACTION.add);
annotationsInit(imgData, canvas, historyRef, {
scaleX,
scaleY,
newLeft,
newTop,
leftOffset,
topOffset,
});
}
return;
}, {
newLeft,
newTop,
newScaleFactor,
})
} else{
}
} else {
imgObj.src = e as string;
initBackGroundImage(e as string, true, () => {
historyRef.current.updateCanvasState(ACTION.add);
return;
})
}
return;
}
if (
!canvas ||
!canvasEl.current ||
!e.target.files.length ||
!e.target.files[0]?.type?.includes('image')
!e.target.files[0] ?.type ?.includes('image')
) {
return;
}
......
src/tiny-image-editor/src/components/init.tsx
浏览文件 @ 51c6405e
......@@ -142,12 +142,19 @@ export const useInit = ({ url }: IProps) => {
(oImg: any) => {
const center = canvas.getCenter();
const imgHeight = oImg.height;
/** 图片过大，使其大小正好跟容器一致 */
oImg.scale(height / imgHeight);
if(annotationsData){
if(annotationsData){
let imgScaleFactor = height / imgHeight
let newScaleFactor = imgScaleFactor/annotationsData.newScaleFactor
oImg.scale(imgScaleFactor);
oImg.set({
left:annotationsData.newLeft*newScaleFactor,
top: annotationsData.newTop*newScaleFactor,
});
}else{
/** 图片过大，使其大小正好跟容器一致 */
oImg.scale(height / imgHeight);
/** 使得图片在canvas中间 */
oImg.set({
left: center.left - (oImg.width * (height / imgHeight)) / 2,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或