如何在 Javascript 中獲取圖片資料 URL？

若要獲得畫布的影像資料 URL，可以使用畫布物件的 toDataURL() 方法，它將畫布繪圖轉換為 64 位編碼的 PNG URL。如果希望影像資料 URL 為 jpeg 格式，則可以將 image/jpeg 作為第一個引數傳遞給 toDataURL() 方法。

可以透過將介於 0 和 1 之間的一個數字作為第二個引數傳遞給 toDataURL() 方法來控制 jpeg 影像的影像質量。根據 toDataURL() 方法，繪製到畫布上的任何影像都必須託管在與執行它的程式碼具有相同域名的 Web 伺服器上。如果不滿足此條件，就會丟擲 SECURITY_ERR 異常。

示例 1

此示例演示了在 JavaScript 中獲取影像 URL 的過程 -

<!DOCTYPE html>
<html>
<head>
   <title>Get URL of Image</title>
</head>
<body>
   <input type='f' onchange="readURL(this);" />
   <br />
   <br />
   <button id="tCD" onclick="togCan()">Hide canvas</button> <button id="tDU" onclick="togDU()">DataURL hide</button>
   <br/>
   <br/>
   <textarea id="dU" rows="4" cols="100">
   </textarea>
   <br/>
   <canvas id="myCan"></canvas>
   <script>
      function rdURL(ip) {
         if (ip.files && ip.files[0]) {
            var reader = new FileReader();
            reader.addEventListener(
               "load",
               function() {
                  var avatarImg = new Image();
                  var src = reader.result;
                  avatarImg.src = src;
                  document.getElementById("dU").innerText = src;
                  avatarImg.onload = function() {
                     var c = document.getElementById("myCan");
                     var ctx = c.getContext("2d");
                     ctx.canvas.width = avatarImg.width;
                     ctx.canvas.height = avatarImg.height;
                     ctx.drawImage(avatarImg, 0, 0);
                  };
               },
               false
            );
            reader.readAsDataURL(ip.files[0]);
         }
      }
      function togCan() {
         var canvas = document.getElementById("myCan");
         if(canvas.style.display == "none"){
            canvas.style.display = "block";
            document.getElementById("tCD").innerText = "Canvas hide";
         }
         else {
            canvas.style.display = "none";
            document.getElementById("tCD").innerText = "Canvas show";
         }
      }
      function toggleDataUrl() {
         var area = document.getElementById("dU");
         if(area.style.display == "none"){
            area.style.display = "block";
            document.getElementById("tDU").innerText = "Data url hide";
         }
         else {
            area.style.display = "none";
            document.getElementById("tDU").innerText = "Data url show";
         }
      }
   </script>
</body>
</html>

示例 2

以下是使用 JavaScript 讀取檔案的另一個示例 -

var fs = require("fs");
console.log("Going to write into existing file");

// Open a new file with name input.txt and write Simply Easy Learning! to it.
fs.writeFile('input.txt', 'Simply Easy Learning!', function(err) {
   if (err) {
      return console.error(err);
   }
   console.log("Data written successfully!");
   console.log("Let's read newly written data");

   // Read the newly written file and print all of its content on the console
   fs.readFile('input.txt', function (err, data) {
      if (err) {
         return console.error(err);
      }
   console.log("Asynchronous read: " + data.toString());
   });
});

更新日期：19-7-2023

5K+ 瀏覽量

開始你的 職業生涯

完成課程認證

開始
廣告
© . All rights reserved.