原生js实现图片预览并转换成base64

最新推荐文章于 2025-05-08 11:43:07 发布

原创最新推荐文章于 2025-05-08 11:43:07 发布 · 372 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

博客分享了JS源码，已上传至GitHub，源码包含使用JS自带方法和base渲染。给出了源码文件夹的链接https://github.com/goblinModeL/js-demo ，欢迎访问指正。

源码文件夹已上传github，包括使用js自带方法，base渲染

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实现图片转base64并预览</title>
</head>
<body>
<input type="file" accept="image/*"></br>
<button type="submit" name="11">提交</button>
</body>
<script>
  var a=document.getElementsByTagName('input')[0]

  a.addEventListener('change',function (){
    console.log('okokok');
    const{ files }=this//this是 ‘<input type="file" accept="image/*">’ 等价于 const files = this.files;

    const f = files[0]//取出第一个对象
    // console.log(URL.createObjectURL(f))//获取图片url
    const img = document.createElement('img')//创建img标签
    img.src=URL.createObjectURL(f)//地址写为图片url
    img.style.width='100px'
    document.body.append(img)//添加到html中

  })
  var b=document.getElementsByTagName('button')[0]
  b.addEventListener('click',function (){
    //图片转base64
    const {files}=a
    const f = files[0]//取出第一个对象
    if(f==null){
      alert("请先选择照片")
      return 0;
    }
    console.log(f)
    var img = new Image;
    img.src=URL.createObjectURL(f)
    img.onload = function (){
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/"+ext);
      console.log(1)
      console.log(dataURL)
    }
  })
</script>
</html>

goblinModeL/js-demo (github.com)https://github.com/goblinModeL/js-demo欢迎访问，并指正