首页 >  html代码 >  html2canvas提高图片质量清晰度

html2canvas提高图片质量清晰度

时间：2024-01-01

当使用html2canvas进行生成图片操作时，我们要考虑图片清晰度，可以通过以下几个方法来提升。

一、增加截图区域尺寸

let _canvas = document.getElementById("content");//获取截图区域

 var canvas2 = document.createElement("canvas");

 var w = parseInt(window.getComputedStyle(_canvas).width);//计算截图区域的宽高

 var h = parseInt(window.getComputedStyle(_canvas).height);

//将canvas画布放大若干倍，然后盛放在较小的容器内，以破解模糊

canvas2.width = w * 2;//提升为原区域的2倍

 canvas2.height = h * 2;

canvas2.style.width = w * 2 + "px";//提升为原区域的2倍

canvas2.style.height = h * 2 + "px";

二、调整生成图片的分辨率

我们可以通过增加截图区域的像素密度来提高生成图片的清晰度。这个参数叫做“scale”，默认值为1，即为截图区域的实际大小。如果我们将其设置为2，那么截图区域的像素密度就会增加到原来的2倍。

生成图片的分辨率也是影响其清晰度的一个重要因素。我们可以通过设置生成的图片分辨率来提高图片的清晰度。html2canvas提供了一个“dpi”参数，可以用来设置生成图片的分辨率。默认情况下，该参数为96，即每英寸96个像素。我们可以将其设置为更高的值，比如300，来提高生成图片的清晰度。

 html2canvas(document.querySelector("#content"), {

          canvas: canvas2,

          dpi: 500,//dpi值，设置成500

          scale: 2,//设置为2

        }).then(function (canvas) {

          const image = canvas.toDataURL();

        });

使用以上2个方法，基本上可以生成高清的图片