如何实现图片裁剪、旋转

如何实现图片裁剪、旋转

HarmonyOS
2024-07-22 12:22:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
wngsheng

使用Canvas与媒体的图片处理结合来实现,Canvas层叠三层绘制,第一层绘制图片后通过OnAreaChange事件获取图片所在容器的坐标,从而确定二层、三层的Canvas画布所在位置。第二层绘制遮罩层实现裁剪区域与非裁剪区域区分显示。第三层绘制裁剪框,结合OnTouch事件实现可拖拽裁剪框,从而确定裁剪区域。

// 绘制背景图 
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 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-07-22 20:08:18
相关问题
如何编辑裁剪相册中的图片
578浏览 • 1回复 待解决
想要实现一个图片裁剪的功能
429浏览 • 1回复 待解决
HarmonyOS image如何图片裁剪成圆形
49浏览 • 1回复 待解决
如何对相册图片进行编辑裁剪
1804浏览 • 1回复 待解决
HarmonyOS 有没有图片裁剪控件?
83浏览 • 1回复 待解决
HarmonyOS Image配置的图片如何旋转
8浏览 • 1回复 待解决
HarmonyOS 选择图片裁剪的功能
19浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
481浏览 • 1回复 待解决
HarmonyOS 如何实现Y轴旋转
287浏览 • 1回复 待解决
HarmonyOS 图片旋转角度问题
14浏览 • 1回复 待解决
如何实现应用的屏幕自动旋转
2288浏览 • 1回复 待解决
当前有没有图片裁剪相关demo
450浏览 • 1回复 待解决
HarmonyOS 图片浏览和裁剪的视图组件
79浏览 • 1回复 待解决