SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

сохранение новых картинок

Browse Source
This commit is contained in:
Nastya 2024-11-14 22:24:09 +03:00
parent fbea252656
commit 03afb130b6
8 changed files with 75 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/model/CropModal/CropModal.ts
View File

@ -103,6 +103,7 @@ export type CropOnOpenType = {
questionId: string;
questionType: AcceptedQuestionTypes;
quizId: string;
variantId?: string;
selfClose: () => void;
setPictureUploading: (is: boolean) => void;

2
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -119,7 +119,7 @@ export default function OptionsAndPicture({
<CropModalInit
originalImageUrl={variant?.originalImageUrl}
editedUrlImagesList={variant?.editedUrlImagesList}
questionId={question.backendId.toString()}
questionId={question.id.toString()}
questionType={question.type}
quizId={quizQid}
variantId={variant?.id}

2
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -100,7 +100,7 @@ export default function OptionsPicture({
<CropModalInit
originalImageUrl={variant?.originalImageUrl}
editedUrlImagesList={variant?.editedUrlImagesList}
questionId={question.backendId.toString()}
questionId={question.id.toString()}
questionType={question.type}
quizId={quizQid}
variantId={variant?.id}

2
src/pages/Questions/UploadImage/index.tsx
View File

@ -82,7 +82,7 @@ export default function UploadImage({
<CropModalInit
originalImageUrl={question.content.originalBack}
editedUrlImagesList={question.content?.editedUrlImagesList}
questionId={question.backendId.toString()}
questionId={question.id.toString()}
questionType={question.type}
quizId={quiz.id}
open={openCropModal}

2
src/stores/questions/actions.ts
View File

@ -422,11 +422,13 @@ export const uploadQuestionImage = async (
blob: Blob,
updateFn: (question: AnyTypedQuizQuestion, imageId: string) => void,
) => {
console.log("Я принял айди вопроса и квиза " , questionId," ", quizQid)
const question = useQuestionsStore
.getState()
.questions.find((q) => q.id === questionId);
if (!question || !quizQid) return;
console.log("question " , question)
const [images, addImagesError] = await quizApi.addImages(
question.quizId,
blob,

21
src/ui_kit/Modal/CropModal/CropGeneral.tsx
View File

@ -155,26 +155,7 @@ export const CropGeneral: FC<Props> = ({
}))
}
}
function в (image: HTMLImageElement) {
return new Promise<Blob>((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return reject(new Error("No 2d context"));
canvas.width = image.naturalHeight;
canvas.height = image.naturalWidth;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2);
canvas.toBlob((blob) => {
if (!blob) return reject(new Error("Failed to create blob"));
resolve(blob);
});
});
}
useEffect(() => {
if (!crop.width && !crop.height) { calcCrop() }
}, [crop])

89
src/ui_kit/Modal/CropModal/index.tsx
View File

@ -14,6 +14,7 @@ import {
import { isImageBlobAGifFile } from "@/utils/isImageBlobAGifFile";
import AlertModalDeleteImage from "./AlertModalDeleteImage"
import { getModifiedImageBlob } from "./utils/imageManipulation";
import { updateQuestion, uploadQuestionImage } from "@/stores/questions/actions";
export const CropModalInit: FC<CropOnOpenType> = ({
open,
@ -49,9 +50,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
(async () => {
let newImageBlob = imageBlob;
if (originalImageUrl !== undefined) {
const response = await fetch(originalImageUrl, {
mode: 'no-cors',
});
const response = await fetch(originalImageUrl);
newImageBlob = await response.blob();
console.log(newImageBlob)
};
@ -119,6 +118,7 @@ export const CropModalInit: FC<CropOnOpenType> = ({
}, [open, originalImageUrl, editedUrlImagesList, questionId, questionType])
const closeModal = () => {
setReadyDelete(false)
setOriginalImageUrl("");
setEditedImages(null);
selfClose()
@ -126,35 +126,78 @@ export const CropModalInit: FC<CropOnOpenType> = ({
}
const handleCropModalDeleteImageClick = () => {
if (variantId) {//Работаем с вариантом
updateQuestion(questionId, (question) => {
if ("variants" in question.content) {
const variant = question.content.variants.find(
(variant) => variant.id === variantId,
);
if (!variant) return console.error("В вопросе не был найден вариант ", variantId);
variant.extendedText = "";
variant.originalImageUrl = "";
if ("editedUrlImagesList" in variant) variant.editedUrlImagesList = null;
}
})
} else {//Работаем с контентом
updateQuestion(questionId, (question) => {
question.content.back = null;
question.content.originalBack = null;
if ("editedUrlImagesList" in question.content) question.content.editedUrlImagesList = null;
})
}
//сохранить пустую строку и дефолтные настройки картинки в самом вопросе, не информируя БД о удалении картинки
closeModal()
};
const saveImagesAndRules = async (blob?: Blob) => {
const saveImagesAndRules = async () => {
setPictureUploading(true)
const img = document.createElement("img");
img.src = editedImages.mobile.url
const bloba = await getModifiedImageBlob(img, editedImages.mobile.newRules.crop, editedImages.mobile.newRules.darken)
const anchor = document.createElement("a");
const blobUrl = URL.createObjectURL(bloba);
anchor.setAttribute("download", "ЖОПА");
anchor.href = blobUrl;
anchor.click();
closeModal()
setTimeout(() => setPictureUploading(false), 1000)
// if (!selectedVariantId) return;
if (editedImages === null) return;
// uploadQuestionImage(questionId, quizId, imageBlob, (question, url) => {
// if (!("variants" in question.content)) return;
//Преобразовываем и отправляем на бек картинки.
// const variant = question.content.variants.find(
// (variant) => variant.id === selectedVariantId,
// );
// if (!variant) return;
if (variantId) {//Работаем с вариантом
for (let k in editedImages) {
let key = k;
// variant.extendedText = url;
// });
const img = document.createElement("img");
img.crossOrigin = 'anonymous';
img.src = editedImages[key].url;
const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken);
uploadQuestionImage(questionId, quizId, blob, (question, url) => {
if (!("variants" in question.content)) return;
const variant = question.content.variants.find(
(variant) => variant.id === variantId,
);
if (!variant) return;
if (!("editedUrlImagesList" in variant)) variant.editedUrlImagesList = {}
variant.editedUrlImagesList[key] = url;
});
}
} else {//Работаем с контентом
for (let k in editedImages) {
let key = k;
const img = document.createElement("img");
img.crossOrigin = 'anonymous';
img.src = editedImages[key].url;
const blob = await getModifiedImageBlob(img, editedImages[key].newRules.crop, editedImages[key].newRules.darken);
uploadQuestionImage(questionId, quizId, blob, (question, url) => {
if (!("editedUrlImagesList" in question.content)) question.content.editedUrlImagesList = {};
question.content.editedUrlImagesList[key] = url;
});
}
}
closeModal();
setPictureUploading(false);
};
if (acceptedOriginalImageUrl.length === 0) return <></>

2
src/ui_kit/Modal/CropModal/utils/imageManipulation.ts
View File

@ -27,6 +27,8 @@ export function getModifiedImageBlob(
darken: number,
) {
return new Promise<Blob>((resolve, reject) => {
console.log("crop")
console.log(crop)
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return reject(new Error("No 2d context"));