@sswroom/sswr 1.6.20 → 1.6.22

package/Changelog

@@ -1,3 +1,28 @@
+1.6.22
+-Enhance map.MapControl Marker
+-Added map.MapControl.layerMoveMarker
+-Added map.MapControl.markerUpdateIcon
+-Added map.MapControl.markerShowPopup
+-Added map.MapControl.hidePopup
+-Added map.MapControl.sizeUpdated
+-Added cesium.parseColor
+-Enhance cesium and leaflet map
+
+1.6.21
+-Added data.dataURI2Blob
+-Added EasyPrint.toSVG
+-Added data.blob2DataURL
+-Added data.fetchAsBlob
+-Added text.isDataURL
+-Added text.escapeXhtml
+-Added text.svgStringToDataURI
+-Added web.canvasToBlob
+-Added web.elementToSVGString
+-Added web.genPrintWindowHTML
+-Added web.printImageData
+-Added cesium.CesiumMap.getViewer
+-parser support PNG without EXIF
+
 1.6.20
 -Enhance XLSXExporter
 -Added leaflet/EasyPrint.js

package/cesium.d.ts

@@ -3,6 +3,7 @@ import * as geometry from "./geometry";
 import * as kml from "./kml";
 import * as map from "./map";
 import * as math from "./math";
+import * as web from "./web";
 
 declare class KMLFeatureOptions
 {
@@ -18,10 +19,12 @@ export function fromCartesian3Array(viewer: Viewer, arr: Cartesian3[]): object[]
 export function fromPolygonGraphics(viewer: Viewer, pg: PolygonGraphics): geometry.Polygon;
 export function createFromKML(feature: kml.Feature | kml.KMLFile, options: KMLFeatureOptions): any;
 export function createFromGeometry(geom: geometry.Vector2D, options: map.GeometryOptions)
-
+export function parseColor(c: string): web.Color;
 export class CesiumMap extends map.MapControl
 {
 	constructor(divId: string);
+	getDiv(): HTMLDivElement;
+	sizeUpdated(): void;
 	createLayer(layer: map.LayerInfo, options?: map.LayerOptions): any;
 	createMarkerLayer(name: string, options?: map.LayerOptions): any;
 	createGeometryLayer(name: string, options?: map.LayerOptions): any;
@@ -40,14 +43,19 @@ export class CesiumMap extends map.MapControl
 	map2ScnPos(mapPos: math.Coord2D): math.Coord2D;
 	scn2MapPos(scnPos: math.Coord2D): math.Coord2D;
 
-	createMarker(mapPos: math.Coord2D, imgURL: string, imgWidth: number, imgHeight: number, options?: map.MarkerOptions): any;
-	layerAddMarker(markerLayer: any, marker: any): void;
-	layerRemoveMarker(markerLayer: any, marker: any): void;
+	createMarker(mapPos: math.Coord2D, imgURL: string, imgWidth: number, imgHeight: number, options?: map.MarkerOptions): map.MarkerInfo;
+	layerAddMarker(markerLayer: any, marker: map.MarkerInfo): void;
+	layerRemoveMarker(markerLayer: any, marker: map.MarkerInfo): void;
 	layerClearMarkers(markerLayer: any): void;
-	markerIsOver(marker: any, scnPos: math.Coord2D): boolean;
+	layerMoveMarker(markerLayer: any, marker: MarkerInfo, mapPos: math.Coord2D): MarkerInfo;
+	markerUpdateIcon(markerLayer: any, marker: MarkerInfo, url: string): MarkerInfo;
+	markerIsOver(marker: map.MarkerInfo, scnPos: math.Coord2D): boolean;
+	markerShowPopup(marker: MarkerInfo, content: string, w?: number, h?: number): void;
+	hidePopup();
 
 	createGeometry(geom: geometry.Vector2D, options: map.GeometryOptions): any;
 	layerAddGeometry(geometryLayer: any, geom: any): void;
 	layerRemoveGeometry(geometryLayer: any, geom: any): void;
 	layerClearGeometries(geometryLayer: any): void;
+	getViewer(): Viewer;
 }

package/cesium.js

@@ -4,7 +4,14 @@ import * as kml from "./kml.js";
 import * as map from "./map.js";
 import * as math from "./math.js";
 import * as text from "./text.js";
+import * as web from "./web.js";
 
+/**
+ * @param {{ scene: { globe: { ellipsoid: any; }; }; camera: { pickEllipsoid: (arg0: any, arg1: any) => any; }; }} viewer
+ * @param {number} x
+ * @param {number} y
+ * @param {{ cartesianToCartographic: (arg0: any) => any; } | null} ellipsoid
+ */
 export function screenToLatLon(viewer, x, y, ellipsoid)
 {
 	let pos = new Cesium.Cartesian2(x, y);
@@ -258,6 +265,10 @@ export function createFromKML(feature, options)
 	}
 }
 
+/**
+ * @param {geometry.Vector2D} geom
+ * @param {map.GeometryOptions} options
+ */
 export function createFromGeometry(geom, options)
 {
 	if (geom instanceof geometry.Point)
@@ -278,12 +289,40 @@ export function createFromGeometry(geom, options)
 			position: Cesium.Cartesian3.fromDegrees(geom.coordinates[0], geom.coordinates[1]),
 			billboard: new Cesium.BillboardGraphics(opt)});
 	}
+	else if (geom instanceof geometry.LinearRing)
+	{
+		let opt = {};
+		opt.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
+		opt.height = 0;
+		if (options.lineColor)
+		{
+			let c = parseColor(options.lineColor);
+			opt.outlineColor = new Cesium.Color(c.r, c.g, c.b, c.a);
+			opt.outline = true;
+		}
+		if (options.lineWidth)
+		{
+			opt.outlineWidth = options.lineWidth;
+			opt.outline = true;
+		}
+		if (options.fillColor)
+		{
+			let c = parseColor(options.fillColor);
+			if (options.fillOpacity)
+			{
+				c.a = options.fillOpacity;
+			}
+			opt.material = new Cesium.Color(c.r, c.g, c.b, c.a);
+		}
+		opt.hierarchy = {positions: toCartesian3Arr(geom.coordinates), holes: []};
+		return new Cesium.Entity({polygon: new Cesium.PolygonGraphics(opt)});
+	}
 	else if (geom instanceof geometry.LineString)
 	{
 		let opt = {};
 		if (options.lineColor)
 		{
-			let c = kml.toColor(options.lineColor);
+			let c = parseColor(options.lineColor);
 			opt.material = new Cesium.Color(c.r, c.g, c.b, c.a);
 		}
 		if (options.lineWidth)
@@ -298,7 +337,7 @@ export function createFromGeometry(geom, options)
 		opt.height = 0;
 		if (options.lineColor)
 		{
-			let c = kml.toColor(options.lineColor);
+			let c = parseColor(options.lineColor);
 			opt.outlineColor = new Cesium.Color(c.r, c.g, c.b, c.a);
 			opt.outline = true;
 		}
@@ -309,7 +348,11 @@ export function createFromGeometry(geom, options)
 		}
 		if (options.fillColor)
 		{
-			let c = kml.toColor(options.fillColor);
+			let c = parseColor(options.fillColor);
+			if (options.fillOpacity)
+			{
+				c.a = options.fillOpacity;
+			}
 			opt.material = new Cesium.Color(c.r, c.g, c.b, c.a);
 		}
 		opt.hierarchy = {positions: toCartesian3Arr(geom.geometries[0].coordinates), holes: []};
@@ -331,7 +374,7 @@ export function createFromGeometry(geom, options)
 		let opt = {};
 		if (options.lineColor)
 		{
-			let c = kml.toColor(options.lineColor);
+			let c = parseColor(options.lineColor);
 			opt.outlineColor = new Cesium.Color(c.r, c.g, c.b, c.a);
 			opt.outline = true;
 		}
@@ -342,7 +385,11 @@ export function createFromGeometry(geom, options)
 		}
 		if (options.fillColor)
 		{
-			let c = kml.toColor(options.fillColor);
+			let c = parseColor(options.fillColor);
+			if (options.fillOpacity)
+			{
+				c.a = options.fillOpacity;
+			}
 			opt.material = new Cesium.Color(c.r, c.g, c.b, c.a);
 		}
 		console.log("MultiPolygon not supported", geom);
@@ -355,6 +402,19 @@ export function createFromGeometry(geom, options)
 	}
 }
 
+/**
+ * @param {string} c
+ */
+export function parseColor(c)
+{
+	let col = kml.toColor(c);
+	if (col == null)
+	{
+		col = web.parseCSSColor(c);
+	}
+	return col;
+}
+
 /*export function createPolygon(viewer, lats, lons, height)
 {
 	if (lats.length != lons.length)
@@ -386,6 +446,7 @@ export class CesiumMap extends map.MapControl
 	constructor(divId)
 	{
 		super();
+		this.mouseMove = null;
 		this.viewer = new Cesium.Viewer(divId, {
 			timeline:false,
 			animation:false,
@@ -395,8 +456,29 @@ export class CesiumMap extends map.MapControl
 //				url: "https://tile.openstreetmap.org/"
 //			  }))}
 		});
+		this.viewer.screenSpaceEventHandler.setInputAction((movement) => {
+			let pos = movement.startPosition;
+			let container = this.viewer.container;
+			if (pos.x >= 0 && pos.y >= 0 && pos.x < container.offsetWidth && pos.y < container.offsetHeight)
+			{
+				if (this.mouseMove)
+				{
+					this.mouseMove(this.scn2MapPos(new math.Coord2D(pos.x, pos.y)));
+				}
+			}
+		}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 	};
 
+	getDiv()
+	{
+		return this.viewer.container;
+	}
+
+	sizeUpdated()
+	{
+
+	}
+
 	createLayer(layer, options)
 	{
 		if (layer.type == map.WebMapType.OSMTile)
@@ -411,8 +493,16 @@ export class CesiumMap extends map.MapControl
 		}
 	}
 
-	/*createMarkerLayer(name: string, options?: LayerOptions): any;
-	createGeometryLayer(name: string, options?: LayerOptions): any;*/
+	createMarkerLayer(name, options)
+	{
+		return [];
+	}
+
+	createGeometryLayer(name, options)
+	{
+		return [];
+	}
+
 	addLayer(layer)
 	{
 		if (layer instanceof Cesium.ImageryLayer)
@@ -481,20 +571,134 @@ export class CesiumMap extends map.MapControl
 		this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(center.x, center.y, xScale), duration:0});
 	}
 
-/*	handleMouseLClick(clickFunc: (mapPos: math.Coord2D, scnPos: math.Coord2D)=>void): void;
-	handleMouseMove(moveFunc: (mapPos: math.Coord2D)=>void): void;
-	handlePosChange(posFunc: (mapPos: math.Coord2D)=>void): void;
-	map2ScnPos(mapPos: math.Coord2D): math.Coord2D;
-	scn2MapPos(scnPos: math.Coord2D): math.Coord2D;
+/*	handleMouseLClick(clickFunc: (mapPos: math.Coord2D, scnPos: math.Coord2D)=>void): void;*/
+	/**
+	 * @param {(mapPos: math.Coord2D)=>void} moveFunc
+	 */
+	handleMouseMove(moveFunc)
+	{
+		this.mouseMove = moveFunc;
+	}
+/*	handlePosChange(posFunc: (mapPos: math.Coord2D)=>void): void;*/
+	/**
+	 * @param {math.Coord2D} mapPos
+	 */
+	map2ScnPos(mapPos)
+	{
+		let pos = Cesium.SceneTransforms.worldToDrawingBufferCoordinates(this.viewer.scene, Cesium.Cartesian3.fromDegrees(mapPos.x, mapPos.y));
+		if (pos)
+		{
+			return new math.Coord2D(pos.x, pos.y);
+		}
+		else
+		{
+			return new math.Coord2D(0, 0);
+		}
+	}
+
+	/**
+	 * @param {math.Coord2D} scnPos
+	 */
+	scn2MapPos(scnPos)
+	{
+		return screenToLatLon(this.viewer, scnPos.x, scnPos.y, null);
+	}
+
+	createMarker(mapPos, imgURL, imgWidth, imgHeight, options)
+	{
+		return new Cesium.Entity({position: Cesium.Cartesian3.fromDegrees(mapPos.x, mapPos.y), billboard: {image: imgURL, width: imgWidth, height: imgHeight}});
+	}
+
+	layerAddMarker(markerLayer, marker)
+	{
+		markerLayer.push(marker);
+		this.viewer.entities.add(marker);
+	}
+
+	layerRemoveMarker(markerLayer, marker)
+	{
+		markerLayer.remove(marker);
+		this.viewer.entities.remove(marker);
+	}
 
-	createMarker(mapPos: math.Coord2D, imgURL: string, imgWidth: number, imgHeight: number, options?: MarkerOptions): any;
-	layerAddMarker(markerLayer: any, marker: any): void;
-	layerRemoveMarker(markerLayer: any, marker: any): void;
-	layerClearMarkers(markerLayer: any): void;
-	markerIsOver(marker: any, scnPos: math.Coord2D): boolean;
+	layerClearMarkers(markerLayer)
+	{
+		let geom;
+		while (geom = markerLayer.pop())
+		{
+			this.viewer.entities.remove(geom);
+		}
+	}
+
+	layerMoveMarker(markerLayer, marker, mapPos)
+	{
+		marker.position = Cesium.Cartesian3.fromDegrees(mapPos.x, mapPos.y);
+		return marker;
+	}
 
-	createGeometry(geom: geometry.Vector2D, options: GeometryOptions): any;
-	layerAddGeometry(geometryLayer: any, geom: any): void;
-	layerRemoveGeometry(geometryLayer: any, geom: any): void;
-	layerClearGeometries(geometryLayer: any): void;*/
+	markerUpdateIcon(markerLayer, marker, url)
+	{
+		marker.billboard.image = url;
+		return marker;
+	}
+	
+	markerIsOver(marker, scnPos)
+	{
+		let latlng = marker.position.getValue();
+		let sz = [marker.billboard.width, marker.billboard.height];
+		let iconPos = Cesium.SceneTransforms.worldToDrawingBufferCoordinates(this.viewer.scene, latlng);
+		if (sz == null)
+			return false;
+		if ((scnPos.x < iconPos.x - sz[0] * 0.5) || (scnPos.y < iconPos.y - sz[1] * 0.5))
+			return false;
+		if ((iconPos.x + sz[0] * 0.5 <= scnPos.x) || (iconPos.y + sz[1] * 0.5 <= scnPos.y))
+			return false;
+		return true;
+	}
+
+	markerShowPopup(marker, content, w, h)
+	{
+		marker.description = {getValue: ()=>{return content;}};
+		this.viewer.selectedEntity = marker;
+	}
+
+	hidePopup()
+	{
+		this.viewer.selectedEntity = null;
+	}
+
+	/**
+	 * @param {geometry.Vector2D} geom
+	 * @param {map.GeometryOptions} options
+	 */
+	createGeometry(geom, options)
+	{
+		return createFromGeometry(geom, options);
+	}
+
+	layerAddGeometry(geometryLayer, geom)
+	{
+		geometryLayer.push(geom);
+		this.viewer.entities.add(geom);
+	}
+
+	layerRemoveGeometry(geometryLayer, geom)
+	{
+		geometryLayer.remove(geom);
+		this.viewer.entities.remove(geom);
+	}
+
+	layerClearGeometries(geometryLayer)
+	{
+		let geom;
+		while (geom = geometryLayer.pop())
+		{
+			this.viewer.entities.remove(geom);
+		}
+	}
+
+	getViewer()
+	{
+		return this.viewer;
+	}
 }

package/data.d.ts

@@ -39,6 +39,9 @@ export function shl32(v: number, n: number): number;
 export function sar32(v: number, n: number): number;
 export function shr32(v: number, n: number): number;
 export function objectParseTS(o: object, items: string[]): void;
+export function dataURI2Blob(dataURI: string): Blob;
+export function blob2DataURL(blob: Blob): Promise<string|null>;
+export function fetchAsBlob(url: string, options?: {cacheBust: boolean; imagePlaceholder?: string}): Promise<Blob|null>;
 
 export class DateValue
 {

package/data.js

@@ -1,3 +1,4 @@
+import * as data from "./data.js";
 import * as text from "./text.js";
 
 export const Weekday = {
@@ -455,6 +456,98 @@ export function objectParseTS(o, items)
 	}
 }
 
+/**
+ * @param {string} dataURI
+ */
+export function dataURI2Blob(dataURI)
+{
+	let i = dataURI.indexOf(",");
+	let dsp = [dataURI.substring(0, i), dataURI.substring(i + 1)];
+	let types = dsp[0].split(':')[1].split(';');
+	let mimeString = types[0];
+	let ab;
+	if (types[1] == "base64")
+	{
+		let byteString = atob(dsp[1]);
+		ab = new ArrayBuffer(byteString.length);
+		let dw = new DataView(ab);
+		for(let i = 0; i < byteString.length; i++) {
+				dw.setUint8(i, byteString.charCodeAt(i));
+		}
+	}
+	else
+	{
+		let enc = new TextEncoder();
+		ab = enc.encode(dsp[1]);
+	}
+	return new Blob([ab], {type: mimeString});
+}
+
+/**
+ * @param {Blob} blob
+ */
+export function blob2DataURL(blob)
+{
+	return new Promise((resolve, reject) => {
+		let encoder = new FileReader();
+		encoder.onloadend = function () {
+			let content = encoder.result;
+			if (typeof content == 'string')
+				resolve(content);
+			else
+			{
+				console.error("Error in converting to dataURL", content);
+				resolve(null);
+			}
+		};
+		encoder.readAsDataURL(blob);
+	});
+}
+
+/**
+ * @param {string} url
+ * @param {{ cacheBust: boolean; imagePlaceholder: string; }} options
+ */
+export async function fetchAsBlob(url, options)
+{
+	let TIMEOUT = 30000;
+	if(options && options.cacheBust) {
+		// Cache bypass so we dont have CORS issues with cached images
+		// Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+		url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
+	}
+	let placeholder;
+	if(options && options.imagePlaceholder) {
+		if (text.isDataURL(options.imagePlaceholder))
+		{
+			placeholder = data.dataURI2Blob(options.imagePlaceholder);
+		}
+	}
+	try
+	{
+		let req = await fetch(url, {signal: AbortSignal.timeout(TIMEOUT)});
+		if (!req.ok)
+		{
+			if(placeholder) {
+				return placeholder;
+			} else {
+				console.error('Cannot fetch resource: ' + url + ', status: ' + req.status);
+				return null;
+			}
+		}
+		return await req.blob();
+	}
+	catch (error)
+	{
+		if(placeholder) {
+			return placeholder;
+		} else {
+			console.error('Timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url, error);
+			return null;
+		}
+	}
+}
+
 export class DateValue
 {
 	constructor()
@@ -2212,7 +2305,7 @@ export class TimeInstant
 		if (typeof ticks == "number")
 		{
 			secs = Math.floor(ticks / 1000);
-			ms = (ticks - secs) * 1000;
+			ms = ticks - (secs * 1000);
 			secs = BigInt(secs);
 		}
 		else

package/domtoimage/images.js

@@ -1,3 +1,5 @@
+import * as data from "../data.js";
+import * as text from "../text.js";
 import * as util from "./util.js";
 import * as inliner from "./inliner.js";
 
@@ -7,9 +9,9 @@ import * as inliner from "./inliner.js";
  * @returns {Promise<HTMLImageElement>}
  */
 async function inline(element, options) {
-	if (util.isDataUrl(element.src)) return element;
-	let data = await util.getAndEncode(element.src, options);
-	let dataUrl = util.dataAsUrl(data, util.mimeType(element.src));
+	if (text.isDataURL(element.src)) return element;
+	let blob = await data.fetchAsBlob(element.src, options);
+	let dataUrl = await data.blob2DataURL(blob);
 	return await new Promise(function (resolve, reject) {
 		element.onload = () => {resolve(element);};
 		element.onerror = reject;

package/domtoimage/index.js

@@ -1,3 +1,5 @@
+import * as text from "../text.js";
+import * as web from "../web.js";
 import * as util from "./util.js";
 import * as images from "./images.js";
 import * as fontFaces from "./fontFaces.js";
@@ -74,7 +76,7 @@ export async function toPng(node, options) {
  * */
 export async function toJpeg(node, options) {
 	options = options || {};
-	let canvas = await draw(node, options);
+	let canvas = await draw(node, options || {});
 	return canvas.toDataURL('image/jpeg', options.quality || 1.0);
 }
 
@@ -84,7 +86,7 @@ export async function toJpeg(node, options) {
  * */
 export async function toBlob(node, options) {
 	let canvas = await draw(node, options || {});
-	return await util.canvasToBlob(canvas);
+	return await web.canvasToBlob(canvas);
 }
 
 /**
@@ -109,21 +111,27 @@ function copyOptions(options) {
 
 /**
  * @param {HTMLElement} domNode
- * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}} options
  */
 async function draw(domNode, options) {
 	let svgUrl = await toSvg(domNode, options);
 	let image = await util.makeImage(svgUrl);
-	await util.delay(100)();
 	let canvas = newCanvas(domNode, options);
 	let ctx = canvas.getContext('2d');
-	if (ctx) ctx.drawImage(image, 0, 0);
-	return canvas;
+	return await new Promise((resolve, reject) => {
+		setTimeout(() => {
+			if (ctx)
+			{
+				ctx.drawImage(image, 0, 0);	
+			}
+			resolve(canvas);
+		}, 1);
+	});
 }
 
 /**
  * @param {HTMLElement} domNode
- * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}} options
  */
 function newCanvas(domNode, options) {
 	let canvas = document.createElement('canvas');
@@ -131,9 +139,10 @@ function newCanvas(domNode, options) {
 	canvas.height = options.height || domNode.offsetHeight;
 
 	if (options.bgcolor) {
-		var ctx = canvas.getContext('2d');
+		let ctx = canvas.getContext('2d');
 		if (ctx != null)
 		{
+			ctx.globalAlpha = 1;
 			ctx.fillStyle = options.bgcolor;
 			ctx.fillRect(0, 0, canvas.width, canvas.height);
 		}
@@ -320,9 +329,5 @@ async function inlineImages(node, implOptions) {
  * @param {string | number} height
  */
 function makeSvgDataUri(node, width, height) {
-	node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
-	let xhtml = util.escapeXhtml(new XMLSerializer().serializeToString(node));
-	let foreignObject = '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
-	let svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' + foreignObject + '</svg>';
-	return 'data:image/svg+xml;charset=utf-8,' + svg;
+	return text.svgStringToDataURI(web.elementToSVGString(node, width, height));
 }

package/domtoimage/inliner.js

@@ -1,3 +1,5 @@
+import * as data from "../data.js";
+import * as text from "../text.js";
 import * as util from "./util.js";
 
 let URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
@@ -19,7 +21,7 @@ function readUrls(string) {
 		result.push(match[1]);
 	}
 	return result.filter(function (url) {
-		return !util.isDataUrl(url);
+		return !text.isDataURL(url);
 	});
 }
 
@@ -34,24 +36,24 @@ function urlAsRegex(url) {
  * @param {string} string
  * @param {string} url
  * @param {string | null | undefined} baseUrl
- * @param {((url: string)=>string)|undefined} get
+ * @param {((url: string)=>Blob)|undefined} get
  * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} options
  */
 async function inline(string, url, baseUrl, get, options) {
 	url = baseUrl ? util.resolveUrl(url, baseUrl) : url;
-	let data;
+	let blob;
 	if (get)
-		data = get(url);
+		blob = get(url);
 	else
-		data = await util.getAndEncode(url, options);
-	let dataUrl = util.dataAsUrl(data, util.mimeType(url));
+		blob = await data.fetchAsBlob(url, options);
+	let dataUrl = await data.blob2DataURL(blob);
 	return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
 }
 
 /**
  * @param {string} string
  * @param {string | null | undefined} baseUrl
- * @param {((url: string)=>string)|undefined} get
+ * @param {((url: string)=>Blob)|undefined} get
  * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} options
  */
 export async function inlineAll(string, baseUrl, get, options) {