生成HTML5缩略图的完美教程

29 min read

您可以使用HTML5的Canvas元素来生成缩略图。以下是一些示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Generate Thumbnail Using HTML5 Canvas</title>
    <script>
      function generateThumbnail(input) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.onload = function() {
          var width = img.width;
          var height = img.height;
          var size = 100;
          if (width > height) {
            canvas.width = size;
            canvas.height = size * height / width;
          } else {
            canvas.width = size * width / height;
            canvas.height = size;
          }
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          var dataURL = canvas.toDataURL();
          document.getElementById("thumbnail").src = dataURL;
        };
        img.src = URL.createObjectURL(input.files[0]);
      }
    </script>
  </head>
  <body>
    <input type="file" onchange="generateThumbnail(this);">
    <br>
    <img id="thumbnail" alt="">
  </body>
</html>

这段代码会生成一个文件上传控件和一个空的img标签。当用户选择一个图像文件时，它会在Canvas元素上生成一个缩略图，并将其转换为数据URL。然后，它会将数据URL设置为img标签的源。

注意：由于Canvas具有内存占用问题，因此如果您需要频繁生成大量的缩略图，请考虑使用服务器端脚本来生成它们。