调整

2023-10-07 15:30:41 +08:00
parent a2f2737741
commit b3804e9b13
11 changed files with 965 additions and 50 deletions
--- a/public/js/download.js
+++ b/public/js/download.js
@@ -0,0 +1,75 @@
+function init() {
+    if (window.location.href.startsWith('https://www.aliexpress.us/item/')) {
+        const popup = document.createElement("div")
+        popup.innerText = "下载图片"
+        const styles = {
+            position: "fixed",
+            right: '10px',
+            top: '60px',
+            zIndex: 9999,
+            padding: "8px",
+            background: "#409EFF",
+            color: "#fff",
+            borderRadius: "8px",
+            cursor: "pointer"
+        }
+        for (const e in styles) {
+            popup.style[e] = styles[e]
+        }
+
+        popup.addEventListener('click', async () => {
+            let obj = window.runParams.data;
+            let id = obj.productInfoComponent.idStr
+
+            var baseList = [];
+            var downloadList = []
+
+            var imgObjList = document.querySelectorAll('#product-description img')
+            for (var i = 0; i < imgObjList.length; i++) {
+                baseList.push({type: 0, index: i+1, src: imgObjList[i].src})
+            }
+
+            for (var j = 0; j < obj.imageComponent.imagePathList.length; j++) {
+                baseList.push({type: 1, index: j+1, src: obj.imageComponent.imagePathList[j]})
+            }
+
+            var zip = new JSZip();
+            var imgsBanner = zip.folder("轮插图");
+            var imgsDetail = zip.folder("详情图");
+            for (var k = 0; k < baseList.length; k++) {
+                let type = baseList[k].type
+                let index = baseList[k].index
+                let image = new Image();
+                // 解决跨域 Canvas 污染问题
+                image.setAttribute("crossOrigin", "anonymous");
+                image.onload = function () {
+                  let canvas = document.createElement("canvas");
+                  canvas.width = image.width;
+                  canvas.height = image.height;
+                  let context = canvas.getContext("2d");
+                  context.drawImage(image, 0, 0, image.width, image.height);
+                  let url = canvas.toDataURL(); // 得到图片的base64编码数据
+                  canvas.toDataURL("image/png");
+                  downloadList.push({type: type, index: index, data: url.substring(22)}); // 去掉base64编码前的     data:image/png;base64,
+                  if (downloadList.length === baseList.length && downloadList.length > 0) {
+                    for (let l = 0; l < downloadList.length; l++) {
+                        if (downloadList[l].type == '0') {
+                            imgsDetail.file(`详情图${downloadList[l].index}.png`, downloadList[l].data, { base64: true });
+                        } else if (downloadList[l].type == '1') {
+                            imgsBanner.file(`轮播图${downloadList[l].index}.png`, downloadList[l].data, { base64: true });
+                        } 
+                    }
+                    zip.generateAsync({ type: "blob" }).then(function (content) {
+                      // see FileSaver.js
+                      saveAs(content, "aliexpress_" + id + ".zip");
+                    });
+                  }
+                };
+                image.src = baseList[k].src;
+              }
+        })
+        document.body.appendChild(popup)
+    }
+}
+
+init();