假设我在 file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1542035689920.jpg
路径下有一张图片 . 是否可以通过分配 .url
属性在 <image>
标签中显示此图像?可能不是,如果有的话有什么好的解决方案吗?我'm trying to do a thumbnail of an image in the list, the way I'已经完成它是将图像读取为base64,使用canvas转换它然后显示它 . 问题是渲染所有图像需要花费太多时间 .
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包,但据我所知,它可以访问共享内存,我的图片只能在应用程序空间中保存 .
1 回答
这是最新的webview的问题 . 最新的webview不允许加载本地资源 . 它在Ionic 2上运行良好 . 虽然不是最佳解决方案,但我正在粘贴适合我的解决方案 .
你可以构建(离子cordova build android)应用程序并测试它 .