Issues saving geoanalytics map to image in Chrome using html2canvas

[rbartley]

Dear all,

I have implemented an equivalent of the "Export as an image" function in my mashup and this works fine for all visualization types apart from the geoAnalytics maps.  I know that  Qlik Sense does not include this for maps, but it works in IE, but not in Chrome (only scale line and @Qlik shown).  Does anyone have any idea why?

In IE

In Chrome

Here is the code I am using:

function saveAsImage(div)
{


var element = $(div);
console.log('element',element);
var getCanvas; 


html2canvas(element, {
useCORS: true,
//proxy: "server.js",
onrendered: function (canvas) {
  console.log('canvas',canvas);
            if (canvas.msToBlob) 
{ //for IE
                        var blob = canvas.msToBlob();
                        window.navigator.msSaveBlob(blob, 'chart.png');
             }
else 
{
//for Chrome, FF, etc.


  var link = document.createElement("a");
  link.download = "image.png";
  canvas.toBlob(function(blob){
link.href = URL.createObjectURL(blob);
console.log(blob);
console.log(link.href); // this line should be here
link.click();
  },'image/png');
}
}
,letterRendering:true
  });
}

I have also tried using canvas.toDataURL instead of toBlob, but the result is the same:

function saveAsImage(div)
{

var element = $(div); // global variable
console.log('element',element);
var getCanvas; // global variable


html2canvas(element, {
useCORS: true,
//proxy: "server.js",
onrendered: function (canvas) {
  console.log('canvas',canvas);
  if (canvas.msToBlob) 
  { //for IE
                        var blob = canvas.msToBlob();
                        window.navigator.msSaveBlob(blob, 'chart.png');
             }
             else 
{
var url = canvas.toDataURL('image/png', 1.0);// Other broswers except IE
                        $("<a>", {
                            href: url,
                            download: "chart.png"
                        })
                        .on("click", function () { $(this).remove() })
                        .appendTo("body")[0].click()
}
,letterRendering:true
  });
}

As always, any help will be gratefully received.

Regards,

Richard

[rbartley]

I've also tried this with html2canvas 1.0.0-alpha.12 using:

function saveAsImage(div)
{


var target = $(div); // global variable
console.log('element',target);
//html2canvas(target, {
// useCORS: true
//})
html2canvas($(div).get(0)).then(function (canvas) {
console.log('canvas',canvas);


if (canvas.msToBlob) 
{ //for IE
                        var blob = canvas.msToBlob();
                        window.navigator.msSaveBlob(blob, 'chart.png',1);
             }
else 
{

  var link = document.createElement("a");
  link.download = "image.png";


  canvas.toBlob(function(blob){
link.href = URL.createObjectURL(blob);
link.click();
  },'image/png',1);


}
  },{ removeContainer: false,allowTaint: true,letterRendering: true})
  .catch(function (err) { console.log(err); });
}

Since this version of html2canvas uses Promises, which aren't supported by IE (but are by Edge), this is not going to work for IE, but thought I'd try for Chrome.  Unfortunately, this still doesn't work and throws an error.  I've raised it as an issue here:

1.0.0-alpha.12 Canvas not included and generates "Unable to load image " error · Issue #1686 · nikla...

But if anyone has any ideas, please let me know.

Thanks,

Richard