我想为我的离子应用程序做图像注释。因此,应用程序的流程将是使用相机插件拍摄照片,然后使用FabricJs在图像上绘制然后保存文件。
当我尝试保存或覆盖文件时遇到障碍。显然,源“ http://localhost:8080/file/data/user/0/ *** / files / 1547183479807.png”文件不会更新。
应用程序的流程 1)用@ ionic-native / camera拍照 2)将文件复制到本地目录 3)使用this.win.Ionic.WebView.convertFileSrc将文件名转换为“ http://localhost:8080/file/data/user/0/ *** / files / 1547183479807.png” 4)推送到另一页以访问画布 5)使用链接将背景设置为我的画布(FabricJs) 6)在图像上绘制(手动) 7)通过覆盖现有文件来保存文件,但是从此以后一切都无效。
我试图 -用writeFile和writeExisitingFile覆盖,没有用。 -removeFile和writeFile无效。 -尝试转换为ArrayBuffer而不是Blob,但无法正常工作 -尝试创建另一个新文件,但也无法正常工作(在我推送到新页面后,所有文件功能均不影响文件) -尝试使用原生Cordova,但也无法正常工作。 -两次删除相同的文件((第一次我没有收到错误,但是第二次我收到了错误提示“文件不存在”,但是当我查看源文件时,文件也在那里并出现在我的缩略图中)应用程序。
private copyFileToLocalDir(namePath, currentName, newFileName,id,index) {
this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
const keys = id.split('-');
let filename = this.file.dataDirectory + newFileName;
this.fp = this.win.Ionic.WebView.convertFileSrc(filename) ;
this.navCtrl.push(AnnotationsPage, {
filepath: this.fp,
filename: newFileName
});
this.presentToast("Image Successfully Added",'middle');
}, error => {
this.presentToast('Error while storing file.','middle');
});
}
Annotation.ts
savePicture() {
let image = this.canvas.toDataURL({
format: 'png'
});
this.saveBase64(image);
}
public saveBase64(base64:string):Promise<string>{
return new Promise((resolve, reject)=>{
var realData = base64.split(",")[1]
let blob=this.b64toBlob(realData,"image/png")
this.file.writeFile(this.file.dataDirectory,this.filename,blob,{replace:true})
// this.file.writeExistingFile(this.file.dataDirectory,this.filename, blob)
.then((val)=>{
console.log('Write Info',val)
let fp = this.win.Ionic.WebView.convertFileSrc(this.file.dataDirectory+this.filename) ;
})
.catch((err)=>{
console.log('error writing blob')
console.log(err);
// reject(err)
})
})
}
b64toBlob(b64Data, contentType) {
contentType = contentType || '';
var sliceSize = 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
我检查了base64文件,它工作正常(将数据扔到在线转换器中,并显示图片。
在函数“ copyFileToLocalDir”之后,似乎无法修改本地目录中的文件。
先谢谢了。随时问我更多问题。 7小时没有结果。
我正在更新测试。 是否已将File.readAsDataUrl以及文件file:/// data / user / 0 / * /files/1547231914843.png从旧图像更新为新图像? (已在某些在线转换器上测试了base64),但仍未反映在源http://localhost:8080/file/data/user/0/ *** / files / 1547231914843.png
上答案 0 :(得分:0)
感谢所有通读的人。
经过大量测试,我发现Ionic Webview的文件不会被更新,除非您再次调用它们(有点像缓存,并且显然没有办法重置或刷新缓存)。
因此,在我的情况下,我需要从Web视图中删除图像,然后再次调用它,然后它将返回以再次检索或使用另一个文件名创建另一个文件并显示它。