Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
1前言
1.1业务场景
图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域。
由于浏览器的机制,使用window.location.href下载图片时,并不会保存到本地,会在浏览器打开。
2实现原理
2.1绘制画布
这里为了交互体验,使用了element-ui的弹窗方式。将canvas画布放到了弹窗中。
为了突出画布效果可以在css中设置一个边框。
#mycanvas{ border:1pxsolidrgb(199,198,198); }
2.2绘制图片
//imageUrl为后台提供图片地址 doDraw(imageUrl){ //获取canvas varcanvas=document.getElementById("mycanvas") //由于弹窗,确保已获取到 vara=setInterval(()=>{ //重复获取 canvas=document.getElementById("mycanvas") if(!canvas){ returnfalse }else{ clearInterval(a) //可以理解为一个画笔,可画路径、矩形、文字、图像 varcontext=canvas.getContext('2d') varimg=newImage() 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)线条的起点和终点坐标
strokeStylelineWidth线条的样式
2.5绘制文字
context.font="26pxArialbolder" context.fillStyle='red' context.fillText(text,x,y)
fontfillStyle文字样式
text文字内容
x,y文字显示坐标
2.6下载图片
//图片地址和图片名称 downIamge(imgsrc,name){ letimage=newImage() image.setAttribute('crossOrigin','anonymous') image.onload=function(){ letcanvas=document.createElement('canvas') canvas.width=image.width canvas.height=image.height letcontext=canvas.getContext('2d') context.drawImage(image,0,0,image.width,image.height) leturl=canvas.toDataURL('image/jpg') leta=document.createElement('a') letevent=newMouseEvent('click') a.download=name a.href=url a.dispatchEvent(event) } image.src=imgsrc },
3后记
这里只是列出canvas的基础使用,具体的交互和展示还需要更多的设计。
总结
以上所述是小编给大家介绍的Vue使用Canvas绘制图片、矩形、线条、文字,下载图片,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!