使用canvas 把base64编码绘制图片，并根据坐标截图和画矩形

最新推荐文章于 2025-04-07 15:52:16 发布

丿在路上

最新推荐文章于 2025-04-07 15:52:16 发布

阅读量7.4k

点赞数

分类专栏： cavans截图文章标签： html cavans

本文链接：https://blog.csdn.net/qq_35315052/article/details/101539340

版权

该博客详细介绍了如何在Vue项目中使用canvas处理base64编码的图片，包括如何将base64图片绘制到canvas上，根据指定坐标进行截图，以及在原图上绘制矩形以标识截图区域。文中提到了在实现过程中需要注意的变量定义、页面展示和JS代码编写等关键点，并给出了数据格式和最终效果的展示。

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

vue 使用canvas 把base64编码绘制图片，并根据坐标截图和画矩形

功能描述：接受图片的base64编码，通过cavans绘制原图，之后根据坐标截取图片并转成base64编码，最后在原图上根据坐标绘制矩形，展示截取的图片位置。

1. 定义变量

data(){
      return {
          smallphtot:[],
          originPhtot:[],
      }
  }

注意，定义变量需要是集合，不能是字符串，具体出现的bug会在小节3中解释

2.页面展示代码

在这里插入图片描述
注意：需要在cavans原图上截图和绘制矩形，不建议展示缩放的cavans。

<Row>
   <Col span="12">
     <!-- <canvas id="myCavens" style="width:300px;"></canvas> -->
     <img style="width:400px;" :src="originPhtot[0]" />
   </Col>
   <Col span="12">
     <div v-for="(item,index) in smallphtot"

最低0.47元/天解锁文章