Capturing Image of Qlik Sense Objects in Mashups

[Francis_Kabinoff]

A community user recently asked if there was any way to capture images of Qlik Sense objects in mashups and save to disk.  So the idea is, a user is using your mashup, makes some selections, finds some cool insights, and wants to save an image of the charts or objects in the mashup.

This is a bit tricky with the current browsers, but I've put together a solution that I've tested on newer versions of IE, Firefox, and Chrome, which works well. I'm going to attach it to this post, and walk you through using it.

The first thing you'll want to do is download the qBlob.zip file that's attached to this post. Then unzip it and place the qBlob folder in your mashup folder, which can be located at C:\Users\<username>\Documents\Qlik\Sense\Extensions\<mashup name> on Qlik Sense Desktop. If you are using Qlik Sense server, you will need to serve the files some way.

Then you'll need to include the qBlob.js in your mashup .js file, like so -

Once it's included, all you need to do to use it is call the following function, replacing <objId> with the ID of the container element of the Qlik Sense object, which you most likely also used in the app.getObject() method, and replace <output filename> with a filename you wish to output to. The filename requires a type, such as .png or .jpg.

qBlob.saveToFile(<objId>, <output filename>);

In the mashup I built to test the functionality, I attached the above function call to a click handler on an anchor element, like so -

$("a").click(function(e) {
   e.preventDefault();
   qBlob.saveToFile('QV01', 'mychart.jpg');
  });

You can take a look at this in action here - qBlob Test

I've attached my entire mashup folder that's linked to above, as well as just the qBlob folder that you'll need to do this in your own mashups.

qBlob.zip

blob-test.zip

[mmonfort]

Good suggestion - the extension I'm using is the dygraphs one from Branch. In my mashup I have to color the Bootstrap Well I place it in with a white background because the object looks like it defaults to having a transparent background. Doing the same for yours makes sense so applying that to the object works:

Interestingly though, the legend on the left hand side has its first few words cut off - the original object looks like this so am investigating how to fix this:

Oh and I found another thing - I've found that this only seems to work in Chrome but not IE or Safari.. just wondering if you knew that as well?

Anyway, hope this has been helpful for others so far too!

[Francis_Kabinoff]

cool. i'm thinking if you added a bit of padding to the right element, it wouldn't cut off, looks like something might be overflowing its container, and the qBlob stuff won't pick up overflow i don't think.

[mmonfort]

Thanks Francis

I think it must have something to do with the overflow.

When the app is zoomed out or on a larger screen I can download the png and it looks normal:

When I zoom in to a normal size for the mashup page and download the png it seems to cut off

almost looks like its still trying to download the image but when I change the screen size to zoom back out a bit more, then more of the image is shown.

Feels like we're product testing huh!

Anyway, every step seems to be heading in the right direction with this so thanks for taking the time to keep looking at these!

[mmonfort]

Hi Francis

Have just jumped back onto this and 2 things I have noticed so far.

1) The blob likes only certain fonts - my mashup no longer uses the default qlik fonts available and when I use the blob to save down an image the title text can look different to what I have rendered on the app... all good just something to note

2) If you have a mashup that has charts further down the page then they can be cut off or even not shown at all.

I added this feature to charts at the top of one of my pages and they come out just fine whereas charts in the middle of the app get cut off and charts at the bottom come up blank...

When I click on the save as image button on each of these, a download of the .PNG file occurs but when that file is opened the cut off's occur.

So is there a fixed page height that these blobs work on?

thanks

[Francis_Kabinoff]

Hey Mark,

Yea that does seem to be a problem. A quick and dirty fix is to set the element to position: fixed and top and left 0 right before qBlob fires off, then set it back again when it's done. I just tested that, and it works.

As for a cleaner solution, why it actually cuts off, I'll need to investigate further when I have a bit of time. I'll update you.

[mmonfort]

Thanks Francis I found similar answers here: javascript - HTML2Canvas converting overflowed content to image - Stack Overflow

Seems to be an overflow issue

Could you show me an example of how you did your setting the element to one state and then converting it back?

[mmonfort]

Also I saw that in that Stack Overflow solution they replaced what we have in your solutions qBlob.js file:

html2canvas(document.getElementById(b), {  // old - tried .body { for whole screen

            onrendered: function(b) {

                b.toBlob(function(b) {

                    a(b, c)

                })

            }

        })

with this:

document.getElementById('diagram').parentNode.style.overflow = 'visible'; //might need to do this to grandparent nodes as well, possibly.
  html2canvas( [ document.getElementById('diagram') ], {
  onrendered: function(canvas) {
  document.getElementById('diagram').parentNode.style.overflow = 'hidden';
  var dataUrl = canvas.toDataURL();
  window.open(dataUrl, "toDataURL() image", "width=800, height=800");
  //Canvas2Image.saveAsPNG(canvas);
  }
  });
}

I am trying to figure out how to get this working in your solution with a bit of trial and error - I assume this is where you are making the changes?

cheers

[Francis_Kabinoff]

So something like this would be the "correct " way to go about fixing it. The solution I provided is just a quick hack. But by all means, if you get it working in the qBlob function itself, please share. And I'll revisit it when I have some more free time.

[mmonfort]

for the time being could you show your quick hack?

I'll definitely share what I find if I can get the above working

thanks!

[Francis_Kabinoff]

Yea, so a dirty but effective solution would be to just add it in the click event.

$("#saveqv02").click(function(e) {

   e.preventDefault();

   $("#QV02").css({position: "fixed", top: "0", left: "0"}); //this line sets to fixed

   qBlob.saveToFile('QV02', 'qv02.jpg');

   $("#QV02").css({position: "relative"}); //this line sets it back

  });

That's assuming that the position was relative to begin with on the element. Are there more elegant ways to do this? yea. but this is quick and should work.