Я хотел бы сделать аннотацию изображения для моего ионного приложения. Таким образом, поток приложения будет использовать плагин камеры, чтобы сделать снимок, и использовать 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, не работает.
- удалить файл и написать файл и не работает.
- попытался преобразовать в ArrayBuffer, а не Blob и не работает
- попытался создать еще один новый файл, тоже не сработало (похоже, после нажатия на новую страницу все файловые функции не влияют на файлы)
- пробовал использовать родную кордову, но тоже не получилось.
- удалите те же файлы дважды, (в первый раз я не получил ошибку, но во второй раз я получил сообщение «Файл не существует», но когда я просматриваю источник, файл также появляется там и появляется в моем миниатюре на моем App.
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