Html2canvas Border Image Issue

September 17, 2023 Post a Comment

I am using html2canvas library to take screenshot of html view. but background-image failed to load. i am getting error message Error loading background: here is my JSFiddle. imag

Solution 1:

For Internet security reasons, trying to use an image from a different domain in a canvas causes problems. There are two html2canvas options, useCORS and proxy, which are designed to try to get around that problem.

You have to create the proxy in you project and use that into html2canvas proxy option.

Click here to view sample proxy created in different programming languages.

Usage of proxy in html2canvas(c# example)

html2canvas(document.body, {
    "logging": true, //Enable log (use Web Console for get Errors and Warings)"proxy":"html2canvasproxy.ashx",
    "onrendered": function(canvas) {
        var img = newImage();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.error = function() {
            if(window.console.log) {
                 window.console.log("Not loaded image from canvas.toDataURL");
            } else {
                alert("Not loaded image from canvas.toDataURL");
            }
        };
        img.src = canvas.toDataURL("image/png");
    }
});

Solution 2:

I have same problem. It's just because of not surpoted problem.

Check this: http://html2canvas.hertzen.com/features

Baca Juga

Unsupported CSS properties

These CSS properties are NOT currently supported

background-blend-mode
border-image
box-decoration-break
box-shadow
filter
font-variant-ligatures
mix-blend-mode
object-fit
repeating-linear-gradient()
writing-mode
zoom

Solution 3:

I found out the solution to this. Putting a rectangle as border for each PDF page and also starting the second page, and other pages from a litte down, by making difference in the pageHeight.

You can try it like this:

html2canvas(myCanvas).then(function(canvas) {

  var imgWidth = 210;
  var pageHeight = 290;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;


  var doc = newjsPDF('p', 'mm');
  var position = 0;
  var pageData = canvas.toDataURL('image/jpeg', 1.0);
  var imgData = encodeURIComponent(pageData);
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  doc.setLineWidth(5);
  doc.setDrawColor(255, 255, 255);
  doc.rect(0, 0, 210, 295);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    doc.setLineWidth(5);
    doc.setDrawColor(255, 255, 255);
    doc.rect(0, 0, 210, 295);
    heightLeft -= pageHeight;
  }
  doc.save('file.pdf');
});

Hope this will resolve your issue.

Html5 Guru