js 上传图片显示到 canvas中并下载 canvas 图片

最新推荐文章于 2023-06-08 15:50:16 发布

阿豪boy

最新推荐文章于 2023-06-08 15:50:16 发布

阅读量188

点赞数

文章标签： js css html5 canvas vue

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065620

版权

原文链接: js 上传图片显示到 canvas中并下载 canvas 图片

上一篇: web dispatchEvent 自定义触发事件

下一篇: css 图片不显示时大小为0 的问题

上传图片显示到img标签, 和canvas中

然后下载canvas中的图片到本地

上传

下载

canvas的宽和高需要在代码中设置, dom 元素只是影响显示宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      margin: 10px;
      border: 1px solid black;
    }
  </style>
</head>
<body>

<img id="img" src="" class="box" alt="">

<canvas id="canvas" class="box">

</canvas>
<button id="upload">上传</button>
<button id="download">下载</button>

<script>
  let img = document.getElementById('img')
  let canvas = document.getElementById('canvas')
  let ctx = canvas.getContext("2d");

  let download = document.getElementById('download')
  let upload = document.getElementById('upload')

  upload.addEventListener("click", () => {
    console.log("upload")
    let input = document.createElement("input")
    input.setAttribute("type", "file");
    // 过滤文件 只接受 图片
    input.setAttribute("accept", "image/*")
    input.addEventListener("change", () => {
      let file = input.files[0];
      // console.log("aaa", input.files);
      console.log(file);
      let file_name = file.name.split(".")[0];
      img.src = window.URL.createObjectURL(file);
      img.src = window.URL.createObjectURL(file);
      // 图像挂载成功之后再重新读取tensor
      img.onload = () => {
        console.log("上传成功", file_name)
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
    })

    input.click()

  })

  download.addEventListener("click", () => {
    console.log("download")
    //   canvas.toDataURL("image/bmp");
    //   canvas.toDataURL("image/jpeg");
    //   canvas.toDataURL("image/png");
    let url = canvas.toDataURL("image/jpeg")
    let link = document.createElement("a")
    link.href = url
    link.download = "download.jpg"
    link.click()
  })
</script>
</body>
</html>