Vue使用Canvas绘制图片、矩形、线条、文字，下载图片_使用Canvas画布绘制画面，包括图片名称，矩形，圆，直线等构成的图形。资源-CSDN文库

5星 · 超过95%的资源 155 浏览量 2020-12-29 04:15:09 上传评论 1 收藏 51KB PDF 举报

资源详情

资源评论

资源推荐

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

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 {

clearInterval(a)

// 可以理解为一个画笔，可画路径、矩形、文字、图像

var context = canvas.getContext('2d')

var img = new Image()

img.src = imageUrl

// 加载图片

img.onload = function(){

if(img.complete){

// 根据图像重新设定了canvas的长宽

canvas.setAttribute("width",img.width)

canvas.setAttribute("height",img.height)

// 绘制图片

context.drawImage(img,0,0,img.width,img.height)

}

}

}

},1)

},

context.drawImage() 方法的参数介绍，可参照 W3school

2.3 绘制矩形绘制矩形

context.strokeStyle = "red"

context.lineWidth = 3;

context.strokeRect(x, y, width, height)

context 同上面的定义

strokeStyle 矩形颜色

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

嗨了伐得了

2023-06-17

这份Vue使用Canvas绘制的文件解释得非常清晰，让人很容易掌握技巧。

内容反馈

weixin_38502814

粉丝: 5
资源: 927

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip