Question

我们正在使用Html2Canvas库将div元素捕获到图像中。但捕获的图像质量并不好。请告诉我们如何提高质量（DPI高达300）

我们在下面添加了javascript代码

$(‘#divId’).html2canvas({
            onrendered: function (canvas) {
                var imageData = { "imageData": canvas.toDataURL("image/png", 1.0) };
                $('#ImageData').val(imageData);
                var sourceUrl = configuration.baseURL + "/ScreenShot";
                $.ajax({
                    type: "POST",
                    url: sourceUrl,
                    data: imageData,
                    success: function () {

                    },
                    error: function (a, errorStatus, errorThrown) {
                        alert(a, errorStatus, errorThrown);
                    }
                });
            }
        });

C＃code ::

public void ScreenShot(string imageData)
        {
            string trimmedData = imageData.Replace("data:image/png;base64,", string.Empty);
            byte[] uploadedImage = Convert.FromBase64String(trimmedData);
            byte[] tiffBytes;

            using (MemoryStream inStream = new MemoryStream(uploadedImage))
            using (MemoryStream outStream = new MemoryStream())
            {
                Bitmap.FromStream(inStream).Save(outStream, ImageFormat.Tiff);
                tiffBytes = outStream.ToArray();
            }

            string fileName = Guid.NewGuid() + ".tiff";
            string path = Server.MapPath(fileName);
            System.IO.File.WriteAllBytes(path, tiffBytes);
        }

Answer 1

通常屏幕分辨率接近100dpi，通常略低，因此您无法捕获更高的分辨率，因为它不可用。捕获是逐像素捕获屏幕中的内容。

我不知道你是否可以这样做，但获得更高分辨率的唯一方法是通过放大浏览器来欺骗，并捕获放大的div内容。如果你需要300 dpi，你必须至少放大x3。

唯一的另一种解决方案是获取原始捕获，并使用一些可以使用插值来提高分辨率的库，但是你不会获得高质量。

使用Html2Canvas库增加图像DPI

1 个答案: