Я пробовал подробное решение, приведенное в разделе Как сохранить изображение на localStorage и отобразить его на следующей странице? , Проблема в том, что преобразованное значение base64 одинаково для всех загружаемых изображений, а при использовании на следующей странице отображается пустое белое изображение .
HTML -
<input type="file" src=" " id="uploadUserImage" crossOrigin='Anonymous' (change)="readURL(this)"/>
<img src="" id="userImage" width="300" height="227">
Машинопись -
readURL(input) {
this.elementRef.nativeElement.querySelector("#userImage").style.display = "block";
var that = this;
var imgObj = that.elementRef.nativeElement.querySelector('#uploadUserImage');
if (imgObj.files && imgObj.files[0]) {
var reader = new FileReader();
reader.onload = function (e:any) {
var targetObj = e.target;
that.elementRef.nativeElement.querySelector('#userImage').src = targetObj.result;
}.bind(this);
reader.readAsDataURL(imgObj.files[0]);
}
var userProfileImage = this.elementRef.nativeElement.querySelector('#userImage');
var imgData = this.getBase64Image(userProfileImage);
localStorage.setItem("imgData", imgData);
}
getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 227;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
}
В основном я хочу показать это изображение тигра на следующей странице, как только пользователь загрузит на одну страницу.
Следующая Страница -
HTML -
<img src="" id="userProfileImage"/>
Машинопись -
var dataImage = localStorage.getItem('imgData');
var userImage = this.elementRef.nativeElement.querySelector('#userProfileImage');
userImage.src = "data:image/png;base64," + dataImage;
Любая помощь или руководство окажут большую помощь или если любой другой способ существует, чтобы достичь этого, чем сообщить мне, спасибо заранее!
html,html5,typescript,local-storage,angular6,
Я пробовал подробное решение, приведенное в разделе Как сохранить изображение на localStorage и отобразить его на следующей странице? , Проблема в том, что преобразованное значение base64 одинаково для всех загружаемых изображений, а при использовании на следующей странице отображается пустое белое изображение .
HTML -
<input type="file" src=" " id="uploadUserImage" crossOrigin='Anonymous' (change)="readURL(this)"/>
<img src="" id="userImage" width="300" height="227">
Машинопись -
readURL(input) {
this.elementRef.nativeElement.querySelector("#userImage").style.display = "block";
var that = this;
var imgObj = that.elementRef.nativeElement.querySelector('#uploadUserImage');
if (imgObj.files && imgObj.files[0]) {
var reader = new FileReader();
reader.onload = function (e:any) {
var targetObj = e.target;
that.elementRef.nativeElement.querySelector('#userImage').src = targetObj.result;
}.bind(this);
reader.readAsDataURL(imgObj.files[0]);
}
var userProfileImage = this.elementRef.nativeElement.querySelector('#userImage');
var imgData = this.getBase64Image(userProfileImage);
localStorage.setItem("imgData", imgData);
}
getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 227;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
}
В основном я хочу показать это изображение тигра на следующей странице, как только пользователь загрузит на одну страницу.
Следующая Страница -
HTML -
<img src="" id="userProfileImage"/>
Машинопись -
var dataImage = localStorage.getItem('imgData');
var userImage = this.elementRef.nativeElement.querySelector('#userProfileImage');
userImage.src = "data:image/png;base64," + dataImage;
Любая помощь или руководство окажут большую помощь или если любой другой способ существует, чтобы достичь этого, чем сообщить мне, спасибо заранее!
01HTML, html5, машинопись, локальное хранение, angular6,