js 将图片转换成 DataURL

预览: 输入图片URL，输出 DataURL 格式的图片

Snippet

function doLoadNetworkImage (src) {
  // 新建图片，src 指向任意 URL
  const img = new Image()
  img.src = src
  img.onload = () => {
    // 新建画布
    const canvas = document.createElement('canvas')
    // 画布大小与图片一致
    canvas.width = img.naturalWidth
    canvas.height = img.naturalHeight
    // 2D 画布将图片绘制上去
    const ctx = canvas.getContext('2d')
    // 绘制图片
    ctx.drawImage(img, 0, 0)
    // 画布导出 DataURL JPEG 格式
    return canvas.toDataURL('image/jpeg')
    // 画布导出 DataURL PNG 格式
    return canvas.toDataURL('image/png')
  }  
}

实例

origin.html

<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="utf8" />
    <title>Image Reader</title>
  </head>

  <script lang="javascript">

    let rOrigin;
    let rParseBtn;
    let rPreview;
    let rPreviewImg;

    
    function init() {
      rOrigin = document.querySelector(`input[name="origin"]`)
      rParseBtn = document.querySelector(`button[name="btn_parse"]`)
      rPreview = document.querySelector(`div#preview`)
      rPreviewImg = document.querySelector(`img#preview_img`)
      
      rParseBtn.onclick = () => {
        const origin = rOrigin.value;
        doLoadNetworkImage(origin);
      }
    }


    function doLoadNetworkImage (origin) {
      const img = new Image()
      img.src = origin;
      img.crossOrigin = 'anonymous';
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth
        canvas.height = img.naturalHeight
        const ctx = canvas.getContext('2d')
        console.log('draw', img, img.naturalWidth, img.naturalHeight)
        ctx.drawImage(img, 0, 0)
        console.log(canvas.toDataURL('image/jpeg'))
        rPreviewImg.src = canvas.toDataURL('image/jpeg')
      }
    }


    window.onload = init;
  </script>

  <body>
    <label>
      Origin:
      <input type="text" name="origin" value="https://th.bing.com/th/id/OIP.ZEhhYzMsR4YvXZWAO25E2QHaIO?w=195&h=216&c=7&r=0&o=5&dpr=2&pid=1.7" />
    </label>
    <br />
    <label>
      Parse:
      <button name="btn_parse">Parse</button>
    </label>
    <br />
    <div id="preview">
      <img id="preview_img" src="" />
    </div>
  </body>

</html>

引用

Img url to dataurl using JavaScript

2021-08-30 15:19

https://luo3.org.cn/posts/snippets/transform-image-to-dataurl-in-js/ Yongz Luo

snippets

#js
#base64