ArthurHub / ArthurHub/HTML-Renderer
Callback provided images not respecting CSS imposed size
- 主要語言
- 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