ArthurHub / ArthurHub/HTML-Renderer

Callback provided images not respecting CSS imposed size

未关闭
#155 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
C#
星标
1.4k
派生
550
平均合并
14 天 9 小时
30 天内合并 PR
1

描述

This is an odd case. To support SVG I am using the imageLoad event.

Basically it queries the URL supplied, constructs an instance of SvgDocument and gets height and width from attributes or the style property. Then it works out the pixel dimensions according to e.Graphics.DpiX, constructs an instance of Bitmap of this size and renders into it.

This all works, and the size is what I expect -- a QR code styled to be 20mm tall should be 472x472 pixels on a 600dpi printer, and that's exactly the size of the bitmap produced.

However, this is then drawn on the page at a size that would be correct were it a 96dpi image. This causes it to be way too big. By default bitmaps are created with this resolution so I tried setting the resolution of the bitmap to 600, but it didn't help.

Is this a bug or is there some way to make it respect the image DPI when doing layout and rendering?

imageLoad: (sender, args) =>
{
try
{
var src = args.Src;
if (src.IndexOf(':') == -1)
{
var sep = src.StartsWith("/") ? string.Empty : "/";
src = $"{baseUrl}{sep}{src}";
}
var path = Path.GetExtension(args.Src);
if (path != null && path.Equals(".svg", StringComparison.OrdinalIgnoreCase))
{
var xmlDoc = new XmlDocument();
xmlDoc.Load(src);
SvgDocument svgDoc = SvgDocument.Open(xmlDoc);
svgDoc.Ppi = (int)e.Graphics.DpiX;
if (args.Attributes.Any(attr => attr.Key.ToLower() == "style"))
{
var style = args.Attributes.Single(kvp => kvp.Key.ToLower() == "style").Value
.Split(new char[] { ':', ';' })
.Select(x => x.Trim().ToLower()).ToArray();
var i = Array.IndexOf(style, "height");
if (i > -1) { svgDoc.Height = style[i + 1].ToSvgUnit(); }
i = Array.IndexOf(style, "width");
if (i > -1) { svgDoc.Width = style[i + 1].ToSvgUnit(); }
}
int h = (int)svgDoc.Height.ToDeviceValue(null, UnitRenderingType.Other, svgDoc);
int w = (int)svgDoc.Width.ToDeviceValue(null, UnitRenderingType.Other, svgDoc);
Bitmap svgImg = new Bitmap(w, h, PixelFormat.Format32bppArgb);
svgImg.SetResolution(e.Graphics.DpiX, e.Graphics.DpiY);
svgDoc.Draw(svgImg);
args.Callback(svgImg);
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
throw;
}
}

贡献指南

这个仓库没有索引到贡献指南

调研方向

首先,使用所示的 imageLoad 回调、设置为 20mm 的 SVG 以及 600dpi 的图形上下文重现 issue #155。跟踪图像布局和渲染路径,将 472×472 位图与其显示尺寸进行比较。完成的标准是 CSS 尺寸设置和位图 DPI 产生预期的实际尺寸,而不会放大图像。

由索引模型根据 Issue 内容生成。

评估

技术栈
csharp
领域
frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。