Ionic Screenshot

ionic-v1
1

Can Someone help me. I am aware of the Screenshot plugin (https://ionicframework.com/docs/native/screenshot/),
I want to save the whole content (which is scrollable by the way), whatever there is in the content (the scrollable part as well). Some light on this is highly appreciated.

2

If you are using Ionic v1 (as you indicated in the topic tag) you shouldn’t look at Ionic Native as it is made for Ionic 2+ with Angular 2+. You want to use ngCordova (or as no there is no Screenshot shim in there) or the plugin directly: https://github.com/gitawego/cordova-screenshot#usage-in-angularjs

Problem: I don’t think there is a way to automatically make screenshots of all screens and stitch them together. There are apps for that to do it manually, but there is still manual work involved.

3

@Sujan12 Thank you for the quick response and the heads up.

Is there some way i can save an image of the ion-view or ion-content. Something like that.
If there is no way, then can you suggest some logic to stitch it manually (can you point me to some direction to get started on it). Thanks in advance.

4

I can’t, let’s hope someone else can.

5

Why cant you use the plugin https://github.com/gitawego/cordova-screenshot.git directly as @Sujan12 mentioned

6

@thesourav It doesn’t have any option like that. Or can you suggest an idea on how to stitch the images.

7

So, you want to take the screenshot of a page which spans more than a singular screen area, like a long list, and show them like an scrollable image?

8

@thesourav Yes. I want to show it as a single image. The whole content.

9

You can try this,( Not sure it will work on WebView or not )

1 Like
10

@thesourav Tried the library that you suggested. But it cant be used with ionic. Does not render the elements as seen in the view, have some issues I guess. Thank you any ways.

11

I’ve used HTML2Canvas on Ionic-v3, I’ve never used Ionic-v1, but I imagine it uses the ES2015 too, if so, you can use HTML2Canvas by following these steps:

  1. Install the dependency via npm:

npm install --save html2canvas

  1. Import using the ES2015 standard, :

import html2canvas from 'html2canvas'

  1. Create the function that will perform the screenshot and show to the user (in this case):
screenShotURI () {

         html2canvas (document.querySelector ("# capture")). then (canvas => {
             this.screen = canvas.toDataURL ()
             this.state = true
         });
}
  1. Create the UI:
<ion-content>
         <img src="{{screen}}" *ngIf="state">
         <div class="content-logged-app" id="capture">
                  <!-- Whatever you want to capture -->
         </div>
</ion-content>
  1. Run for the hug