使用 Canvas 将远程 Canvas 图像URL转换为 PNG 兼容的数据 URI

2024-01-29 15:31:27

通过 Canvas 将 Image URL 转为 Data URL：本指南

简介

在现代网络开发中，经常需要将图像 URL 转换为与 PNG 格式兼容的数据 URL。通过使用 HTML5 Canvas，我们可以轻松地在本地执行此转换，无需借助服务器端脚本或第三方库。

方法

转换远程图像 URL

创建一个 <img> 标签，并将 src 属性设置为要转换的图像 URL。
侦听 <img> 标签的 onload 事件。
当图像加载完成后，创建一个 Canvas 元素，并使用 Canvas 的 drawImage() 方法将图像绘制到 Canvas 上。
使用 Canvas 的 toDataURL() 方法将 Canvas 转换为数据 URL。

<img id="my-image" src="https://example.com/image.png" />

<script>
  document.getElementById('my-image').onload = function() {
    const canvas = document.createCanvas(this.width, this.height);
    const context = canvas.getContext('2d');
    context.drawImage(this, 0, 0);

    const dataURL = canvas.toDataURL('image/png');
  };
</script>

转换本地图像 URL

创建一个 <input type="file"> 元素，并为其设置 accept 属性以仅接受图像文件。
侦听 change 事件，并在该事件中获取用户选择的图像文件。
将文件转换为数据 URL，类似于转换远程图像 URL 的步骤。

<input id="my-image-input" type="file" accept="image/*" />

<script>
  document.getElementById('my-image-input').onchange = function() {
    const file = this.files[0];
    const reader = new FileReader();

    reader.onload = function() {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createCanvas(img.width, img.height);
        const context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        const dataURL = canvas.toDataURL('image/png');
      };
      img.src = reader.result;
    };

    reader.readAsDataURL(file);
  };
</script>