Upload mask.html

mask.html

@@ -291,6 +291,68 @@ window.onload = function() {
         tempContext.putImageData(imageData, 0, 0);
         return tempCanvas.toDataURL();
     }
+    function getQueryParameter(name) {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get(name);
+}
+
+    async function loadImageFromUrl(imageUrl) {
+        image.setAttribute('crossOrigin', 'anonymous');
+        image.onload = function() {
+                var resizedImage = new Image();
+                resizedImage.onload = _ok;
+                function _ok(event){
+                    image = resizedImage;
+                    canvas.width = resizedImage.width;
+                    canvas.height = resizedImage.height;
+                    maskData = createMaskImageData(image.width,image.height);
+                    imageMask.src = getImageDataUrl(maskData);
+                    drawImagesTimeOut(100);
+                }
+                if (!resizeImage(image,512,resizedImage)) {
+                    canvas.width = image.width;
+                    canvas.height = image.height;
+                    maskData = createMaskImageData(image.width,image.height);
+                    imageMask.src = getImageDataUrl(maskData);
+                    drawImagesTimeOut(100);
+                }
+        }
+        image.src = imageUrl;
+    }
+    /*
+
+    function handleImageLoad(image) {
+        var resizedImage = new Image();
+        resizedImage.onload = function() {
+            image = resizedImage;
+            canvas.width = resizedImage.width;
+            canvas.height = resizedImage.height;
+            maskData = createMaskImageData(image.width, image.height);
+            imageMask.src = getImageDataUrl(maskData);
+            drawImagesTimeOut(100);
+        }
+
+        if (!resizeImage(image, 512, resizedImage)) {
+            canvas.width = image.width;
+            canvas.height = image.height;
+            maskData = createMaskImageData(image.width, image.height);
+            imageMask.src = getImageDataUrl(maskData);
+            drawImagesTimeOut(100);
+        }
+    }
+    // 监听文件选择
+    function handleFile(file) {
+        var reader = new FileReader();
+        reader.onload = function(event) {
+            var image = new Image();
+            image.onload = function() {
+                handleImageLoad(image);
+            }
+            image.src = event.target.result;
+        }
+        reader.readAsDataURL(file);
+    }
+    */
     function handleFile(file) {
         var reader = new FileReader();
         reader.onload = function(event) {
@@ -317,6 +379,7 @@ window.onload = function() {
         }
         reader.readAsDataURL(file);
     }
+    
     // 上传图片
     document.getElementById("upload").addEventListener('change', function(e) {
         var file = e.target.files[0];
@@ -627,13 +690,15 @@ window.onload = function() {
             showCircle(x + window.scrollX, y + window.scrollY, scaleX);
         }
     }
-
-
     // 初始化圆圈大小
     setCircleSize(brushSize);
     hideCircle();
     // 设置事件监听
     //setEventListeners();
+    const imageUrl = getQueryParameter('imageUrl');
+    if (imageUrl) {
+        loadImageFromUrl(imageUrl);
+    }
 }
     </script>
 </body>