vue + canvas绘制背景图、矩形

最近有需求做图片人脸识别，在系统上传图片后，后台返回坐标将识别到的人脸画上矩形。
效果图如下：

实现过程：

1、利用绘制canvas实例

//html
<canvas id='imgCanvas' ref='imgCanvas'></canvas>
//jsthis.canvas = this.$refs.imgCanvas;this.canvas.height = this.$refs.picContainer.offsetHeight;this.ctx = this.canvas.getContext("2d");

2、将图片绘制到canvas上

注意，我这里canvas的宽高是固定的，图片不进行拉伸，需要让图片自适应

     // 绘制canvas图片drawCanvas(){var image = new Image()image.src = this.bigImg;image.onload = ()=>{this.iw = image.width;this.ih = image.height;var local = this.calculate(this.iw, this.ih);//图片自适应canvasthis.canvas.width = local.pw;this.canvas.height = local.phthis.ctx.drawImage(image,0, 0, local.pw, local.ph); //表示x和y坐标}},// 计算出图片画在canvas中的四个参数，图片自适应canvascalculate(pw, ph) {var w = this.$refs.picContainer1.offsetWidth,//获取元素的宽h = this.$refs.picContainer.offsetHeight,px = 0,py = 0;if(pw < w && ph < h){px = 0.5 * w - 0.5 * pw;py = 0.5 * h - 0.5 * ph;}else if (ph / pw > h / w) {var uu = ph;ph = hpw = pw * h / uupx = 0.5 * w - 0.5 * pw;} else {var uu = pw;pw = w;ph = ph * pw / uupy = 0.5 * h - 0.5 * ph;}return {px, py, pw, ph}},

3、将图片上传后台，将返回的坐标绘制在canvas上。

由于图片是在canv上自适应的，后台返回是图片上的坐标，这里需要转换成canvas的坐标。

// 画矩形drawRect(val){// 绘制矩形var x = this.canvas.width/this.iw,//this.iw图片的宽y = this.canvas.height/this.ih;//this.ih图片的高var top = val.location.top,left = val.location.left,width = val.location.width,height = val.location.height;this.ctx.strokeStyle = "red"; //线的颜色this.ctx.strokeRect(left*x, top*y, width*x, height*y);   //绘制路径矩形// 绘制文字this.ctx.font = "18px bold";this.ctx.fillStyle = "red";this.ctx.textAlign = "center";this.ctx.textBaseline = "middle";this.ctx.fillText(val.name, left*x+18,top*y-18);},

这个canvas使用只用了绘制图片和绘制矩形，许多canvas复杂的动画图形没有应用，比较简单。

vue + canvas绘制背景图、矩形相关推荐

使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
vue3 canvas 星空背景图
vue3 canvas 星空背景图页面截图代码页面截图代码 <template><div ref="container" class="cont ...
利用Canvas绘制雷达图
雷达图(蜘蛛网图)是一种常见的数据分析图表,本文采用canvas来绘制雷达图,并最终封装成一个小组件.首先来看一下最终的效果图: 如何画正多边形以正五边形雷达图为例(其他任意正多边形也一样),如下图 ...
HTML5 canvas 设置背景图
页面代码如下 <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...
vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
canvas 绘制八卦图
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
Canvas绘制八卦图
运用Canvas绘图编写一个八卦图效果. 最终效果如下: 代码实现如下: <!doctype html> <html lang="en"><head& ...
vue + canvas绘制扇形圆盘
vue + canvas绘制扇形圆盘 html: <canvas style="position: fixed;z-index:-1" width="545&quo ...

vue + canvas绘制背景图、矩形

1、利用绘制canvas实例

2、将图片绘制到canvas上

3、将图片上传后台，将返回的坐标绘制在canvas上。

vue + canvas绘制背景图、矩形相关推荐

最新文章

热门文章