CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Adarsh M Pallickal
Adarsh M Pallickal

Reputation: 821

Html2Canvas Screenshot clarity

Using html2canvas for taking screenshots. And that screenshot converted to image and attach it with email.

These screenshot includes highcharts. Some time x axis and y axis displayed with some shadow effect. How can I avoid it?

var tempcanvas=document.createElement('canvas');
tempcanvas.width=2000;
tempcanvas.height=980;
var context=tempcanvas.getContext('2d');
context.imageSmoothingQuality = "High";

context.drawImage(canvas,0,0,1000,750);
var link=tempcanvas.toDataURL('image/png',1);
$scope.alert.message = link;

var blobBin = atob(link.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
    array.push(blobBin.charCodeAt(i));
}
$scope.file=new Blob([new Uint8Array(array)], {type: 'image/png'});

enter image description here

Upvotes: 2

Views: 6128

Answers (2)

Andrew Adam
Andrew Adam

Reputation: 1582

let me try to assess my comments and also suggest some code:

When I ran into this issue what solved for me is when I started playing around the options of html2canvas. Here you can find the available options. When you simply want to call the function you use html2canvas(element, options). Just as emran suggested in their answer, you can pass an object as the second argument to the html2canvas function which can contain canvas creation options. Try passing the following:

var options = {
  async : false, // setting it to false may slow the generation a bit down
  allowTaint : false, // I am not sure whether it helped or not but I remember setting it
  imageTimeout : 100, // this further delays loading, however this solved a similar issue for me
  foreignObjectRendering : true // it depends on the browser used whether it is allowed or not
}

Then you can call your html2canvas function similarly to what emran suggested, however, onrendered is no longer necessary since newer versions of html2canvas work with .then()

var element = document.getElementById('element');
var destination = document.getElementById('destination');

html2canvas(element, options).then(function(canvas) {
    destination.appendChild(canvas);
});

Please note that there are several other interesting options at that page that might be useful for you. I can also suggest this article on the topic, this explanation of the options and this library that combines html2canvas and jsPDF for a direct HTML to PDF conversion.

Upvotes: 0

emran
emran

Reputation: 29

May this helps you something

All that is necessary is to set the dpi or scale options when you use html2canvas, and the resulting canvas should have your chosen dpi/scale.

function myRenderFunction(canvas) {
  destination.appendChild(canvas);
}

// Get source element and destination div.
var element = document.getElementById('element');
var destination = document.getElementById('destination');

// Normal html2canvas rendering.
html2canvas(element, {
    onrendered: myRenderFunction
});

// With dpi: 144 (scale: 1.5).
html2canvas(element, {
  dpi: 144,
    onrendered: myRenderFunction
});

// With scale: 2 (dpi: 192).
html2canvas(element, {
  scale: 2,
    onrendered: myRenderFunction
});

Upvotes: 2

Related Questions