2

I am building a sudoku puzzle generator + sudoku downloader. There is no problem with the sudoku itself, but with the downloaded image of it.

So, I'm using html2 canvas, which allows me to download html elements. I did this with the sudoku. The big problem is that when I download that html element, I see some grayscale around the borders, as you can see in this example: enter image description here

And in the website you can't see that grayscale border: enter image description here

This probably does not have to do anything with css, because there is no problem in the styling itself, but in the way the html was downloaded.

I tried using different image formats, like png, jpg and heic, the results were all the same.

If someone knows anything that could solve my problem, please let me know.

This is a minimal example of my code. The screenshotTarget is just a html 2 element in this situation

document.getElementById("dl-png").onclick = function () {
        const screenshotTarget =       document.getElementById("example-table");
html2canvas(screenshotTarget, {
          scale: 4.5,
        }).then((canvas) => {
          const base64image = canvas.toDataURL("image/jpg");
          var anchor = document.createElement("a");
          anchor.setAttribute("href", base64image);
          anchor.setAttribute("download", "sudoku.jpg");
          anchor.click();
          anchor.remove();
        });
};
Emiel VdV
  • 296
  • 2
  • 9
  • Please provide an [MCVE]. Looks like the issue is that your elements are actually on floating point positions but that the browser's render will round them. – Kaiido Apr 07 '22 at 03:05
  • Can you please put a snippet of code on how you download the photo with html2 canvas? – Alex Pappas Apr 08 '22 at 03:32

1 Answers1

1

You have to play with the scale value to increase the size of a target first before capturing it. See html2canvas configuration. Try scale 2 to 5.

If html2canvas cannot give you what you need, you might have to opt to a different tool. Try domtoimage. Or the accepted answer for the same question

(Refer to this stackoverflow answer here)

Or maybe you have a similar case with this guy where he was on a retina display. See his solution.

Alex Pappas
  • 2,377
  • 3
  • 24
  • 48
  • I tried the scaling method, the edges are not completely black but way better right now. I indeed have a Retina display, this probably causes my problem. – Emiel VdV Apr 08 '22 at 08:22
  • I also saw that there was a pdf method with html2pdf, do you think this will solve my problem? Because my goal for this project is to build a book with sudoku's. And I think that will work with pdf's – Emiel VdV Apr 08 '22 at 08:24
  • I am not sure with the implementation details. but most probably it will still use `canvas` and do a "screen capture" under the hood before putting it as a pdf file. No harm in trying! Please do and share your experience for the community :D – Alex Pappas Apr 08 '22 at 09:31
  • Try [this](https://dev.to/dailydevtips1/vanilla-javascript-canvas-images-to-black-and-white-mpe), At the last part of the article, you may try to replicate how he turned the image to pure black and white (no shades of grey) – Alex Pappas Apr 08 '22 at 09:34
  • 1
    Yeah ok but I think the problem will be when I try the black and white shades that the numbers won't be shaded nicely. I am going to try it right now – Emiel VdV Apr 08 '22 at 10:28