Hi Team,
I am using ngx capture service(npm i ngx-capture) to take screenshot of the geographic imagery of Bing Maps. The capture service is returning blank image with markers but not renders the map/geographic location. Can someone please let me know if there is any method to capture the Bing maps screen completely.
Below is my code and sample images attached
capture() {
const dimensions = this.screen.nativeElement.getBoundingClientRect(); this.captureService.getImage(this.screen.nativeElement, false, { width: dimensions.width, height: dimensions.height, useCORS: true, }) .pipe( tap((img) => { this.imgBase64 = img; console.log(img); }) ).subscribe(img => { console.log(img); }) }
And my html looks like this
<div class="mt-2" #screen> <igx-geographic-map #map class="mapcontainer" [zoomable]="true"> </igx-geographic-map> <ng-template let-series="series" let-item="item" #geocodeTemplate> <div> <span class="small"><b>Latitude :</b> {{item.latitude}} </span> <br /> <span class="small"><b>Longitude :</b> {{item.longitude}} </span> <br /> </div> </ng-template></div>
Saved image displays marker locations but not Map, I have attached both expected Map and currently how its downloading.
Thanks in advance
Expected Screenshot
Actual Screenshot how ngx capture service is returning
Hello Sushmita,
My team and I have done an initial review of this thread, and I believe we will require a bit more information on this. Can you please provide some additional information regarding the following?
1. Are you receiving any sort of error or warning in the console window of the browser when you go to capture the image? If so, what is the error you are receiving?
2. At what point are you trying to capture the image? (e.g. On button click after the map has loaded / some other time?)
Please let me know if you have any other questions or concerns on this matter.
Hi Andrew,
I am not receiving any error/warning on console window while capturing image.
Yes On button click after the map has loaded we are marking locations and zooming to location using ZoomToGeographic method, marked location contains tooltip with latitude, longitude and other parameters
I have been discussing this behavior with our development teams, and it appears that there could be a web security issue when trying to capture an image. This is not something that is specific to the IgxGeographicMap or the Ignite UI for Angular toolset, but as a potential fix to this, you can handle the DownloadingImage event on the map imagery and then set the image.crossOrigin property of the event arguments to “anonymous.” The following code can help you to achieve this:
let imagery : IgxOpenStreetMapImagery= new IgxOpenStreetMapImagery(); imagery.i.downloadingImage = this.onDownloadingImage;
this.map.backgroundContent = imagery; ---------------- public onDownloadingImage(sender: any, args: DownloadingMultiScaleImageEventArgs){ args.image.crossOrigin = "anonymous"; }
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
Thanks for your time Andrew, this works fine for me.