Wed Dec 18 15:31:00 CST 2024 inscode

index.html

@@ -13,5 +13,7 @@
         <div>欢迎来到 InsCode</div>
     </div>
     <script src="script.js"></script>
+    <div id="imageBox" style="border:1px solid #d3d3d3;width:50px;height:auto;overflow: hidden;">
+</div>
 </body>
 </html>
\ No newline at end of file

script.js

+let total = 10;
+
+function onloadImage(){
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+  canvas.innerText = downloadedImg.alt;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.innerHTML = '';
+  imageBox.appendChild(canvas);
+
+  total--;
+  if(total > 0){
+    imageReceived();
+  }
+
+  // try { 
+  //   localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  // } catch (err) {
+  //   console.error(`Error: ${err}`);
+  // }
+}
+
+function imageReceived() {
+  let imageURL =
+    "https://yx5679.com/uploads/20240623/d63312c2c15cabe736d411f00c7cd6cd.jpg?t="+Date.now();
+  let imageDescription = "The Mozilla logo";
+
+  downloadedImg = new Image();
+  //downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", onloadImage, false);
+  downloadedImg.alt = imageDescription;
+  downloadedImg.src = imageURL;
+}
+
+imageReceived();
\ No newline at end of file