Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

最新推荐文章于 2025-05-21 16:50:40 发布

北风凛

最新推荐文章于 2025-05-21 16:50:40 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： vue canvas js javascript

本文链接：https://blog.csdn.net/xrk_ffgg/article/details/89499784

这篇博客介绍了如何在Vue项目中利用Canvas技术进行图片查看、标注和下载。通过弹窗展示Canvas画布，详细讲解了绘制图片、矩形、线条和文字的方法，并提供了下载图片的实现方式。

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

1 前言

1.1 业务场景

图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。

由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。

2 实现原理

2.1 绘制画布

<el-dialog
    title="查看图片"
    :visible.sync="dialogJPG"
    append-to-body>
    <canvas id="mycanvas" width="940" height="570"></canvas>
</el-dialog>

这里为了交互体验，使用了element-ui的弹窗方式。将canvas画布放到了弹窗中。

为了突出画布效果可以在css中设置一个边框。

#mycanvas {
    border: 1px solid rgb(199, 198, 198);
}

2.2 绘制图片

//  imageUrl为后台提供图片地址
doDraw(imageUrl){
    //  获取canvas
    var canvas = document.getElementById("mycanvas")
    //  由于弹窗，确保已获取到
    var a = setInterval(() =>{
        //  重复获取
        canvas = document.getElementById("mycanvas")
        if(!canvas){
          return false
        } else {