如何在 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+ 浏览量

开始你的 职业生涯

完成课程认证

开始
广告