内容简介:图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域。由于浏览器的机制,使用这里为了交互体验,使用了
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
矩形颜色
lineWidth
矩形边框宽度
x,y,width,height
矩形位置加长宽
2.4 绘制线条
context.moveTo(x1,y1) context.lineTo(x2,y2) context.strokeStyle = "red" context.lineWidth = 3; context.stroke()
(x1,y1)
(x2,y2)
线条的起点和终点坐标
strokeStyle
lineWidth
线条的样式
2.5 绘制文字
context.font = "26px Arial bolder" context.fillStyle = 'red' context.fillText(text,x,y)
font
fillStyle
文字样式
text
文字内容
x,y
文字显示坐标
2.6 下载图片
// 图片地址和图片名称 downIamge (imgsrc, name) { let image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { let canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height let context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) let url = canvas.toDataURL('image/jpg') let a = document.createElement('a') let event = new MouseEvent('click') a.download = name a.href = url a.dispatchEvent(event) } image.src = imgsrc },
3 后记
这里只是列出canvas的基础使用,具体的交互和展示还需要更多的设计。
感谢支持。若不足之处,欢迎大家指出,共勉。
如果觉得不错,记得 点赞,谢谢大家:joy:
欢迎关注 我的: 【Github】 【掘金】 【简书】 【CSDN】 【OSCHINA】 【SF】
3.1 参考资料
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
以上所述就是小编给大家介绍的《Vue使用Canvas绘制图片、矩形、线条、文字,下载图片》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- canvas-坐标系、圆角矩形、纹理、剪裁
- 微信小程序 canvas圆角矩形的绘制
- angularjs – PUT / GET与有效载荷使用矩形
- html5 – 画布中的矩形尺寸错误
- 如何判断一个点在旋转后的矩形中
- .net – 如何为WPF元素提供矩形平面3D边框?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Think Python
Allen B. Downey / O'Reilly Media / 2012-8-23 / GBP 29.99
Think Python is an introduction to Python programming for students with no programming experience. It starts with the most basic concepts of programming, and is carefully designed to define all terms ......一起来看看 《Think Python》 这本书的介绍吧!