446 lines
15 KiB
JavaScript
446 lines
15 KiB
JavaScript
/**
|
|
* 图片裁剪核心库 - View显示版本
|
|
* 使用view和image显示界面，只在导出时使用canvas
|
|
* 支持H5、App、微信小程序、支付宝小程序、抖音小程序
|
|
*/
|
|
|
|
export default class ImageCropper {
|
|
constructor(context,options) {
|
|
|
|
this.context = context;
|
|
this.options = options || {};
|
|
|
|
this.canvasId = options.canvasId;
|
|
this.fileType = options.fileType || 'jpg';
|
|
this.quality = options.quality || 0.8;
|
|
|
|
const { windowWidth, windowHeight } = uni.$u.window();
|
|
|
|
// 画布尺寸（显示区域）
|
|
this.canvasWidth = options.canvasWidth || windowWidth;
|
|
this.canvasHeight = options.canvasHeight || windowHeight;
|
|
|
|
// 输出图片配置
|
|
this.width = options.width || 400;
|
|
this.height = options.height || 400;
|
|
|
|
// 裁剪框配置
|
|
this.rectWidth = options.rectWidth || 400;
|
|
this.rectHeight = options.rectHeight || 400;
|
|
|
|
// 图片数据
|
|
this.imgData = {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
scale: 1,
|
|
angle: 0,
|
|
originalWidth: 0,
|
|
originalHeight: 0,
|
|
src: ''
|
|
};
|
|
|
|
// 触摸数据
|
|
this.touch = {
|
|
startX: 0,
|
|
startY: 0,
|
|
isTouch: false,
|
|
isMove: false
|
|
};
|
|
|
|
// 图片加载状态
|
|
this.imageLoaded = false;
|
|
|
|
// 回调函数
|
|
this.onUpdate = options.onUpdate || (() => {});
|
|
this.triggerUpdate();
|
|
}
|
|
|
|
// 设置图片源
|
|
setImage(src) {
|
|
return new Promise((resolve, reject) => {
|
|
if (!src) {
|
|
reject(new Error('图片路径不能为空'));
|
|
return;
|
|
}
|
|
|
|
uni.getImageInfo({
|
|
src: src,
|
|
success: (res) => {
|
|
this.imgData.src = src;
|
|
this.imgData.originalWidth = res.width;
|
|
this.imgData.originalHeight = res.height;
|
|
this.imageLoaded = true;
|
|
this.resetImageData();
|
|
this.triggerUpdate();
|
|
resolve(res);
|
|
},
|
|
fail: () => reject(new Error('图片信息获取失败'))
|
|
});
|
|
});
|
|
}
|
|
|
|
// 重置图片数据
|
|
resetImageData() {
|
|
if (!this.imageLoaded) return;
|
|
|
|
const imgWidth = this.imgData.originalWidth;
|
|
const imgHeight = this.imgData.originalHeight;
|
|
|
|
// 计算让图片宽度或高度等于裁剪框尺寸的缩放比例
|
|
const scaleX = this.rectWidth / imgWidth;
|
|
const scaleY = this.rectHeight / imgHeight;
|
|
// 使用较大的缩放比例，确保图片至少有一边等于裁剪框尺寸
|
|
const scale = Math.max(scaleX, scaleY);
|
|
|
|
// 计算裁剪框在画布中的居中位置
|
|
const rectX = (this.canvasWidth - this.rectWidth) / 2;
|
|
const rectY = (this.canvasHeight - this.rectHeight) / 2;
|
|
|
|
// 保持当前的旋转角度
|
|
const currentAngle = this.imgData.angle || 0;
|
|
|
|
this.imgData = {
|
|
...this.imgData,
|
|
x: rectX + (this.rectWidth - imgWidth * scale) / 2,
|
|
y: rectY + (this.rectHeight - imgHeight * scale) / 2,
|
|
width: imgWidth * scale,
|
|
height: imgHeight * scale,
|
|
scale: scale,
|
|
angle: currentAngle
|
|
};
|
|
|
|
// 如果图片有旋转，需要重新计算边界限制
|
|
if (currentAngle !== 0) {
|
|
this.applyBoundaryConstraints();
|
|
}
|
|
}
|
|
|
|
// 应用边界约束
|
|
applyBoundaryConstraints() {
|
|
// 计算裁剪框在画布中的居中位置
|
|
const rectX = (this.canvasWidth - this.rectWidth) / 2;
|
|
const rectY = (this.canvasHeight - this.rectHeight) / 2;
|
|
|
|
// 获取旋转后的边界框
|
|
const rotatedBounds = this.getRotatedBounds();
|
|
|
|
// 计算图片中心点相对于裁剪框的偏移范围
|
|
const maxOffsetX = Math.max(0, (rotatedBounds.width - this.rectWidth) / 2);
|
|
const maxOffsetY = Math.max(0, (rotatedBounds.height - this.rectHeight) / 2);
|
|
|
|
// 裁剪框中心点
|
|
const rectCenterX = rectX + this.rectWidth / 2;
|
|
const rectCenterY = rectY + this.rectHeight / 2;
|
|
|
|
// 当前图片中心点
|
|
const imgCenterX = this.imgData.x + this.imgData.width / 2;
|
|
const imgCenterY = this.imgData.y + this.imgData.height / 2;
|
|
|
|
// 限制图片中心点的移动范围
|
|
const limitedCenterX = Math.max(rectCenterX - maxOffsetX, Math.min(rectCenterX + maxOffsetX, imgCenterX));
|
|
const limitedCenterY = Math.max(rectCenterY - maxOffsetY, Math.min(rectCenterY + maxOffsetY, imgCenterY));
|
|
|
|
// 重新计算图片位置
|
|
this.imgData.x = limitedCenterX - this.imgData.width / 2;
|
|
this.imgData.y = limitedCenterY - this.imgData.height / 2;
|
|
}
|
|
|
|
// 计算旋转后图片的边界框
|
|
getRotatedBounds() {
|
|
const { width, height, angle } = this.imgData;
|
|
|
|
if (angle === 0 || angle % 360 === 0) {
|
|
return { width, height };
|
|
}
|
|
|
|
// 将角度转换为弧度
|
|
const rad = (angle * Math.PI) / 180;
|
|
|
|
// 计算旋转后的边界框
|
|
const cos = Math.abs(Math.cos(rad));
|
|
const sin = Math.abs(Math.sin(rad));
|
|
|
|
const rotatedWidth = width * cos + height * sin;
|
|
const rotatedHeight = width * sin + height * cos;
|
|
|
|
return {
|
|
width: rotatedWidth,
|
|
height: rotatedHeight
|
|
};
|
|
}
|
|
|
|
// 触摸开始
|
|
touchStart(e) {
|
|
if (!this.imageLoaded) return;
|
|
|
|
const x = e.touches ? e.touches[0].clientX : e.clientX;
|
|
const y = e.touches ? e.touches[0].clientY : e.clientY;
|
|
|
|
this.touch.startX = x;
|
|
this.touch.startY = y;
|
|
this.touch.isTouch = true;
|
|
this.touch.isMove = false;
|
|
}
|
|
|
|
// 触摸移动
|
|
touchMove(e) {
|
|
if (!this.touch.isTouch || !this.imageLoaded) return;
|
|
|
|
e.preventDefault && e.preventDefault();
|
|
|
|
const x = e.touches ? e.touches[0].clientX : e.clientX;
|
|
const y = e.touches ? e.touches[0].clientY : e.clientY;
|
|
|
|
// 单点拖拽
|
|
const deltaX = x - this.touch.startX;
|
|
const deltaY = y - this.touch.startY;
|
|
|
|
// 计算新的图片位置
|
|
let newX = this.imgData.x + deltaX;
|
|
let newY = this.imgData.y + deltaY;
|
|
|
|
// 计算裁剪框在画布中的居中位置
|
|
const rectX = (this.canvasWidth - this.rectWidth) / 2;
|
|
const rectY = (this.canvasHeight - this.rectHeight) / 2;
|
|
|
|
// 获取旋转后的边界框
|
|
const rotatedBounds = this.getRotatedBounds();
|
|
|
|
// 计算图片中心点相对于裁剪框的偏移范围
|
|
const maxOffsetX = Math.max(0, (rotatedBounds.width - this.rectWidth) / 2);
|
|
const maxOffsetY = Math.max(0, (rotatedBounds.height - this.rectHeight) / 2);
|
|
|
|
// 裁剪框中心点
|
|
const rectCenterX = rectX + this.rectWidth / 2;
|
|
const rectCenterY = rectY + this.rectHeight / 2;
|
|
|
|
// 限制图片中心点的移动范围
|
|
const imgCenterX = newX + this.imgData.width / 2;
|
|
const imgCenterY = newY + this.imgData.height / 2;
|
|
|
|
const limitedCenterX = Math.max(rectCenterX - maxOffsetX, Math.min(rectCenterX + maxOffsetX, imgCenterX));
|
|
const limitedCenterY = Math.max(rectCenterY - maxOffsetY, Math.min(rectCenterY + maxOffsetY, imgCenterY));
|
|
|
|
// 重新计算图片位置
|
|
newX = limitedCenterX - this.imgData.width / 2;
|
|
newY = limitedCenterY - this.imgData.height / 2;
|
|
|
|
this.imgData.x = newX;
|
|
this.imgData.y = newY;
|
|
|
|
this.touch.startX = x;
|
|
this.touch.startY = y;
|
|
this.touch.isMove = true;
|
|
|
|
this.triggerUpdate();
|
|
}
|
|
|
|
// 触摸结束
|
|
touchEnd(e) {
|
|
this.touch.isTouch = false;
|
|
this.touch.isMove = false;
|
|
}
|
|
|
|
// 缩放图片
|
|
scaleImage(ratio) {
|
|
if (!this.imageLoaded) return;
|
|
|
|
const newScale = this.imgData.scale * ratio;
|
|
|
|
// 计算新的尺寸
|
|
const newWidth = this.imgData.originalWidth * newScale;
|
|
const newHeight = this.imgData.originalHeight * newScale;
|
|
|
|
// 限制最小缩放，确保图片至少有一边等于或大于裁剪框
|
|
const minScaleX = this.rectWidth / this.imgData.originalWidth;
|
|
const minScaleY = this.rectHeight / this.imgData.originalHeight;
|
|
const minScale = Math.max(minScaleX, minScaleY);
|
|
|
|
// 限制缩放范围
|
|
if (newScale < minScale || newScale > 3) return;
|
|
|
|
// 保存当前中心点
|
|
const centerX = this.imgData.x + this.imgData.width / 2;
|
|
const centerY = this.imgData.y + this.imgData.height / 2;
|
|
|
|
// 更新图片数据
|
|
this.imgData.scale = newScale;
|
|
this.imgData.width = newWidth;
|
|
this.imgData.height = newHeight;
|
|
|
|
// 重新计算位置，保持中心点不变
|
|
this.imgData.x = centerX - this.imgData.width / 2;
|
|
this.imgData.y = centerY - this.imgData.height / 2;
|
|
|
|
// 应用边界约束
|
|
this.applyBoundaryConstraints();
|
|
this.triggerUpdate();
|
|
}
|
|
|
|
// 旋转图片
|
|
rotate(angle = 90) {
|
|
if (!this.imageLoaded) return;
|
|
|
|
this.imgData.angle += angle;
|
|
this.imgData.angle = this.imgData.angle % 360;
|
|
|
|
// 旋转后应用边界约束
|
|
this.applyBoundaryConstraints();
|
|
this.triggerUpdate();
|
|
}
|
|
|
|
// 重置图片
|
|
reset() {
|
|
this.resetImageData();
|
|
this.triggerUpdate();
|
|
}
|
|
|
|
loadImage(canvas,src) {
|
|
return new Promise( (resolve, reject) => {
|
|
if (this.options.type == '2d') {
|
|
var img = canvas.createImage();
|
|
img.onload = () => {
|
|
resolve(img);
|
|
};
|
|
img.onerror = (e) => {
|
|
reject(e);
|
|
};
|
|
img.src = src;
|
|
} else {
|
|
resolve(src);
|
|
}
|
|
})
|
|
}
|
|
|
|
canvasToTempFilePath(resolve, reject, canvas) {
|
|
let params = {
|
|
canvas: canvas,
|
|
canvasId: this.canvasId,
|
|
fileType: this.fileType,
|
|
quality: this.quality,
|
|
width: this.width,
|
|
height: this.height,
|
|
success: (res) => {
|
|
resolve(res.tempFilePath)
|
|
},
|
|
fail: (err) => {
|
|
console.error('导出图片失败:', err);
|
|
reject(err);
|
|
}
|
|
};
|
|
// #ifdef MP-ALIPAY
|
|
uni.canvasToTempFilePath(params);
|
|
// #endif
|
|
// #ifndef MP-ALIPAY
|
|
uni.canvasToTempFilePath(params, this.context);
|
|
// #endif
|
|
}
|
|
|
|
// 导出裁剪图片
|
|
getCropperImage() {
|
|
|
|
return new Promise(async (resolve, reject) => {
|
|
if (!this.imageLoaded) {
|
|
reject(new Error('图片未加载'));
|
|
return;
|
|
}
|
|
|
|
// 计算裁剪框在画布中的居中位置
|
|
const rectX = (this.canvasWidth - this.rectWidth) / 2;
|
|
const rectY = (this.canvasHeight - this.rectHeight) / 2;
|
|
|
|
// 计算图片在裁剪框中的相对位置
|
|
const imgX = this.imgData.x - rectX;
|
|
const imgY = this.imgData.y - rectY;
|
|
|
|
// 计算缩放比例 - 导出图片尺寸 vs 裁剪框尺寸
|
|
const scaleX = this.width / this.rectWidth;
|
|
const scaleY = this.height / this.rectHeight;
|
|
|
|
let canvas = null;
|
|
// #ifdef MP-ALIPAY
|
|
let ctx = uni.createCanvasContext(this.canvasId);
|
|
// #endif
|
|
// #ifndef MP-ALIPAY
|
|
let ctx = uni.createCanvasContext(this.canvasId, this.context);
|
|
// #endif
|
|
|
|
if(this.options.type == '2d'){
|
|
canvas = await new Promise(resolve => {
|
|
uni.createSelectorQuery()
|
|
.in(this.context)
|
|
.select(`#${this.canvasId}`)
|
|
.fields({
|
|
node: true,
|
|
size: true
|
|
})
|
|
.exec(res => {
|
|
resolve(res[0].node);
|
|
});
|
|
});
|
|
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
|
|
ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.fillRect(0, 0, this.width, this.height);
|
|
|
|
}else{
|
|
// 清空画布
|
|
ctx.clearRect(0, 0, this.width, this.height);
|
|
}
|
|
|
|
const image = await this.loadImage(canvas,this.imgData.src);
|
|
|
|
// 计算缩放后的图片位置和尺寸
|
|
const scaledImgX = imgX * scaleX;
|
|
const scaledImgY = imgY * scaleY;
|
|
const scaledImgWidth = this.imgData.width * scaleX;
|
|
const scaledImgHeight = this.imgData.height * scaleY;
|
|
|
|
// 绘制图片
|
|
if (this.imgData.angle == 0) {
|
|
ctx.drawImage(image, scaledImgX, scaledImgY, scaledImgWidth, scaledImgHeight);
|
|
} else {
|
|
ctx.save();
|
|
ctx.translate(scaledImgX + scaledImgWidth / 2, scaledImgY + scaledImgHeight / 2);
|
|
ctx.rotate((this.imgData.angle * Math.PI) / 180);
|
|
ctx.drawImage(image, -scaledImgWidth / 2, -scaledImgHeight / 2, scaledImgWidth, scaledImgHeight);
|
|
ctx.restore();
|
|
}
|
|
|
|
if(this.options.type == '2d') {
|
|
this.canvasToTempFilePath(resolve, reject, canvas);
|
|
}else{
|
|
ctx.draw(false, ()=>{
|
|
this.canvasToTempFilePath(resolve, reject);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 触发更新回调
|
|
triggerUpdate() {
|
|
this.onUpdate({
|
|
imageLoaded: this.imageLoaded,
|
|
imageSrc: this.imgData.src,
|
|
imageData: { ...this.imgData },
|
|
canvasWidth: this.canvasWidth,
|
|
canvasHeight: this.canvasHeight,
|
|
rectWidth: this.rectWidth,
|
|
rectHeight: this.rectHeight
|
|
});
|
|
}
|
|
|
|
// 销毁实例
|
|
destroy() {
|
|
this.imageLoaded = false;
|
|
this.imgData = {};
|
|
this.touch = {};
|
|
this.options = null;
|
|
this.onUpdate = null;
|
|
}
|
|
} |