Hello. please tell me where is my mistake. The task is to save the block as an image. I do this as follows:

html2canvas($('.gameTable'),{ onrendered: function (canvas) { $('#download').attr('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")); $('#download').attr('download', prefix+'_'+type+'_'+size+'.png'); $('#download')[0].click(); } });

Tried it like this:

 html2canvas($('.gameTable'), { onrendered: function (canvas) { var newCanvas = document.createElement("canvas"); newCanvas.setAttribute('width',1000); newCanvas.setAttribute('height',1000); var ctx = newCanvas.getContext('2d'); ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,1000,1000); var dataURL = newCanvas.toDataURL(); var img = $(document.createElement('img')); img.attr('src', dataURL); $('#download').attr('href', newCanvas.toDataURL("image/png")); $('#download').attr('download', prefix+'_'+type+'_'+size+'.png'); $('#download')[0].click(); } });

As a result, I get a poor quality image, in any case, the customer is not satisfied. Here is the saved scripts option: enter image description here

Here is a save with the Lightshot: enter image description here

Although I am now looking at the attached images and I don’t see any particular differences, tell me if there is any mistake in my actions. Thanks in advance to everyone.

  • Perhaps there is some other way to save a specific page block, not necessarily using jQuery. Any way to save the image by means of the browser will do. - Boroda95
  • I uploaded master test.xyz/chess to the host. The image is saved when clicking on the "1000 px" button, so I think the loss of image quality will be more clearly visible. - Boroda95
  • What is the original size of the picture? You can lay out the original. What you saved with your script and Lightshot I don’t see any difference - Kostiantyn Okhotnyk
  • mastertest.xyz/chess try here, if it's not difficult for you, so the difference is clearly visible. - Boroda95
  • The block that should be saved has a size of 1000x1000 pixels. And the image is getting the same size. - Boroda95

1 answer 1

according to MDN, the toDataURL canvass method has a second quality parameter:

canvas.toDataURL (type, encoderOptions);

encoderOptions - A number from 0 to 1 indicating the quality of the image.

Also this parameter

The default value is 0.92.

you can, for example, put canvas.toDataURL ("image / jpeg", 1)