|
@@ -13,33 +13,16 @@ import { PictureSlice, Task } from "@/types";
|
|
|
* @returns Promise<HTMLImageElement>
|
|
|
*/
|
|
|
export async function loadImage(url: string): Promise<HTMLImageElement> {
|
|
|
- // if (store.currentTask && weakedMapImages.get(store.currentTask)) {
|
|
|
- // const imagesCache = weakedMapImages.get(store.currentTask);
|
|
|
- // if (imagesCache) {
|
|
|
- // // console.log("cached image", url);
|
|
|
- // const image = imagesCache.get(url);
|
|
|
- // if (image) return image;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // else loading image
|
|
|
-
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const image = new Image();
|
|
|
image.setAttribute("crossorigin", "anonymous");
|
|
|
image.src = url;
|
|
|
image.onload = () => {
|
|
|
- // if (store.currentTask) {
|
|
|
- // let imagesCache = weakedMapImages.get(store.currentTask);
|
|
|
- // if (!imagesCache) {
|
|
|
- // imagesCache = new Map<string, HTMLImageElement>();
|
|
|
- // weakedMapImages.set(store.currentTask, imagesCache);
|
|
|
- // }
|
|
|
- // imagesCache.set(url, image);
|
|
|
- // }
|
|
|
resolve(image);
|
|
|
};
|
|
|
- image.onerror = reject;
|
|
|
+ image.onerror = () => {
|
|
|
+ reject("图片载入错误");
|
|
|
+ };
|
|
|
});
|
|
|
}
|
|
|
|
|
@@ -167,10 +150,36 @@ export async function getDataUrlForSplitConfig(
|
|
|
return dataurl;
|
|
|
}
|
|
|
|
|
|
+export async function getDataUrlForCoverConfig(
|
|
|
+ image: HTMLImageElement,
|
|
|
+ configs: PictureSlice[]
|
|
|
+) {
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ canvas.width = image.naturalWidth;
|
|
|
+ canvas.height = image.naturalHeight;
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+ if (!ctx) {
|
|
|
+ console.log('canvas.getContext("2d") error');
|
|
|
+ throw new Error("canvas ctx error");
|
|
|
+ }
|
|
|
+ ctx.drawImage(image, 0, 0);
|
|
|
+ ctx.fillStyle = "#ffffff";
|
|
|
+ configs.forEach((config) => {
|
|
|
+ ctx.fillRect(config.x, config.y, config.w, config.h);
|
|
|
+ });
|
|
|
+
|
|
|
+ const blob: Blob = await new Promise((res) => {
|
|
|
+ canvas.toBlob((b) => res(b));
|
|
|
+ });
|
|
|
+ const dataurl = URL.createObjectURL(blob);
|
|
|
+ cacheFIFO();
|
|
|
+ return dataurl;
|
|
|
+}
|
|
|
+
|
|
|
export async function preDrawImage(_currentTask: Task | undefined) {
|
|
|
// console.log("preDrawImage=>curTask:", _currentTask);
|
|
|
|
|
|
- if (!_currentTask?.libraryId) return;
|
|
|
+ if (!_currentTask?.taskId) return;
|
|
|
|
|
|
let maxSliceWidth = 0; // 最大的裁切块宽度,图片容器以此为准
|
|
|
|
|
@@ -252,10 +261,39 @@ export async function preDrawImage(_currentTask: Task | undefined) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+export async function processSliceUrls(_currentTask: Task | undefined) {
|
|
|
+ if (!_currentTask?.taskId) return;
|
|
|
+
|
|
|
+ const getNum = (num) => Math.max(Math.min(1, num), 0);
|
|
|
+
|
|
|
+ const sheetUrls = _currentTask.sheetUrls || [];
|
|
|
+ const sheetConfig = store.setting.sheetConfig || [];
|
|
|
+
|
|
|
+ const urls = [];
|
|
|
+ for (let i = 0; i < sheetUrls.length; i++) {
|
|
|
+ const url = sheetUrls[i];
|
|
|
+ const configs = sheetConfig.filter((item) => item.i === i + 1);
|
|
|
+ if (!configs.length) {
|
|
|
+ urls[i] = url;
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ const image = await loadImage(url);
|
|
|
+ configs.forEach((item) => {
|
|
|
+ item.x = image.naturalWidth * getNum(item.x);
|
|
|
+ item.y = image.naturalHeight * getNum(item.y);
|
|
|
+ item.w = image.naturalWidth * getNum(item.w);
|
|
|
+ item.h = image.naturalHeight * getNum(item.h);
|
|
|
+ });
|
|
|
+
|
|
|
+ urls[i] = await getDataUrlForCoverConfig(image, configs);
|
|
|
+ }
|
|
|
+ return urls;
|
|
|
+}
|
|
|
+
|
|
|
export async function preDrawImageHistory(_currentTask: Task | undefined) {
|
|
|
console.log("preDrawImageHistory=>curTask:", _currentTask);
|
|
|
|
|
|
- if (!_currentTask?.libraryId) return;
|
|
|
+ if (!_currentTask?.taskId) return;
|
|
|
|
|
|
let maxSliceWidth = 0; // 最大的裁切块宽度,图片容器以此为准
|
|
|
|
|
@@ -340,12 +378,6 @@ export async function preDrawImageHistory(_currentTask: Task | undefined) {
|
|
|
|
|
|
export function addFileServerPrefixToTask(rawTask: Task): Task {
|
|
|
const newTask = JSON.parse(JSON.stringify(rawTask)) as Task;
|
|
|
-
|
|
|
- const fileServer = store.setting.fileServer;
|
|
|
- newTask.sliceUrls = newTask.sliceUrls?.map((s) => fileServer + s);
|
|
|
- newTask.sheetUrls = newTask.sheetUrls?.map((s) => fileServer + s);
|
|
|
- newTask.jsonUrl = fileServer + newTask.jsonUrl;
|
|
|
-
|
|
|
return newTask;
|
|
|
}
|
|
|
|