创建 Canvas 画布
改变画布大小
有三种方式
- HTML 设置
width
、height
;(推荐) - CSS 设置
width
、height
; - JS 动态设置
width
、height
。(推荐)
HTML 属性设置 width
、height
<canvas id="canvas" width="400" height="400">
JS 属性设置 width
、height
<template>
<div>
<canvas id="canvas"></canvas>
</div>
</template>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cx = canvas.width = 400;
var cy = canvas.height = 400;
</script>
获取 Canvas 对象
<template>
<div>
<canvas id="canvas" width="400" height="400"></canvas>
</div>
</template>
<script>
export default {
mounted () {
//第一步获取 Canvas 对象
var canvas = document.getElementById("canvas");
//第二步要做的就是获取到 Canvas 的上下文环境
var context = canvas.getContext("2d");
}
};
</script>
绘制
图像绘制
Canvas 还有一个经常用的方法是drawImage()
。
方法 | 描述 |
---|---|
drawImage() |
向画布上绘制图像、画布或视频 |
img
:规定要使用的图像、画布或视频sx
:可选。开始剪切的 x 坐标位置sy
:可选。开始剪切的 y 坐标位置swidth
:可选。被剪切图像的宽度(注意要和后面的width相同,不然图片会变形)sheight
:可选。被剪切图像的高度(注意要和后面的height相同,不然图片会变形)x
:在画布上放置图像的 x 坐标位置y
:在画布上放置图像的 y 坐标位置width
:可选。要使用的图像的宽度(伸展或缩小图像)height
:可选。要使用的图像的高度(伸展或缩小图像)
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
截图功能
通过获取坐标完成截图
通过vue-cropperjs获取到截图区域的坐标
this.$refs.cropper.getData 获取截图区的数据
{
x: 5.000000000000003,//x坐标
y: 400.82499999999993,//y坐标
460.4,//截图区宽
height: 111.3500000000001,//截图区高
rotate: 0,
scaleX: 1,
scaleY: 1
};
this.$refs.cropper.getImageData 获取图片的数据
{
naturalWidth: 583,//自然宽度
naturalHeight: 842,//自然高度
aspectRatio: 0.6923990498812351,//宽高比
344.1223277909738,//缩放后的宽
height: 497,//缩放后的高
left: 2.842170943040401e-14,
top: 0
};
在vue中进行截图
<template>
<div>
<canvas style="background:#ccc" ref="canvas"></canvas>
</div>
</template>
<script>
export default {
data() {
return {
src: require("../assets/img/6366484456315909139794539.png")
};
},
mounted() {
let canvas = this.$refs.canvas;
let ctx = canvas.getContext("2d");
canvas.width = 460;//裁剪区宽
canvas.height = 111;//裁剪区高
let img = new Image();
img.onload = function() {
↓图像 x y 截图宽高 显示区域宽高
ctx.drawImage(img, 5, 401, 460, 111, 0, 0, 460, 111);
//将canvas转为图片追加到网页中
var dataImg = new Image();
dataImg.src = canvas.toDataURL("image/png",1);//默认格式为image/png 图片质量默认0.92
app.appendChild(dataImg);
};
img.src = this.src; //如果是外链图片 会导致跨域
}
};
</script>