HarmonyOS 鸿蒙Next编辑图片实现马赛克功能
HarmonyOS HarmonyOS 鸿蒙Next编辑图片实现马赛克功能
需要给车辆的车牌号打上马赛克，避免信息泄露。水印功能，编辑图片：马赛克功能
2 回复
HarmonyOS 马赛克demo如下：
import { DrawPathType, DrawViewModel } from '../viewmodel/DrawViewModel'
@Component
export struct DrawView {
@ObjectLink viewModel: DrawViewModel
build() {
Column({ space: 8 }) {
Text('请选择画笔类型')
.fontColor(Color.Red)
.textAlign(TextAlign.Center)
.fontSize(30)
.width('80%')
.margin('10%')
Canvas(this.viewModel.context)
.width('100%')
.height('75%')
.onAreaChange((oldValue: Area, newValue: Area) => {
this.viewModel.canvasAreaChange(newValue)
})
.gesture(
GestureGroup(GestureMode.Exclusive,
PanGesture()
.onActionStart((event: GestureEvent) => {
let finger: FingerInfo = event.fingerList[0];
if (finger == undefined) { return }
let x = finger.localX
let y = finger.localY
this.viewModel.moveStart(x,y)
})
.onActionUpdate((event: GestureEvent) => {
let finger: FingerInfo = event.fingerList[0];
if (finger == undefined) { return }
let x = finger.localX
let y = finger.localY
this.viewModel.moveUpdate(x,y)
})
.onActionEnd((event: GestureEvent) => {
let finger: FingerInfo = event.fingerList[0];
if (finger == undefined) { return }
this.viewModel.moveEnd()
})
)
)
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
Button('普通画笔')
.onClick(() => {
this.viewModel.drawModel.pathType = DrawPathType.pen
})
Button('马赛克画笔')
.onClick(() => {
this.viewModel.drawModel.pathType = DrawPathType.pattern
})
Button('清除内容')
.onClick(() => {
this.viewModel.clearPath()
})
}
}
}
}
export class DrawPathPointModel {
x: number = 0
y: number = 0
}
export enum DrawPathType {
pen = 0, //画笔
pattern, //马赛克
}
// 配置画笔
export class DrawPathModel {
public pathType: DrawPathType = DrawPathType.pen
public color: string = "#ED1B1B"
public lineWidth: number = 8
public img: ImageBitmap = new ImageBitmap("Images/canvas.png")
}
@Observed
export class DrawViewModel {
public settings: RenderingContextSettings = new RenderingContextSettings(true)
public context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
public drawModel: DrawPathModel = new DrawPathModel()
public canvasHeight: number = 0
public canvasWidth: number = 0
private pattern: CanvasPattern | null
private points: DrawPathPointModel[] = []
// 绘制路径
private drawPath = new Path2D()
constructor() {
this.pattern = this.context.createPattern(this.drawModel.img, 'repeat')
}
moveStart(x: number, y: number) {
this.points.push({x: x, y: y})
this.drawPath.moveTo(x, y)
this.drawCurrentPathModel()
}
moveUpdate(x: number, y: number) {
let lastPoint = this.points[this.points.length - 1]
this.points.push({x: x, y: y})
this.drawPath.quadraticCurveTo((x + lastPoint.x) / 2, (y + lastPoint.y) / 2, x, y)
this.drawCurrentPathModel()
}
moveEnd() {
this.points = []
this.drawPath = new Path2D()
}
clearPath() {
this.points = []
this.drawPath = new Path2D()
this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
}
canvasAreaChange(area: Area) {
this.canvasHeight = area.height as number
this.canvasWidth = area.width as number
}
private drawCurrentPathModel() {
this.context.globalCompositeOperation = 'source-over'
this.context.lineWidth = this.drawModel.lineWidth
if (this.drawModel.pathType == DrawPathType.pen) {
this.context.strokeStyle = this.drawModel.color
} else {
if (this.pattern) {
this.context.strokeStyle = this.pattern
}
}
this.context.lineJoin = 'round'
this.context.stroke(this.drawPath)
}
}
export class DrawPathPointModel {
x: number = 0
y: number = 0
}
export enum DrawPathType {
pen = 0, //画笔
pattern, //马赛克
}
// 配置画笔
export class DrawPathModel {
public pathType: DrawPathType = DrawPathType.pen
public color: string = "#ED1B1B"
public lineWidth: number = 8
public img: ImageBitmap = new ImageBitmap("Images/canvas.png")
}
@Observed
export class DrawViewModel {
public settings: RenderingContextSettings = new RenderingContextSettings(true)
public context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
public drawModel: DrawPathModel = new DrawPathModel()
public canvasHeight: number = 0
public canvasWidth: number = 0
private pattern: CanvasPattern | null
private points: DrawPathPointModel[] = []
// 绘制路径
private drawPath = new Path2D()
constructor() {
this.pattern = this.context.createPattern(this.drawModel.img, 'repeat')
}
moveStart(x: number, y: number) {
this.points.push({x: x, y: y})
this.drawPath.moveTo(x, y)
this.drawCurrentPathModel()
}
moveUpdate(x: number, y: number) {
let lastPoint = this.points[this.points.length - 1]
this.points.push({x: x, y: y})
this.drawPath.quadraticCurveTo((x + lastPoint.x) / 2, (y + lastPoint.y) / 2, x, y)
this.drawCurrentPathModel()
}
moveEnd() {
this.points = []
this.drawPath = new Path2D()
}
clearPath() {
this.points = []
this.drawPath = new Path2D()
this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
}
canvasAreaChange(area: Area) {
this.canvasHeight = area.height as number
this.canvasWidth = area.width as number
}
private drawCurrentPathModel() {
this.context.globalCompositeOperation = 'source-over'
this.context.lineWidth = this.drawModel.lineWidth
if (this.drawModel.pathType == DrawPathType.pen) {
this.context.strokeStyle = this.drawModel.color
} else {
if (this.pattern) {
this.context.strokeStyle = this.pattern
}
}
this.context.lineJoin = 'round'
this.context.stroke(this.drawPath)
}
}
更多关于HarmonyOS 鸿蒙Next编辑图片实现马赛克功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS 鸿蒙Next编辑图片中的马赛克功能是一项强大的图片处理工具，允许用户对图片中的特定区域进行遮盖，以保护隐私或突出图片主体。
要使用马赛克功能，用户可以在图库中选择一张图片，进入编辑界面后，点击右上角的画笔图标（或类似标记），进入涂鸦或编辑面板。在此面板中，用户应能找到马赛克选项。选择马赛克后，可以通过手指或鼠标在图片上滑动，选定需要遮盖的区域。选定区域后，系统会自动将该区域处理为马赛克效果。
此外，HarmonyOS 鸿蒙Next的马赛克功能可能还支持多种样式和程度的遮盖，用户可以根据实际需求进行调整。例如，用户可以选择不同大小的马赛克方块，以实现不同程度的遮盖效果。
如果在使用过程中遇到任何问题，如马赛克功能无法正常使用或效果不佳，建议检查图片的格式和大小是否满足系统要求，以及是否已安装最新版本的HarmonyOS系统。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。
