canvas - 加载图片

最新推荐文章于 2025-02-28 10:31:36 发布

itmacy

最新推荐文章于 2025-02-28 10:31:36 发布

阅读量2k

点赞数

分类专栏： canvas 文章标签： javascript

本文链接：https://blog.csdn.net/itmacy/article/details/131089796

版权

canvas 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何在HTML5的canvas元素中加载图片，并展示了如何保持图片比例进行缩放的方法。通过onload事件处理图片加载完成后，在canvas上绘制图片，并调整canvas尺寸以适应缩放后的图片大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用canvas加载图片的好处是，可以在该图片上绘制多边形或者文字等其他元素。

使用canvas绘制图片，既可以加载原始图片大小

  image.onload = () => {
      const _width = image.width
      const _height = image.height
      canvas.setAttribute('width', _width)
      canvas.setAttribute('height', _height)
      // 绘制图片
      c2.drawImage(image, 0, 0, image.width, image.height)
    }

也可以等比例加载图片，例如缩小一倍

    image.onload = () => {
      const _width = image.width * 0.5
      const _height = image.height * 0.5
      canvas.setAttribute('width', _width)
      canvas.setAttribute('height', _height)
      // 绘制图片
      c2.drawImage(image, 0, 0, image.width, image.height, 0, 0, _width, _height)
    }

canvas加载图片的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

<script>
  drawImg()

  function drawImg () {
    const canvas = document.querySelector('#canvas')
    const c2 = canvas.getContext('2d')
    const image = new Image()
    image.src = 'https://img0.baidu.com/it/u=741268616,1401664941&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500'
    // 加载原图片大小
    // image.onload = () => {
    //   const _width = image.width
    //   const _height = image.height
    //   canvas.setAttribute('width', _width)
    //   canvas.setAttribute('height', _height)
    //   // 绘制图片
    //   c2.drawImage(image, 0, 0, image.width, image.height)
    // }
    // 等比例缩放图片
    image.onload = () => {
      const _width = image.width * 0.5
      const _height = image.height * 0.5
      canvas.setAttribute('width', _width)
      canvas.setAttribute('height', _height)
      // 绘制图片
      c2.drawImage(image, 0, 0, image.width, image.height, 0, 0, _width, _height)
    }
  }
</script>
</body>
</html>

其效果如下
在这里插入图片描述