HarmonyOS 鸿蒙Next图片裁剪完整例子

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next图片裁剪完整例子

需要能移动，缩放和裁剪成圆形的。

目前我使用PixelMap 进行缩放，api是调用成功的，但是页面上没有啥变化



关于HarmonyOS 鸿蒙Next图片裁剪完整例子的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

Harmonyos Next教程
2 回复

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

参考demo:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index{
  [@State](/user/State) imagePixelMap:PixelMap = undefined
  [@State](/user/State) edit:boolean = false

@Builder buttonModel($$:{textContent,action}){
Button($$.textContent)
.fontSize(14)
.height(30)
.width(60)
.borderRadius(10)
.backgroundColor(’#E8A027’)
.onClick(()=>{
$$.action
this.edit = true
})
}


async get_pixelmap(){
// 获取resourceManager资源管理
const context = getContext(this)
const resourceMgr = context.resourceManager
// 获取rawfile文件夹下httpimage.PNG的ArrayBuffer
const fileData = await resourceMgr.getMediaContent($r(‘app.media.icon’))
const buffer = fileData.buffer
// 创建imageSource
const imageSource = image.createImageSource(buffer)
// 创建PixelMap
const pixelMap = await imageSource.createPixelMap()
return pixelMap
}


// 对pixelMap进行裁剪
async crop_image(){
let pixelMap = await this.get_pixelmap()
// x：裁剪起始点横坐标0
// y：裁剪起始点纵坐标0
// height：裁剪高度300，方向为从上往下（裁剪后的图片高度为300）
// width：裁剪宽度300，方向为从左到右（裁剪后的图片宽度为300）
pixelMap.crop({x:0,y:0,size:{height:300,width:300}})
this.imagePixelMap = pixelMap
}


// 对pixelMap进行缩放
async scale_image(){
let pixelMap = await this.get_pixelmap()
pixelMap.scale(0.5,0.5)
this.imagePixelMap = pixelMap
}


// 对pixelMap进行偏移
async translate_image(){
let pixelMap = await this.get_pixelmap()
pixelMap.translate(100,100);
this.imagePixelMap = pixelMap
}


// 对pixelMap进行旋转
async rotate_image(){
let pixelMap = await this.get_pixelmap()
pixelMap.rotate(90);
this.imagePixelMap = pixelMap
}


// 对pixelMap进行翻转
// 垂直翻转
async flip_image(){
let pixelMap = await this.get_pixelmap()
pixelMap.flip(false, true);
this.imagePixelMap = pixelMap
}


// 对pixelMap进行透明度调整
async opacity_image(){
let pixelMap = await this.get_pixelmap()
pixelMap.opacity(0.5);
this.imagePixelMap = pixelMap
}


<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
  build(){
Column(){
if(!this.edit){
Row(){
Image($r(‘app.media.icon’)).objectFit(ImageFit.None)
}.width(‘100%’).height(‘50%’).backgroundColor(’#F0F0F0’)
}else{
Row(){
// 将编辑好的pixelMap传递给状态变量imagePixelMap后，通过Image组件进行渲染
Image(this.imagePixelMap).objectFit(ImageFit.None)
}.width(‘100%’).height(‘50%’).backgroundColor(’#F0F0F0’)
}
//换行，每一行子组件按照主轴方向排列     主轴对齐方式 lex主轴方向元素等间距布局
Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceEvenly}){
this.buttonModel({textContent:‘裁剪’,action:this.crop_image()})
this.buttonModel({textContent:‘缩放’,action:this.scale_image()})
this.buttonModel({textContent:‘偏移’,action:this.translate_image()})
this.buttonModel({textContent:‘旋转’,action:this.rotate_image()})
this.buttonModel({textContent:‘翻转’,action:this.flip_image()})
this.buttonModel({textContent:‘透明度’,action:this.opacity_image()})
Button(‘还原’)
.fontSize(14)
.height(30)
.width(60)
.borderRadius(10)
.margin({top:20})
.backgroundColor(’#A4AE77’)
.onClick(()=>{
this.edit = false
})
Button(“保存图片”)
.onClick(() => {
this.savePixelMapToPng();
})
}
.margin({top:100})
.height(‘100%’)
.width(‘100%’)


}
.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">height</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'100%'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">
.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">width</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'100%'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">

}


async savePixelMapToPng() {
let pixelMap =  await this.get_pixelmap();
const uri: string = await savePixelMap(getContext(this), pixelMap);
console.log(“png Uri is ======================”+uri);
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

回到顶部