beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: overlapping in export

Browse source
This commit is contained in:
httpjamesm 2023-10-17 19:52:06 -04:00
parent 9dc76ab236
commit 37a4bef438
No known key found for this signature in database
1 changed files with 3 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
View file

@ -50,9 +50,6 @@ export const ImageEditorOverlayContext = createContext(
const ImageEditorOverlay = (props: IProps) => {
// const [originalWidth, originalHeight] = [props.file?.w, props.file?.h];
const [originalWidth, setOriginalWidth] = useState(0);
const [originalHeight, setOriginalHeight] = useState(0);
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const originalSizeCanvasRef = useRef<HTMLCanvasElement | null>(null);
const parentRef = useRef<HTMLDivElement | null>(null);
@ -76,8 +73,6 @@ const ImageEditorOverlay = (props: IProps) => {
const [transformationPerformed, setTransformationPerformed] =
useState(false);
const [canvasLoading, setCanvasLoading] = useState(false);
useEffect(() => {
if (!canvasRef.current || !originalSizeCanvasRef.current) {
return;
@ -149,8 +144,6 @@ const ImageEditorOverlay = (props: IProps) => {
// setNonFilteredFileURL(img.src);
img.onload = () => {
setOriginalWidth(img.width);
setOriginalHeight(img.height);
const scale = Math.min(
parentRef.current?.clientWidth / img.width,
parentRef.current?.clientHeight / img.height
@ -190,21 +183,8 @@ const ImageEditorOverlay = (props: IProps) => {
const context = canvas.getContext('2d');
if (!context) return;
image.onload = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
console.log(originalWidth, originalHeight);
canvas.width = originalWidth;
canvas.height = originalHeight;
context.drawImage(image, 0, 0, originalWidth, originalHeight);
context.restore();
console.log('canvas redrawn');
console.log('toblobbing now');
canvas.toBlob(callback, mimeType);
};
};
return (
<>
@ -233,9 +213,7 @@ const ImageEditorOverlay = (props: IProps) => {
display="flex"
alignItems="center"
justifyContent="center">
{(fileURL === null || canvasLoading) && (
<CircularProgress />
)}
{fileURL === null && <CircularProgress />}
<canvas
ref={canvasRef}
// height={originalHeight}
@ -245,9 +223,7 @@ const ImageEditorOverlay = (props: IProps) => {
// maxWidth: '100%',
// maxHeight: '1000px',
display:
fileURL === null || canvasLoading
? 'none'
: 'block',
fileURL === null ? 'none' : 'block',
position: 'absolute',
// transform: `translate(${cropOffsetX}px, ${cropOffsetY}px)`,
}}
@ -341,11 +317,9 @@ const ImageEditorOverlay = (props: IProps) => {
startIcon={<DownloadIcon />}
onClick={() => {
if (!canvasRef.current) return;
setCanvasLoading(true);
exportCanvasToBlob((blob) => {
if (!blob) {
setCanvasLoading(false);
return console.error('no blob');
}
// create a link
@ -358,7 +332,6 @@ const ImageEditorOverlay = (props: IProps) => {
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href);
setCanvasLoading(false);
});
}}
label={'Download Edited'}