javascript - 如何在使用 ionic 5 拍照或从库中选择照片后操作图像(裁剪和调整大小)
问题描述
基本上,我需要先操作我选择的图片,然后再将其放在 HTML 页面中。到目前为止我所做的是有两个选项加载图像或选择图像的操作表:
async selectImage() {
const actionSheet = await this.actionSheetController.create({
header: 'Select Image source',
buttons: [{
text: 'Load from Library',
handler: () => {
this.pickImage(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
handler: () => {
this.pickImage(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
}
这是pickImage函数
pickImage(sourceType) {
const options: CameraOptions = {
quality: 100,
sourceType,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
};
this.camera.getPicture(options)
.then((imageData) => {
this.crop.crop(imageData, {quality: 100 });
this.serviceps.logo = 'data:image/jpeg;base64,' + imageData;
}, error => console.error('Error cropping image', error));
}
那么现在如何在选择后立即添加裁剪和编辑图像?从昨天开始我一直在努力,但我做不到。
解决方案
推荐阅读
- android - 如何在xml中的Ternaroy运算符中使用三元条件,同时将数据设置为具有android数据绑定的TextView
- c# - 将 Json 格式的消息从 ac# 应用程序发送到服务器
- javascript - 验证 HTML 输入字段并使用 JavaScript 重定向到 Web 链接
- html - 在 angularjs 中添加一个 html,包括 ng-click
- c - C中的任何数字除以0,它是否属于分段错误?
- python - 合并每组以填充时间序列
- java - 如何使用 Selenium webdriver 和 Java 读取 PDF
- java - Java SWT 从 ListViewer 中删除元素
- r - 日期差异计算不准确
- java - 禁止仅在后台接收通知