图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。
由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。
2.1 绘制画布
<el-dialog
title="查看图片"
:visible.sync="dialogJPG"
append-to-body>
<canvas id="mycanvas" width="940" height="570"></canvas>
</el-dialog>
//为了突出画布效果可以在css中设置一个边框。
#mycanvas {
border: 1px solid rgb(199, 198, 198);
}这里为了交互体验，使用了element-ui的弹窗方式。将canvas画布放到了弹窗中。
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
},今天接到一个需求，在vue+element管理后台中新增一个保存canvas图片的需求，所以先写了一个小demo
// html中 <div class="contain"> <canvas id="myCanvas" width="500" height="500" ref="myCanvas"></canvas> </div>
// js中
drowCanvas () {
let myCanvas = this.$refs.myCanvas
//画布的宽高
let Cwidth = 500
let CHeight = 500
// 创建一个画布上绘图的环境
var ctx = myCanvas.getContext('2d')
// 一般情况下，canvas的背景颜色是透明的，当生成图片的时候也是透明
// 如果希望图片有个背景颜色，可以创建一个框高100%的矩形
// 画布的最底端-这样就可以有个背景颜色
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, Cwidth, CHeight);
//设置颜色也可以适用rgba
ctx.fillStyle = 'rgba(0,0,0,0.9)'
//绘制一个矩形的边框(x, y, width, height)
ctx.strokeRect(50, 100, 100, 100)
// 可以在页面插入文字
ctx.fillStyle = '#333'
// 三个参数-文字，横坐标-纵坐标
ctx.font = '16px Arial'
ctx.fillText('今天是个好日子', 50, 50);
ctx.fillText('心想的事儿都能成', 50, 80);
// 绘制一个实心的方块
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(200, 30, 80, 50);
// 还可以插入图片
// 首先创建一个图片标签
// 然后插入图片
let imgObj = new Image()
imgObj.src = 'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290'
// let imgUrl = this.imgOnload(imgObj)
imgObj.onload = function () {
// 关于坐标问题
// 一般绘制图片，只是画上去，这里外层canvas是500*500，相当于居中了，只是
// 被裁剪了
// 从图片的593,327 坐标开始截图，截取 500，500 这么大
// 然后将截取的图片，从canvas 100，100开始画， 缩放 300，300 这么大！
ctx.drawImage(imgObj, 593,327,500,500,100,100,300,300)
}
// 生成图片（图片的格式）
let imageUrl = myCanvas.toDataURL("image/png", 0.5);
// base64图片地址就获取到了
// 现实中存在两种情况，一个显示页面中，点击下载，这个就简单了，可以利用a标签进行下载
//还有一种情况就是，图片base64地址生成后，自动下载
// 调用方法下载canvas
this.downloadFile(imageUrl, '1.png')
},
// 创建下载图片事件
downloadFile(data, filename) {
//创建一个具有指定的命名空间URI和限定名称的元素
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
// 绑定下载事件
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
},
绘制出来的canvas图片有点丑
不过还是只是样式问题，下载也可以正常试用，只需要吧代码套到具体的业务需求里面去就可以了
绘制图片的时候传参的问题
/*3参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
//ctx.drawImage(image,100,100);
/*5个参数*/
/*图片对象*/
/*绘制在画布上的坐标 x y*/
/*是图片的大小 不是裁剪 是缩放*/
//ctx.drawImage(image,100,100,100,100);
/*9个参数*/
/*图片对象*/
/*图片上定位的坐标 x y */
/*在图片上截取多大的区域 w h*/
/*绘制在画布上的坐标 x y*/
/*是图片的大小 不是裁剪 是缩放*/
ctx.drawImage(image,400,400,400,400,200,200,100,100);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
