Capture a report image and save to an image field (highcharts)


//Capture highcharts report render as an Image

LazyLoad.js([
'https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js'
], function () {
$(document).on("knack-view-render.view_778", function(event, view, record)
{
setTimeout(function(){
//scene_349/views/view_770
var node = document.getElementById('kn-report-view_778-1');
console.log("node is: ", node);
var options = {
quality: 0.95
};

domtoimage.toPng(node, options).then(function (dataUrl) {
console.log(dataUrl);
var link = document.createElement('a');
link.download = 'my-image-name.Png';
link.href = dataUrl;
var url = window.location.href.split("/");
var UrlBase = "https://api.knack.com/v1/pages/page_352/views/view_779/records/";
// var UrlBase = "https://api.knack.com/v1/pages/page_356/views/view_801/records/";
var target = url[url.length - 2];
console.log('target is: ', target);
var puturl = UrlBase + target;
var returnUrl = "https://pt.knack.com/crm#myapp/view-job-details6/" + target;
var data = {
field_523: link.href,
field_524: 'Yes'
};


//console.log('url is:', url);
//console.log('data is:', data);
//scene_348/views/view_767

Knack.showSpinner();
$.ajax({

url: puturl,
type: 'PUT',
headers: {
'Authorization': Knack.getUserToken(),
'X-Knack-Application-Id': Knack.application_id,
'Content-Type': 'application/json'
},
data: JSON.stringify(data, returnUrl),
success: function(response) {
Knack.hideSpinner();
window.location = returnUrl;
console.log('success');

},
error: function(jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect. Verify Network.';
} else if (jqXHR.status == 404) {
//msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
//msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
//msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
//msg = 'Time out error.';
} else if (exception === 'abort') {
//msg = 'Ajax request aborted.';
} else {
// msg = 'Uncaught Error.' + jqXHR.responseText;
}
console.log(msg);
}
});

});
},5000 ); //Give the image time to load from highcharts server, not rendered by Knack


});

});

1 Like

Awesome!