canvas实现图像裁剪
1.技术背景
随着都市类程序开发业务推进，在各类活动、个人信息等模块逐渐依赖图像裁剪、上传等功能，那么如何实现图像缩放、裁剪就成了前端工程师们关注优化的重点。
2.应用技术
本次使用的技术主要是依赖canvas,又叫画布，是H5新增内容，可以使用js脚本在其中绘制图像的元素。
可以完成图片处理、动画渲染、图表渲染等操作。
最近用uni-app的推流组件做了个图片裁切、上传的组件，拍照、选择照片完成后还需要对图片进行裁切，才能真正使用。
3.处理思路
使用两个canvas分别为操作canvas、目标canvas,操作canvas通过touchstart、touchmove、touchend、touchcancel实时跟进图片缩放、移动状态，点击确认后，使用canvas.drawImage()将前面的操作canvas绘制到目标canvas，最终调用canvas.toDataUrl()将目标canvas转为base64编码的图片传给接口。
3.1 关键方法
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
4. 具体实现
4.1创建操作canvas、目标canvas
mounted() {
// 防止H5用户在数据挂在前移动图片
//#ifdef H5
this.$el.addEventListener('touchmove', (ev) => {
ev.preventDefault();
});
// #endif
// 创建canvas
this.context = uni.createCanvasContext('canvas', this);//操作canvas
this.targetContext = uni.createCanvasContext('target', this);//目标canvas
},
4.2 图片加载初始化
其实这一部分就是数据计算，也就是开始涉及到一些图像缩放的算法逻辑，这一部分理解的时候需要花一点时间。
这边其实最要关注的就是一个时间点，两个主体。
时间点：图片加载完成后的如何对图片位置、大小以及对应的裁剪框位置、大小初始化，即图片和裁剪框的相对关系；
两个主体：图像、裁剪框
<template>
<view v-show="url" class="ksp-image-cutter">
<canvas
id="target"
:style="{ width: target.width + 'px', height: target.height + 'px' }"
canvas-id="target"
>canvas>
<view class="body">
<image
v-if="url"
lazy-load
class="image"
:style="{
left: image.left + 'px',
top: image.top + 'px',
width: image.width + 'px',
height: image.height + 'px',
}"
:src="url"
@load="imageLoad"
>image>
<view
class="plank"
@touchstart="touchStart($event, 'plank')"
@touchmove="touchMove"
@touchend="touchEnd"
@touchcancel="touchCancel"
>
<view
class="frame"
:style="{
left: frame.left + 'px',
top: frame.top + 'px',
width: frame.width + 'px',
height: frame.height + 'px',
}"
@touchstart="touchStart($event, 'frame')"
@touchstart.stop.prevent="touchHandle"
>
<canvas
v-if="mask.show"
class="canvas"
:style="{ width: frame.width + 'px', height: frame.height + 'px' }"
canvas-id="canvas"
>canvas>
<view class="rect">view>
<view
class="frame-left"
@touchstart="touchStart($event, 'left')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-right"
@touchstart="touchStart($event, 'right')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-top"
@touchstart="touchStart($event, 'top')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-bottom"
@touchstart="touchStart($event, 'bottom')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-left-top"
@touchstart="touchStart($event, 'left-top')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-left-bottom"
@touchstart="touchStart($event, 'left-bottom')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-right-top"
@touchstart="touchStart($event, 'right-top')"
@touchstart.stop.prevent="touchHandle"
>view>
<view
class="frame-right-bottom"
@touchstart="touchStart($event, 'right-bottom')"
@touchstart.stop.prevent="touchHandle"
>view>
view>
view>
view>
<view class="toolbar">
<button class="btn-cancel" @tap="oncancel">取消button>
<button class="btn-ok" @tap="onok">选取button>
view>
view>
template>
methods: {
// 图片首次加载
imageLoad(ev) {
// 加载动画
this.mask.show = true;
//图像原本宽高获取 （关键数据：图片缩放依赖）
this.real.width = ev.detail.width;
this.real.height = ev.detail.height;
//图片目前的宽高。（关键数据：图片缩放后的大小）
this.image.width = ev.detail.width;
this.image.height = ev.detail.height;
// 裁剪区域的大小
this.frame.width = this.width;
this.frame.height = this.height;
// 裁剪大小是否固定
if (!this.fixed) {
this.frame.width = this.image.width;
this.frame.height = this.image.height;
}
// 获取相关元素基本信息
const query = uni.createSelectorQuery().in(this);
query
.select('.body')
.boundingClientRect((data) => {
//容器宽高
const bw = data.width;
const bh = data.height;
// 裁剪大小
const fw = this.frame.width;
const fh = this.frame.height;
// 计算缩放比例
let tw = bw * 0.8;
let th = bh * 0.8;
let sx = tw / fw;
let sy = th / fh;
let scale = sx;
if (sx < sy) {
scale = sy;
}
//计算矢量位移
tw = fw * scale;
th = fh * scale;
const tx = (bw - tw) / 2;
const ty = (bh - th) / 2;
this.frame.width = tw;
this.frame.height = th;
this.frame.left = tx;
this.frame.top = ty;
const iw = this.image.width;
const ih = this.image.height;
sx = tw / iw;
sy = th / ih;
scale = sx;
if (sx < sy) {
scale = sy;
}
this.image.width = iw * scale;
this.image.height = ih * scale;
this.image.left = (bw - this.image.width) / 2;
this.image.top = (bh - this.image.height) / 2;
setTimeout(() => {
// 图片大小
this.trimImage();
}, 100);
})
.exec();
},
// 初始化图片大小、位置
trimImage() {
this.mask.show = true;
const query = uni.createSelectorQuery().in(this);
query
.select('.body')
.boundingClientRect((data) => {
const bw = data.width;
const bh = data.height;
const fw = this.frame.width;
const fh = this.frame.height;
let tw = bw;
let th = bh;
// let tw = bw * 0.8;
// let th = bh * 0.8;
const sx = tw / fw;
const sy = th / fh;
let scale = sx;
if (sx > sy) {
scale = sy;
}
tw = fw * scale;
th = fh * scale;
const tx = (bw - tw) / 2;
const ty = (bh - th) / 2;
const ax =
tx -
this.frame.left +
(this.frame.left - this.image.left) * (1 - scale);
const ay =
ty -
this.frame.top +
(this.frame.top - this.image.top) * (1 - scale);
this.frame.width = tw;
this.frame.height = th;
this.frame.left = tx;
this.frame.top = ty;
this.image.width *= scale;
this.image.height *= scale;
this.image.left += ax;
this.image.top += ay;
})
.exec();
setTimeout(() => {
// 计算缩放、位移数据
const scale = this.image.width / this.real.width;
const x = (this.frame.left - this.image.left) / scale;
const y = (this.frame.top - this.image.top) / scale;
const width = this.frame.width / scale;
const height = this.frame.height / scale;
// 将图片绘制到操作canvas
this.context.drawImage(
this.url,
x,
y,
width,
height,
0,
0,
this.frame.width,
this.frame.height
);
// 开始绘制
this.context.draw(false);
}, 100);
},
}
4.3 触摸事件处理
// 阻止手指事件冒泡传递
touchHandle() {},
// 手指开始触摸事件
touchStart(ev, type) {
this.stopTime();
this.mask.show = false;
if (this.touches.length === 0) {
this.type = type;
this.start.frame.left = this.frame.left;
this.start.frame.top = this.frame.top;
this.start.frame.width = this.frame.width;
this.start.frame.height = this.frame.height;
this.start.image.left = this.image.left;
this.start.image.top = this.image.top;
this.start.image.width = this.image.width;
this.start.image.height = this.image.height;
}
const touches = ev.changedTouches;
for (let i = 0; i < touches.length; i++) {
const touch = touches[i];
// this.touches[touch.identifier] = touch;
this.touches.push(touch);
}
},
// 手指移动事件
touchMove(ev) {
this.stopTime();
ev.preventDefault();
const touches = ev.touches;
if (this.touches.length === 1) {
if (this.type === 'plank' || this.type === 'frame' || this.fixed) {
this.moveImage(this.touches[0], touches[0]);
} else {
this.scaleFrame(this.touches[0], touches[0], this.type);
}
} else if (this.touches.length === 2 && touches.length === 2) {
const ta = this.touches[0];
const tb = this.touches[1];
let tc = touches[0];
let td = touches[1];
if (ta.identifier !== tc.identifier) {
const temp = tc;
tc = td;
td = temp;
}
this.scaleImage(ta, tb, tc, td);
}
},
touchEnd(ev) {
this.type = '';
this.touches = [];
this.startTime();
},
touchCancel(ev) {
this.type = '';
this.touches = [];
this.startTime();
},
startTime() {
this.stopTime();
this.timeoutId = setTimeout(() => {
this.trimImage();
}, 800);
},
stopTime() {
if (this.timeoutId >= 0) {
clearTimeout(this.timeoutId);
this.timeoutId = -1;
}
},
4.4 图片放大事件
这里图片移动主要代码难点、注意点有以下两点：
1.移动范围的控制，即保证裁剪框保证在图片区域内。
2.图片缩放过程中会存在位移，即图像缩放一定是矢量位移。
// 图片移动
moveImage(ta, tb) {
const ax = tb.clientX - ta.clientX;
const ay = tb.clientY - ta.clientY;
this.image.left = this.start.image.left + ax;
this.image.top = this.start.image.top + ay;
if (this.image.left > this.frame.left) {
this.image.left = this.frame.left;
}
if (this.image.top > this.frame.top) {
this.image.top = this.frame.top;
}
if (
this.image.left + this.image.width <
this.frame.left + this.frame.width
) {
this.image.left = this.frame.left + this.frame.width - this.image.width;
}
if (
this.image.top + this.image.height <
this.frame.top + this.frame.height
) {
this.image.top = this.frame.top + this.frame.height - this.image.height;
}
},
// 图片放大
scaleImage(ta, tb, tc, td) {
const x1 = ta.clientX;
const y1 = ta.clientY;
const x2 = tb.clientX;
const y2 = tb.clientY;
const x3 = tc.clientX;
const y3 = tc.clientY;
const x4 = td.clientX;
const y4 = td.clientY;
const ol = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
const el = Math.sqrt((x3 - x4) * (x3 - x4) + (y3 - y4) * (y3 - y4));
const ocx = (x1 + x2) / 2;
const ocy = (y1 + y2) / 2;
const ecx = (x3 + x4) / 2;
const ecy = (y3 + y4) / 2;
const ax = ecx - ocx;
const ay = ecy - ocy;
let scale = el / ol;
if (this.start.image.width * scale < this.frame.width) {
scale = this.frame.width / this.start.image.width;
}
if (this.start.image.height * scale < this.frame.height) {
scale = this.frame.height / this.start.image.height;
}
if (this.start.image.width * scale < this.frame.width) {
scale = this.frame.width / this.start.image.width;
}
this.image.left =
this.start.image.left +
ax -
(ocx - this.start.image.left) * (scale - 1);
this.image.top =
this.start.image.top + ay - (ocy - this.start.image.top) * (scale - 1);
this.image.width = this.start.image.width * scale;
this.image.height = this.start.image.height * scale;
if (this.image.left > this.frame.left) {
this.image.left = this.frame.left;
}
if (this.image.top > this.frame.top) {
this.image.top = this.frame.top;
}
if (
this.image.left + this.image.width <
this.frame.left + this.frame.width
) {
this.image.left = this.frame.left + this.frame.width - this.image.width;
}
if (
this.image.top + this.image.height <
this.frame.top + this.frame.height
) {
this.image.top = this.frame.top + this.frame.height - this.image.height;
}
},
4.5 图片绘制上传
理解前面代码后，下面的代码没有难点了，重点掌握CanvasContext.toDataURL({})方法
canvas.toDataURL（type, encoderOptions）
type 可选
图片格式，默认为 image/png
encoderOptions 可选
在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略
**方法返回一个包含图片展示的 data URI **。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
// 确认按钮事件
onok() {
const scale = this.image.width / this.real.width;
const x = (this.frame.left - this.image.left) / scale;
const y = (this.frame.top - this.image.top) / scale;
const width = this.frame.width / scale;
const height = this.frame.height / scale;
let tw = width;
let th = height;
if (this.fixed) {
tw = this.width / 2;
th = this.height / 2;
} else {
if (tw > this.maxWidth / 2) {
const sc = this.maxWidth / 2 / tw;
tw = tw * sc;
th = th * sc;
}
if (th > this.maxHeight / 2) {
let sc = this.maxHeight / 2 / th;
th = th * sc;
tw = tw * sc;
}
}
this.target.width = tw;
this.target.height = th;
// uni.showLoading({
// title: '正在裁剪',
// });
setTimeout(() => {
this.targetContext.drawImage(
this.url,
x,
y,
width,
height,
0,
0,
tw,
th
);
this.targetContext.draw(false, () => {
const CanvasContext = my.createCanvasContext('target');
CanvasContext.toDataURL({}).then((dataURL) => {
this.upLoadPic(dataURL);
});
});
}, 100);
},
5.完整代码
组件式开发，开箱即用，注意这边依赖uni框架、小程序下的native交互，H5慎用！！