Upload mask.html

mask.html

@@ -112,7 +112,7 @@
     <div class="myDiv" id="myImg1">
         <canvas id="canvas"></canvas>
         <br>
-        <img id="outputImg"></img>
+        <img id="outputImg" ></img>
     </div>
     <div class="overlay" style="display: flex; flex-direction: row; align-items: flex-start;">
         <label style="margin-bottom: 10px;">
@@ -140,7 +140,7 @@
 window.onload = function() {
     var canvas = document.getElementById('canvas');
     var context = canvas.getContext('2d');
-    var image = new Image();
+    var image = document.getElementById('outputImg');
     var imageMask = new Image();
     var maskData = null;
     var isDrawing = false;
@@ -295,9 +295,12 @@ window.onload = function() {
     const urlParams = new URLSearchParams(window.location.search);
     return urlParams.get(name);
 }
-
-    async function loadImageFromUrl(imageUrl) {
-        image.setAttribute('crossOrigin', 'anonymous');
+    async function loadImageFromUrl0(imageUrl) {
+        const dataUrl = await convertImageUrlToDataUrl(imageUrl);
+        await loadImageFromUrl(dataUrl);
+    }
+    async function loadImageFromUrl(dataUrl) {
+        image.crossOrigin='anonymous';
         image.onload = function() {
                 var resizedImage = new Image();
                 resizedImage.onload = _ok;
@@ -317,7 +320,7 @@ window.onload = function() {
                     drawImagesTimeOut(100);
                 }
         }
-        image.src = imageUrl;
+        image.src = dataUrl;
     }
     /*
 
@@ -376,6 +379,7 @@ window.onload = function() {
                 }
             }
             image.src = event.target.result;
+            console.log(image.src);
         }
         reader.readAsDataURL(file);
     }
@@ -690,6 +694,17 @@ window.onload = function() {
             showCircle(x + window.scrollX, y + window.scrollY, scaleX);
         }
     }
+    async function convertImageUrlToDataUrl(imageUrl) {
+        const response = await fetch(imageUrl);
+        const blob = await response.blob();
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.onerror = (error) => reject(`Error reading blob: ${error}`);
+            reader.readAsDataURL(blob);
+        });
+    }
+    
     // 初始化圆圈大小
     setCircleSize(brushSize);
     hideCircle();