如何实现图片裁剪、旋转

// 绘制背景图 
async drawImage() { 
  await this.initData('test.jpg') 
  if (this.imageInfo != undefined) { 
    this.canvasContext.drawImage(this.pixelMap, 0, 0, px2vp(this.imageInfo.size.width), 
      px2vp(this.imageInfo.size.height)); 
    this.canvasContext.save(); 
  } 
} 
 
// 绘制蒙层 
drawMask() { 
  this.canvasContext3.clearRect(0, 0, this.imageInfo?.size.width, this.imageInfo?.size.height); 
  this.canvasContext3.fillStyle = 'rgba(0,0,0,0.7)'; 
  this.canvasContext3.fillRect(0, 0, px2vp(this.imageInfo?.size.width), px2vp(this.imageInfo?.size.height)); 
  this.canvasContext3.clearRect(this.clipRect.x - this.initPosition.x, this.clipRect.y - this.initPosition.y, 
    this.clipRect.width, this.clipRect.height); 
} 
 
// 绘制裁剪框 
drawClipImage() { 
  this.canvasContext2.clearRect(0, 0, this.clipRect.width, this.clipRect.height); 
  this.canvasContext2.lineWidth = 6 
  this.canvasContext2.strokeStyle = '#ffffff' 
  this.canvasContext2.beginPath() 
  this.canvasContext2.moveTo(0, 20) 
  this.canvasContext2.lineTo(0, 0); 
  this.canvasContext2.lineTo(20, 0); 
  this.canvasContext2.moveTo(this.clipRect.width - 20, 0); 
  this.canvasContext2.lineTo(this.clipRect.width, 0); 
  this.canvasContext2.lineTo(this.clipRect.width, 20); 
  this.canvasContext2.moveTo(0, this.clipRect.height - 20); 
  this.canvasContext2.lineTo(0, this.clipRect.height); 
  this.canvasContext2.lineTo(20, this.clipRect.height); 
  this.canvasContext2.moveTo(this.clipRect.width - 20, this.clipRect.height); 
  this.canvasContext2.lineTo(this.clipRect.width, this.clipRect.height); 
  this.canvasContext2.lineTo(this.clipRect.width, this.clipRect.height - 20); 
  this.canvasContext2.stroke() 
  this.canvasContext2.beginPath(); 
  this.canvasContext2.lineWidth = 0.5; 
  let height = Math.round(this.clipRect.height / 3); 
  for (let index = 0; index <= 3; index++) { 
    let y = index === 3 ? this.clipRect.height : height * index; 
    this.canvasContext2.moveTo(0, y); 
    this.canvasContext2.lineTo(this.clipRect.width, y); 
  } 
  let width = Math.round(this.clipRect.width / 3); 
  for (let index = 0; index <= 3; index++) { 
    let x = index === 3 ? this.clipRect.width : width * index; 
    this.canvasContext2.moveTo(x, 0); 
    this.canvasContext2.lineTo(x, this.clipRect.height); 
  } 
  this.canvasContext2.stroke(); 
} 
 
// 裁剪图片 
async clipImage() { 
  let x = this.clipRect.x - this.initPosition.x; 
  let y = this.clipRect.y - this.initPosition.y; 
  console.info('x= ' + x + '  y = ' + y + 'height = ' + this.clipRect.height + 'width = ' + this.clipRect.width) 
  await this.pixelMap?.crop({ 
    x: vp2px(x), 
    y: vp2px(y), 
    size: { height: vp2px(this.clipRect.height), width: vp2px(this.clipRect.width) } 
  }) 
  this.cropImageInfo = await this.pixelMap?.getImageInfo(); 
  this.isCrop = true 
  this.rotateOn = true 
} 
 
// 旋转图片 
async rotateImage() { 
  if (this.rotateOn) { 
    await this.pixelMap?.rotate(90) 
    const info = await this.pixelMap?.getImageInfo() 
    this.cropImageInfo = info 
    if (this.pixelMapChange) { 
      this.pixelMapChange = false 
    } else { 
      this.pixelMapChange = true 
    } 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.