ionic-framework - 在离子中显示来自设备的图像
问题描述
假设我在file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1542035689920.jpg
路径下有一个图像。是否可以仅通过分配属性在<image>
标签中显示此图像?.url
可能不会,如果是这样,有什么好的解决方案吗?我正在尝试对列表中的图像进行缩略图,我所做的方法是将图像读取为base64,使用画布将其转换然后显示它。问题是渲染所有图像需要太多时间。
ionViewDidLoad() {
this.defectImages.forEach(defectImage => this.loadThumbnail(defectImage.url))
}
loadThumbnail(url) {
return this.fileProvider.getDefectCachedImage(url)
.then(data => {
return this.generateFromImage(data, 400, 400, 0.5, thumbnail => {
let image = document.getElementById(url) as any;
image.src = thumbnail;
})
});
}
showImage(url: string) {
this.photoViewer.show(this.fileProvider.getCacheFolderPath() + url, '', {share: true})
}
generateFromImage(img, MAX_WIDTH: number = 700, MAX_HEIGHT: number = 700, quality: number = 0.5, callback) {
var canvas: any = document.createElement("canvas");
var image = new Image();
image.onload = () => {
var width = image.width;
var height = image.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, width, height);
// IMPORTANT: 'jpeg' NOT 'jpg'
var dataUrl = canvas.toDataURL('image/jpeg', quality);
callback(dataUrl)
};
image.src = img;
}
它正在工作,但工作太慢。我注意到 PhotoLibrary 包,但据我所知,它可以访问共享内存,并且我的图片仅保存在应用程序空间中。
解决方案
这是最新的 webview 的问题。最新的 webview 不允许加载本地资源。它在 Ionic 2 上运行良好。虽然不是最佳解决方案,但我正在粘贴对我有用的解决方案。
ionic cordova plugins rm cordova-plugin-ionic-webview
ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
cordova clean android
您可以构建(ionic cordova build android)应用程序并对其进行测试。
推荐阅读
- python - 如何使用浮点类型的数据(边界框)训练神经网络
- css - 如何更改 React 图标的线宽?
- android - 确认 tx 时 UPI 付款 href 链接导致错误
- javascript - Javascript无法访问对象属性
- javascript - 如果一个按钮被点击了 x 次,我需要在我的网站上发生一个事件
- javascript - AddEventListener 对新添加的 innerHtml 不起作用?
- c++ - 如何在 cout 语句中将数字转换为小数?
- android - 如何在 Android 片段中制作 SnackBar?
- python-3.x - RIDE 工具无法在 Ubuntu 20.4 上安装
- reactjs - Gatsby Source Contentful 4.x - 富文本 - 对 JSON 的更改