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 摘要。