|
@@ -10,6 +10,7 @@ import { CaseTagging } from "@/store/caseTagging";
|
|
import { ModelScene, QuoteScene, Scene, SceneType } from "@/store/scene";
|
|
import { ModelScene, QuoteScene, Scene, SceneType } from "@/store/scene";
|
|
import { transformSWToken, user } from "@/store/user";
|
|
import { transformSWToken, user } from "@/store/user";
|
|
import { base64ToBlob, drawImage } from "@/util";
|
|
import { base64ToBlob, drawImage } from "@/util";
|
|
|
|
+import { ref, watchEffect } from "vue";
|
|
|
|
|
|
export type MenuItem = {
|
|
export type MenuItem = {
|
|
key: string;
|
|
key: string;
|
|
@@ -104,59 +105,101 @@ export enum FuseImageType {
|
|
LASER,
|
|
LASER,
|
|
}
|
|
}
|
|
|
|
|
|
-// 获取fuse场景截图
|
|
|
|
-export type FuseImageRet = { type: FuseImageType; blob: Blob | null };
|
|
|
|
-export const getFuseImage = async (
|
|
|
|
- iframe: HTMLIFrameElement,
|
|
|
|
- width: number = 500,
|
|
|
|
- height: number = width
|
|
|
|
-) => {
|
|
|
|
|
|
+export const getSceneIframe = (iframe: HTMLIFrameElement) => {
|
|
const iframeElement = iframe.contentWindow?.document.documentElement;
|
|
const iframeElement = iframe.contentWindow?.document.documentElement;
|
|
-
|
|
|
|
if (!iframeElement) {
|
|
if (!iframeElement) {
|
|
return null;
|
|
return null;
|
|
}
|
|
}
|
|
const extIframe = iframeElement.querySelector(
|
|
const extIframe = iframeElement.querySelector(
|
|
".external"
|
|
".external"
|
|
) as HTMLIFrameElement;
|
|
) as HTMLIFrameElement;
|
|
- const targetIframe = extIframe || iframe;
|
|
|
|
|
|
+ return extIframe || iframe;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+export const getIframeSceneType = async (iframe: HTMLIFrameElement) => {
|
|
|
|
+ const targetIframe = getSceneIframe(iframe);
|
|
|
|
+ if (!targetIframe) {
|
|
|
|
+ return null;
|
|
|
|
+ }
|
|
const targetWindow: any = targetIframe.contentWindow;
|
|
const targetWindow: any = targetIframe.contentWindow;
|
|
const fuseCnavas = targetWindow.document.querySelector(
|
|
const fuseCnavas = targetWindow.document.querySelector(
|
|
".scene-canvas > canvas"
|
|
".scene-canvas > canvas"
|
|
) as HTMLElement;
|
|
) as HTMLElement;
|
|
|
|
|
|
if (fuseCnavas) {
|
|
if (fuseCnavas) {
|
|
- const dataURL = await targetWindow.sdk.screenshot(
|
|
|
|
- targetIframe.offsetWidth,
|
|
|
|
- targetIframe.offsetHeight
|
|
|
|
- );
|
|
|
|
- const res = await fetch(dataURL);
|
|
|
|
- const blob = await res.blob();
|
|
|
|
- return { type: FuseImageType.FUSE, blob };
|
|
|
|
|
|
+ return { type: FuseImageType.FUSE, sdk: targetWindow.sdk };
|
|
}
|
|
}
|
|
const isLaser = targetWindow.document.querySelector(".laser-layer");
|
|
const isLaser = targetWindow.document.querySelector(".laser-layer");
|
|
|
|
+ return {
|
|
|
|
+ type: isLaser ? FuseImageType.LASER : FuseImageType.KANKAN,
|
|
|
|
+ sdk: await targetWindow.__sdk,
|
|
|
|
+ };
|
|
|
|
+};
|
|
|
|
|
|
- if (isLaser) {
|
|
|
|
- const sdk = await targetWindow.__sdk;
|
|
|
|
- return new Promise<FuseImageRet>((resolve) => {
|
|
|
|
- sdk.scene.screenshot(width, height).done((data: string) => {
|
|
|
|
- resolve({ type: FuseImageType.FUSE, blob: base64ToBlob(data) });
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- } else {
|
|
|
|
- const sdk = targetWindow.__sdk;
|
|
|
|
- return new Promise<FuseImageRet>((resolve) => {
|
|
|
|
- sdk.Camera.screenshot(
|
|
|
|
|
|
+// 处理融合iframe页面
|
|
|
|
+export const fuseIframeHandler = (iframe: HTMLIFrameElement) => {
|
|
|
|
+ const currentType = ref<FuseImageType>();
|
|
|
|
+ const interval = setInterval(async () => {
|
|
|
|
+ const typeMap = await getIframeSceneType(iframe);
|
|
|
|
+ currentType.value = typeMap?.type;
|
|
|
|
+ }, 100);
|
|
|
|
+
|
|
|
|
+ const stopWatch = watchEffect((onCleanup) => {
|
|
|
|
+ if (currentType.value === FuseImageType.LASER) {
|
|
|
|
+ const $iframe = getSceneIframe(iframe)!;
|
|
|
|
+ const target = $iframe.contentWindow!.document.head;
|
|
|
|
+ const $style = document.createElement("style");
|
|
|
|
+ $style.type = "text/css";
|
|
|
|
+ var textNode = document.createTextNode(`
|
|
|
|
+ .mode-tab > .model-mode-tab.strengthen {
|
|
|
|
+ display: none
|
|
|
|
+ }
|
|
|
|
+ `);
|
|
|
|
+ $style.appendChild(textNode);
|
|
|
|
+ target.appendChild($style);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ return () => {
|
|
|
|
+ clearInterval(interval);
|
|
|
|
+ stopWatch();
|
|
|
|
+ };
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+// 获取fuse场景截图
|
|
|
|
+export type FuseImageRet = { type: FuseImageType; blob: Blob | null };
|
|
|
|
+export const getFuseImage = async (
|
|
|
|
+ iframe: HTMLIFrameElement,
|
|
|
|
+ width: number = 500,
|
|
|
|
+ height: number = width
|
|
|
|
+) => {
|
|
|
|
+ const typeMap = await getIframeSceneType(iframe);
|
|
|
|
+ let blob: Blob | null = null;
|
|
|
|
+
|
|
|
|
+ switch (typeMap?.type) {
|
|
|
|
+ case FuseImageType.FUSE:
|
|
|
|
+ const dataURL = await typeMap.sdk.screenshot(width, height);
|
|
|
|
+ const res = await fetch(dataURL);
|
|
|
|
+ blob = await res.blob();
|
|
|
|
+ break;
|
|
|
|
+ case FuseImageType.KANKAN:
|
|
|
|
+ const result = await typeMap.sdk.Camera.screenshot(
|
|
[{ width: width, height: width, name: "2k" }],
|
|
[{ width: width, height: width, name: "2k" }],
|
|
false
|
|
false
|
|
- ).then((result: any) => {
|
|
|
|
- resolve({
|
|
|
|
- type: FuseImageType.KANKAN,
|
|
|
|
- blob: base64ToBlob(result[0].data),
|
|
|
|
- });
|
|
|
|
|
|
+ );
|
|
|
|
+ blob = base64ToBlob(result[0].data);
|
|
|
|
+ break;
|
|
|
|
+ case FuseImageType.LASER:
|
|
|
|
+ blob = await new Promise<Blob | null>((resolve) => {
|
|
|
|
+ typeMap.sdk.scene
|
|
|
|
+ .screenshot(width, height)
|
|
|
|
+ .done((data: { dataUrl: string }) =>
|
|
|
|
+ resolve(base64ToBlob(data.dataUrl))
|
|
|
|
+ );
|
|
});
|
|
});
|
|
- });
|
|
|
|
|
|
+ break;
|
|
}
|
|
}
|
|
|
|
+ return { type: typeMap?.type, blob };
|
|
};
|
|
};
|
|
|
|
|
|
// 处理fuse融合一起的图,将热点加入图片内
|
|
// 处理fuse融合一起的图,将热点加入图片内
|