生成预览图片

src/page-instrument/view-product-img/index.tsx

@@ -53,8 +53,8 @@ export default defineComponent({
 				item.base64 = await downPng();
 			}
 			const nextItem = detailData.product.find((item: any) => !item.state);
-			if(!item && nextItem){
-				nextItem.state = true
+			if (!item && nextItem) {
+				nextItem.state = true;
 			}
 			if (nextItem) {
 				state.musicRenderType = nextItem.type;
@@ -76,23 +76,27 @@ export default defineComponent({
 		const downPng = () => {
 			return new Promise((resolve) => {
 				setTimeout(async () => {
-					const svg: any = document.getElementById("osmdSvgPage1")?.cloneNode(true);
-					if (!svg) {
+					try {
+						const svg: any = document.getElementById("osmdSvgPage1")?.cloneNode(true);
+						if (!svg) {
+							resolve("");
+							return;
+						}
+						const cw = svg.width.animVal.value;
+						const ch = svg.height.animVal.value;
+						const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+						rect.setAttribute("x", "0");
+						rect.setAttribute("y", "0");
+						rect.setAttribute("width", `${cw * 2}`);
+						rect.setAttribute("height", `${ch * 2}`);
+						rect.setAttribute("fill", "#fff");
+						svg.prepend(rect);
+						const _canvas = svg2canvas(svg.outerHTML);
+						const base64 = _canvas.toDataURL("image/png", 1);
+						resolve(base64);
+					} catch (error) {
 						resolve("");
-						return;
 					}
-					const cw = svg.width.animVal.value;
-					const ch = svg.height.animVal.value;
-					const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-					rect.setAttribute("x", "0");
-					rect.setAttribute("y", "0");
-					rect.setAttribute("width", `${cw * 2}`);
-					rect.setAttribute("height", `${ch * 2}`);
-					rect.setAttribute("fill", "#fff");
-					svg.prepend(rect);
-					const _canvas = svg2canvas(svg.outerHTML);
-					const base64 = _canvas.toDataURL("image/png", 1);
-					resolve(base64);
 				}, 500);
 			});
 		};