I've developed a feature using an observable and I'm attempting to transfer a dataURL from one component to another in order to display it as an image.
Here is the HTML code for the component where I want to send data from:
<canvas id="patternFrame" width="600px" height="600px"></canvas>
<ion-button color="medium" (click)='sendPattern()'>send</ion-button>
This is the Typescript code for the component where I want to send data from:
import {StageColorService} from '../../services/stage-color.service';
constructor(private stageColorService: StageColorService){}
ngOnInit(){}
sendPattern(){
const canv =document.getElementById('patternFrame') as HTMLCanvasElement;
this.stageColorService.sendStage(canv.toDataURL()); // utilizing service to transmit image to color component
};
Below is the HTML code for the component where I want to send data to:
<img src="" alt="Image" id="onlyImage" width="400" height="200">
And here is the Typescript code for the component where I want to send data to:
import {StageColorService} from '../../services/stage-color.service';
constructor(private stageColorService: StageColorService) { }
ngOnInit() {
this.stageColorService.stage$
.subscribe(
image => {
console.log('image subscription'+ image);
document.getElementById('onlyImage').setAttribute('src', image);
});
}
Lastly, this is the Typescript code for my service:
import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class StageColorService {
private stageSource = new Subject<any>();
stage$ = this.stageSource.asObservable();
constructor() { }
sendStage(st: any){
this.stageSource.next(st);
}
}