windows/QuickLook
1
0
Fork 0
mirror of https://github.com/QL-Win/QuickLook.git synced 2025-09-13 19:19:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add SVG support using WebView2 in ImageViewer

Browse Source 
It's still an experimental function
This commit is contained in:
ema
2025-06-30 05:45:21 +08:00
parent 21071a62d1
commit 98dd96283d
4 changed files with 308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
QuickLook.Plugin/QuickLook.Plugin.ImageViewer/QuickLook.Plugin.ImageViewer.csproj
View File

@@ -64,6 +64,9 @@
<PackageReference Include="Magick.NET-Q8-AnyCPU" Version="14.6.0"> <PackageReference Include="Magick.NET-Q8-AnyCPU" Version="14.6.0">
<PrivateAssets>all</PrivateAssets> <PrivateAssets>all</PrivateAssets>
</PackageReference> </PackageReference>
<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.3296.44">
<PrivateAssets>all</PrivateAssets>
</PackageReference>
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
@@ -78,6 +81,12 @@
<Resource Include="Resources\background.png" /> <Resource Include="Resources\background.png" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<EmbeddedResource Include="Resources\svg2html.*">
<LogicalName>QuickLook.Plugin.ImageViewer.Resources.%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
</EmbeddedResource>
</ItemGroup>
<ItemGroup> <ItemGroup>
<Content Include="exiv2-ql-32.dll"> <Content Include="exiv2-ql-32.dll">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
@@ -103,6 +112,11 @@
<Name>QuickLook.Common</Name> <Name>QuickLook.Common</Name>
<Private>False</Private> <Private>False</Private>
</ProjectReference> </ProjectReference>
<ProjectReference Include="..\QuickLook.Plugin.HtmlViewer\QuickLook.Plugin.HtmlViewer.csproj">
<Project>{CE22A1F3-7F2C-4EC8-BFDE-B58D0EB625FC}</Project>
<Name>QuickLook.Plugin.HtmlViewer</Name>
<Private>False</Private>
</ProjectReference>
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>

36
QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>SVG Preview</title>
<style>
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
#svgContainer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#svgWrapper {
transform-origin: center center;
transition: transform 0.05s ease-out;
cursor: grab;
}
</style>
</head>
<body>
<div id="svgContainer">
<div id="svgWrapper"></div>
</div>
<script src="svg2html.js"></script>
</body>
</html>

64
QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js Normal file
View File

@@ -0,0 +1,64 @@
(async function () {
const wrapper = document.getElementById("svgWrapper");
const svgString = await chrome.webview.hostObjects.external.GetSvgContent();
wrapper.innerHTML = svgString;
let scale = 1;
let translate = { x: 0, y: 0 };
let isDragging = false;
let lastMouse = { x: 0, y: 0 };
function updateTransform() {
wrapper.style.transform = `translate(${translate.x}px, ${translate.y}px) scale(${scale})`;
}
document.addEventListener("wheel", (e) => {
e.preventDefault();
const scaleFactor = 1.1;
const oldScale = scale;
if (e.deltaY < 0) {
scale *= scaleFactor;
} else {
scale /= scaleFactor;
}
const rect = wrapper.getBoundingClientRect();
const dx = e.clientX - rect.left - rect.width / 2;
const dy = e.clientY - rect.top - rect.height / 2;
translate.x -= dx * (1 - scale / oldScale);
translate.y -= dy * (1 - scale / oldScale);
updateTransform();
}, { passive: false });
wrapper.addEventListener("mousedown", (e) => {
isDragging = true;
lastMouse = { x: e.clientX, y: e.clientY };
wrapper.style.cursor = "grabbing";
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const dx = e.clientX - lastMouse.x;
const dy = e.clientY - lastMouse.y;
translate.x += dx;
translate.y += dy;
lastMouse = { x: e.clientX, y: e.clientY };
updateTransform();
});
document.addEventListener("mouseup", () => {
isDragging = false;
wrapper.style.cursor = "grab";
});
updateTransform();
})();

194
QuickLook.Plugin/QuickLook.Plugin.ImageViewer/WebImagePanel.cs Normal file
View File

@@ -0,0 +1,194 @@
// Copyright © 2017-2025 QL-Win Contributors
//
// This file is part of QuickLook program.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
using Microsoft.Web.WebView2.Core;
using QuickLook.Plugin.HtmlViewer;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;
namespace QuickLook.Plugin.ImageViewer;
public class WebImagePanel : WebpagePanel
{
protected const string _resourcePrefix = "QuickLook.Plugin.ImageViewer.Resources.";
protected internal static readonly Dictionary<string, byte[]> _resources = [];
protected byte[] _homePage;
private object _objectForScripting;
public object ObjectForScripting
{
get => _objectForScripting;
set
{
_objectForScripting = value;
Dispatcher.Invoke(async () =>
{
await _webView.EnsureCoreWebView2Async();
_webView.CoreWebView2.AddHostObjectToScript("external", value);
});
}
}
static WebImagePanel()
{
InitializeResources();
}
protected static void InitializeResources()
{
if (_resources.Any()) return;
var assembly = Assembly.GetExecutingAssembly();
foreach (var resourceName in assembly.GetManifestResourceNames())
{
if (!resourceName.StartsWith(_resourcePrefix)) continue;
var relativePath = resourceName.Substring(_resourcePrefix.Length);
if (relativePath.Equals("resources", StringComparison.OrdinalIgnoreCase)) continue;
using var stream = assembly.GetManifestResourceStream(resourceName);
if (stream == null) continue;
var memoryStream = new MemoryStream();
stream.CopyTo(memoryStream);
_resources.Add($"/{relativePath.Replace('\\', '/')}", memoryStream.ToArray());
}
}
public void PreviewSvg(string path)
{
FallbackPath = Path.GetDirectoryName(path);
ObjectForScripting ??= new ScriptHandler(path);
_homePage = _resources["/svg2html.html"];
NavigateToUri(new Uri("file://quicklook/"));
}
protected override void WebView_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
{
if (e.IsSuccess)
{
_webView.CoreWebView2.AddWebResourceRequestedFilter("*", CoreWebView2WebResourceContext.All);
_webView.CoreWebView2.WebResourceRequested += (sender, args) =>
{
Debug.WriteLine($"[{args.Request.Method}] {args.Request.Uri}");
try
{
var requestedUri = new Uri(args.Request.Uri);
if (requestedUri.Scheme == "file")
{
if (requestedUri.AbsolutePath == "/")
{
var response = _webView.CoreWebView2.Environment.CreateWebResourceResponse(
new MemoryStream(_homePage), 200, "OK", MimeTypes.GetContentType(".html"));
args.Response = response;
}
else if (ContainsKey(requestedUri.AbsolutePath))
{
var stream = ReadStream(requestedUri.AbsolutePath);
var response = _webView.CoreWebView2.Environment.CreateWebResourceResponse(
stream, 200, "OK", MimeTypes.GetContentType(Path.GetExtension(requestedUri.AbsolutePath)));
args.Response = response;
}
else
{
var localPath = _fallbackPath + requestedUri.AbsolutePath.Replace('/', '\\');
if (File.Exists(localPath))
{
var fileStream = File.OpenRead(localPath);
var response = _webView.CoreWebView2.Environment.CreateWebResourceResponse(
fileStream, 200, "OK", MimeTypes.GetContentType());
args.Response = response;
}
}
}
}
catch (Exception e)
{
// We don't need to feel burdened by any exceptions
Debug.WriteLine(e);
}
};
}
}
public static bool ContainsKey(string key)
{
return _resources.ContainsKey(key);
}
public static Stream ReadStream(string key)
{
byte[] bytes = _resources[key];
return new MemoryStream(bytes);
}
public static string ReadString(string key)
{
using var reader = new StreamReader(ReadStream(key), Encoding.UTF8);
return reader.ReadToEnd();
}
public static class MimeTypes
{
public const string Html = "text/html";
public const string JavaScript = "application/javascript";
public const string Css = "text/css";
public const string Binary = "application/octet-stream";
public static string GetContentType(string extension = null) => $"Content-Type: {GetMimeType(extension)}";
public static string GetMimeType(string extension = null) => extension?.ToLowerInvariant() switch
{
".js" => JavaScript, // Only handle known extensions from resources
".css" => Css,
".html" => Html,
_ => Binary,
};
}
}
[ClassInterface(ClassInterfaceType.AutoDual)]
[ComVisible(true)]
public sealed class ScriptHandler(string path)
{
public string Path { get; } = path;
public async Task<string> GetSvgContent()
{
if (File.Exists(Path))
{
var bytes = File.ReadAllBytes(Path);
return await Task.FromResult(Encoding.UTF8.GetString(bytes));
}
return string.Empty;
}
}