@sswroom/sswr 1.6.20 → 1.6.21

package/Changelog

@@ -1,3 +1,18 @@
+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

@@ -50,4 +50,5 @@ export class CesiumMap extends map.MapControl
 	layerAddGeometry(geometryLayer: any, geom: any): void;
 	layerRemoveGeometry(geometryLayer: any, geom: any): void;
 	layerClearGeometries(geometryLayer: any): void;
+	getViewer(): Viewer;
 }

package/cesium.js

@@ -497,4 +497,8 @@ export class CesiumMap extends map.MapControl
 	layerAddGeometry(geometryLayer: any, geom: any): void;
 	layerRemoveGeometry(geometryLayer: any, geom: any): void;
 	layerClearGeometries(geometryLayer: any): void;*/
+	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()

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) {

package/domtoimage/util.js

@@ -41,44 +41,6 @@ export function mimeType(url) {
 	return mimes()[extension] || '';
 }
 
-/**
- * @param {string} url
- */
-export function isDataUrl(url) {
-	return url.search(/^(data:)/) !== -1;
-}
-
-/**
- * @param {HTMLCanvasElement} canvas
- */
-function toBlob(canvas) {
-	let binaryString = window.atob(canvas.toDataURL().split(',')[1]);
-	let length = binaryString.length;
-	let binaryArray = new Uint8Array(length);
-
-	for (let i = 0; i < length; i++)
-		binaryArray[i] = binaryString.charCodeAt(i);
-
-	return new Blob([binaryArray], {
-			type: 'image/png'
-		});
-}
-
-/**
- * @param {HTMLCanvasElement} canvas
- * @returns {Promise<Blob|null>}
- */
-export async function canvasToBlob(canvas) {
-	if (canvas.toBlob)
-	{
-		return await new Promise(function (resolve) {
-			canvas.toBlob(resolve);
-		});
-	}
-
-	return toBlob(canvas);
-}
-
 /**
  * @param {string} url
  * @param {string} baseUrl
@@ -122,67 +84,6 @@ export function makeImage(uri) {
 	});
 }
 
-/**
- * @param {string} url
- * @param {{ cacheBust: boolean; imagePlaceholder?: string} | undefined} options
- */
-export async function getAndEncode(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) {
-		let split = options.imagePlaceholder.split(/,/);
-		if(split && split[1]) {
-			placeholder = split[1];
-		}
-	}
-	try
-	{
-		let req = await fetch(url, {signal: AbortSignal.timeout(TIMEOUT)});
-		/** @type {string} */
-		if (!req.ok)
-		{
-			if(placeholder) {
-				return placeholder;
-			} else {
-				console.error('cannot fetch resource: ' + url + ', status: ' + req.status);
-				return "";
-			}
-		}
-		let blob = await req.blob();
-		return await new Promise((resolve, reject) => {
-			let encoder = new FileReader();
-			encoder.onloadend = function () {
-				let content = encoder.result;
-				if (typeof content == 'string') resolve(content.split(/,/)[1]);
-				resolve(content);
-			};
-			encoder.readAsDataURL(blob);
-		});
-	}
-	catch (error)
-	{
-		if(placeholder) {
-			return placeholder;
-		} else {
-			console.error('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url, error);
-			return "";
-		}
-	}
-}
-
-/**
- * @param {string} content
- * @param {string} type
- */
-export function dataAsUrl(content, type) {
-	return 'data:' + type + ';base64,' + content;
-}
-
 /**
  * @param {string} string
  */
@@ -213,13 +114,6 @@ export function asArray(arrayLike) {
 	return array;
 }
 
-/**
- * @param {string} string
- */
-export function escapeXhtml(string) {
-	return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
-}
-
 /**
  * @param {Element} node
  */

package/leaflet/EasyPrint.js

@@ -128,6 +128,7 @@ export class EasyPrint
 	printMap(event, filename) {
 		this.resolve = null;
 		this.reject = null;
+		this.format = "PNG";
 		if (filename) {
 			this.options.filename = filename
 		}
@@ -183,6 +184,7 @@ export class EasyPrint
 	toPNG(size) {
 		this.resolve = null;
 		this.reject = null;
+		this.format = "PNG";
 		this._sizeModeObjs();
 		this.originalState = {
 			mapWidth: this.mapContainer.style.width,
@@ -227,6 +229,58 @@ export class EasyPrint
 		});
 	}
 
+	/**
+	 * @param {math.Coord2D} size
+	 * @returns {Promise<Blob>}
+	 */
+	toSVG(size) {
+		this.resolve = null;
+		this.reject = null;
+		this.format = "SVG";
+		this._sizeModeObjs();
+		this.originalState = {
+			mapWidth: this.mapContainer.style.width,
+			widthWasAuto: false,
+			widthWasPercentage: false,
+			mapHeight: this.mapContainer.style.height,
+			zoom: this._map.getZoom(),
+			center: this._map.getCenter()
+		};
+		if (this.originalState.mapWidth === 'auto') {
+			this.originalState.mapWidth = this._map.getSize().x  + 'px'
+			this.originalState.widthWasAuto = true
+		} else if (this.originalState.mapWidth.includes('%')) {
+			this.originalState.percentageWidth = this.originalState.mapWidth
+			this.originalState.widthWasPercentage = true
+			this.originalState.mapWidth = this._map.getSize().x  + 'px'
+		}
+		let plugin = this;
+		return new Promise((resolve, reject) => {
+			plugin.resolve = resolve;
+			plugin.reject = reject;
+			if (!plugin.options.hidden) {
+				plugin._togglePageSizeButtons({type: null});
+			}
+			if (plugin.options.hideControlContainer) {
+				plugin._toggleControls();    
+			}
+			if (plugin.options.hideClasses) {
+				plugin._toggleClasses(plugin.options.hideClasses);
+			}
+			if (plugin.options.hideIds) {
+				plugin._toggleIds(plugin.options.hideIds);
+			}
+			if (size == null) {
+				return plugin._printOpertion('CurrentSize');
+			}
+			plugin.outerContainer = plugin._createOuterContainer(plugin.mapContainer)
+			if (plugin.originalState.widthWasAuto) {
+				plugin.outerContainer.style.width = plugin.originalState.mapWidth
+			}
+			plugin._createImagePlaceholder(size)
+		});
+	}
+	
 	/**
 	 * @param {string} name
 	 * @param {any} value
@@ -304,9 +358,9 @@ export class EasyPrint
 		this.mapContainer.style.width = pageSize.width + 'px';
 		this.mapContainer.style.height = (pageSize.height - pageBorderHeight) + 'px';
 		if (pageSize.width < pageSize.height) {
-			this.orientation = 'portrait';
+			this.orientation = web.PaperOrientation.Portrait;
 		} else {
-			this.orientation = 'landscape';
+			this.orientation = web.PaperOrientation.Landscape;
 		}
 		this.paperSize = pageSize.paperSize;
 		this._map.setView(this.originalState.center);
@@ -362,14 +416,26 @@ export class EasyPrint
 		if (this.originalState.widthWasAuto && sizemode === 'CurrentSize' || this.originalState.widthWasPercentage && sizemode === 'CurrentSize') {
 			widthForExport = this.originalState.mapWidth
 		}
-		let dataUrl = await domtoimage.toPng(plugin.mapContainer, {
+		let dataUrl;
+		if (this.format == "SVG")
+		{
+			dataUrl = await domtoimage.toSvg(plugin.mapContainer, {
+				width: parseInt(widthForExport),
+				height: parseInt(plugin.mapContainer.style.height.replace('px')),
+				imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH6AMECQMVtyBSbwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAALSURBVAjXY2AAAgAABQAB4iYFmwAAAABJRU5ErkJggg=="
+			});
+		}
+		else
+		{
+			dataUrl = await domtoimage.toPng(plugin.mapContainer, {
 				width: parseInt(widthForExport),
 				height: parseInt(plugin.mapContainer.style.height.replace('px')),
 				imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH6AMECQMVtyBSbwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAALSURBVAjXY2AAAgAABQAB4iYFmwAAAABJRU5ErkJggg=="
 			});
+		}
 		try
 		{
-			let blob = plugin._dataURItoBlob(dataUrl);
+			let blob = data.dataURI2Blob(dataUrl);
 			if (plugin.resolve) {
 				plugin.resolve(blob);
 			} else if (plugin.options.exportOnly) {
@@ -431,12 +497,12 @@ export class EasyPrint
 
 	/**
 	 * @param {string} img
-	 * @param {string} orientation
-	 * @param {any} paperSize
+	 * @param {web.PaperOrientation} orientation
+	 * @param {string | null} paperSize
 	 */
 	_sendToBrowserPrint(img, orientation, paperSize) {
 		this._page.resizeTo(600, 800); 
-		let pageContent = this._createNewWindow(img, orientation, this, paperSize)
+		let pageContent = web.genPrintWindowHTML(img, orientation, paperSize, this.options);
 		this._page.document.body.innerHTML = ''
 		this._page.document.write(pageContent);
 		this._page.document.close();  
@@ -523,50 +589,6 @@ export class EasyPrint
 		<div class="`+spinnerClass+`">Loading...</div></body></html>`;
 	}
 
-	/**
-	 * @param {string} img
-	 * @param {string} orientation
-	 * @param {this} plugin
-	 * @param {string|null} paperSize
-	 */
-	_createNewWindow(img, orientation, plugin, paperSize) {
-		let strs =  new Array();
-		strs.push(`<html><head>
-				<style>@media print {
-					img { max-width: 98%!important; max-height: 98%!important; }
-					@page { size: ` + (paperSize?paperSize:'')+' '+ orientation + `;}}
-				</style>
-				<script>function step1(){
-				setTimeout('step2()', 10);}
-				function step2(){window.print();window.close()}
-				</script></head><body onload='step1()' style="margin: 0px;">`);
-		if (plugin.options.pageBorderTopHTML || plugin.options.pageBorderBottomHTML)
-		{
-			strs.push("<table border=\"0\" width=\"100%\" height=\"100%\">");
-			if (plugin.options.pageBorderTopHTML)
-			{
-				strs.push("<tr><td>"+plugin.options.pageBorderTopHTML+"</td></tr>");
-			}
-			strs.push(`<tr><td>`);
-			if (plugin.options.overlayHTML)
-				strs.push(plugin.options.overlayHTML);
-			strs.push(`<img src="` + img + `" style="display:block; margin:auto;"></td></tr>`);
-			if (plugin.options.pageBorderBottomHTML)
-			{
-				strs.push("<tr><td>"+plugin.options.pageBorderBottomHTML+"</td></tr>");
-			}
-			strs.push("</table>");
-		}
-		else
-		{
-			if (plugin.options.overlayHTML)
-				strs.push(plugin.options.overlayHTML);
-			strs.push(`<img src="` + img + `" style="display:block; margin:auto;">`);
-		}
-		strs.push(`</body></html>`);
-		return strs.join("");
-	}
-
 	/**
 	 * @param {HTMLDivElement} mapDiv
 	 */
@@ -656,20 +678,6 @@ export class EasyPrint
 		document.body.appendChild(css);
 	}
 
-	/**
-	 * @param {string} dataURI
-	 */
-	_dataURItoBlob(dataURI) {
-		let byteString = atob(dataURI.split(',')[1]);
-		let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
-		let ab = new ArrayBuffer(byteString.length);
-		let dw = new DataView(ab);
-		for(let i = 0; i < byteString.length; i++) {
-				dw.setUint8(i, byteString.charCodeAt(i));
-		}
-		return new Blob([ab], {type: mimeString});
-	}
-
 	/**
 	 * @param {{ type: any; }} e
 	 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sswroom/sswr",
-  "version": "1.6.20",
+  "version": "1.6.21",
   "description": "Libraries made by sswroom",
   "main": "sswr.js",
   "scripts": {

package/parser.js

@@ -980,6 +980,25 @@ async function parseJpg(reader, sourceName)
 	return null;
 }
 
+/**
+ * @param {data.ByteReader} reader
+ * @param {string} sourceName
+ */
+async function parsePng(reader, sourceName)
+{
+	if (!(reader instanceof data.ByteReader))
+		return null;
+	if (reader.getLength() < 20)
+		return null;
+	if (reader.readUInt32(0, false) != 0x89504e47 || reader.readUInt32(4, false) != 0x0d0a1a0a)
+		return null;
+	let buff = reader.getArrayBuffer();
+	let b = new Blob([buff], {type: "image/png"});
+	let img = await media.loadImageFromBlob(b);
+	let simg = new media.StaticImage(img, sourceName, "image/png");
+	return simg;
+}
+
 /**
  * @param {data.ByteReader} reader
  * @param {string} sourceName
@@ -1300,6 +1319,7 @@ export async function parseFile(file)
 	{
 		let view = new data.ByteReader(await file.arrayBuffer());
 		let obj;
+		if (obj = await parsePng(view, file.name)) return obj;
 		if (obj = await parseJpg(view, file.name)) return obj;
 		if (obj = await parseWebp(view, file.name)) return obj;
 		if (obj = parseX509(view, file.name, t)) return obj;

package/text.d.ts

@@ -56,6 +56,9 @@ export function replaceAll(s: string, replaceFrom: string, replaceTo: string): s
 export function getEncList(): TextBinEnc[];
 export function b64Enc(s: string, cs?: Base64Charset): string;
 export function b64Dec(b64Str: string): string;
+export function isDataURL(url: string): boolean;
+export function escapeXhtml(s: string): string;
+export function svgStringToDataURI(svg: string): string;
 
 export class TextBinEnc
 {

package/text.js

@@ -617,6 +617,30 @@ export function b64Dec(b64Str)
 	return dec.decode(b64.decodeBin(b64Str));
 }
 
+/**
+ * @param {string} url
+ */
+export function isDataURL(url)
+{
+	return url.startsWith("data:");
+}
+
+/**
+ * @param {string} s
+ */
+export function escapeXhtml(s)
+{
+	return s.replace(/#/g, '%23').replace(/\n/g, '%0A');
+}
+
+/**
+ * @param {string} svg
+ */
+export function svgStringToDataURI(svg)
+{
+	return 'data:image/svg+xml;charset=utf-8,' + svg;
+}
+
 export class TextBinEnc
 {
 	constructor(name)

package/web.d.ts

@@ -12,6 +12,14 @@ declare class ImageInfo
 	height: number;
 }
 
+declare class PrintOptions
+{
+	pageBorderTopHTML?: string;
+	pageBorderBottomHTML?: string;
+	overlayHTML?: string;
+	pageTitle?: string;
+}
+
 export enum OSType
 {
 	Unknown,
@@ -88,6 +96,12 @@ export enum BrowserType
 	MiBrowser
 }
 
+export enum PaperOrientation
+{
+	Landscape,
+	Portrait
+}
+
 declare class BrowserInfo
 {
 	os: OSType;
@@ -118,6 +132,10 @@ export function getDivElement(id: string): HTMLDivElement;
 export function getSpanElement(id: string): HTMLSpanElement;
 export function getCanvasElement(id: string): HTMLCanvasElement;
 export function getImgElement(id: string): HTMLImageElement;
+export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob|null>;
+export function elementToSVGString(node: Element, width: string | number, height: string | number): string;
+export function genPrintWindowHTML(imgDataURL: string, orientation: PaperOrientation, paperSize?: string, options: PrintOptions): string;
+export function printImageData(imgDataURL: string, orientation: PaperOrientation, paperSize?: string, options: PrintOptions): void;
 export function getBrowserInfo(): Promise<BrowserInfo>;
 export function parseUserAgent(userAgent: string): BrowserInfo;
 

package/web.js

@@ -76,6 +76,11 @@ export const BrowserType = {
 	MiBrowser: "MiBrowser"
 }
 
+export const PaperOrientation = {
+	Landscape: "landscape",
+	Portrait: "portrait"
+}
+
 export function getRequestURLBase()
 {
 	let url = document.location.href;
@@ -1057,6 +1062,101 @@ export function getImgElement(id)
 	throw new Error("Element with id \""+id+"\" is not an img");
 }
 
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @returns {Promise<Blob|null>}
+ */
+export async function canvasToBlob(canvas)
+{
+	if (canvas.toBlob)
+	{
+		return await new Promise(function (resolve) {
+			canvas.toBlob(resolve);
+		});
+	}
+	return data.dataURI2Blob(canvas.toDataURL());
+}
+
+/**
+ * @param {Element} node
+ * @param {string | number} width
+ * @param {string | number} height
+ */
+export function elementToSVGString(node, width, height)
+{
+	node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+	let xhtml = text.escapeXhtml(new XMLSerializer().serializeToString(node));
+	let foreignObject = '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
+	return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' + foreignObject + '</svg>';
+}
+
+/**
+ * @param {string} imgDataURL
+ * @param {string} orientation
+ * @param {string | null | undefined} paperSize
+ * @param {{ pageBorderTopHTML?: string; pageBorderBottomHTML?: string; overlayHTML?: string; pageTitle?: string; }} options
+ */
+export function genPrintWindowHTML(imgDataURL, orientation, paperSize, options)
+{
+	let strs =  new Array();
+	strs.push("<html><head>");
+	if (options.pageTitle)
+	{
+		strs.push("<title>"+text.toHTMLText(options.pageTitle)+"</title>");
+	}
+	strs.push(`<style>@media print {
+				img { max-width: 98%!important; max-height: 98%!important; }
+				@page { size: ` + (paperSize?paperSize:'')+' '+ orientation + `;}}
+			</style>
+			<script>function step1(){
+			setTimeout('step2()', 10);}
+			function step2(){window.print();window.close()}
+			</script></head><body onload='step1()' style="margin: 0px;">`);
+	if (options.pageBorderTopHTML || options.pageBorderBottomHTML)
+	{
+		strs.push("<table border=\"0\" width=\"100%\" height=\"100%\">");
+		if (options.pageBorderTopHTML)
+		{
+			strs.push("<tr><td>"+options.pageBorderTopHTML+"</td></tr>");
+		}
+		strs.push(`<tr><td>`);
+		if (options.overlayHTML)
+			strs.push(options.overlayHTML);
+		strs.push(`<img src="` + imgDataURL + `" style="display:block; margin:auto;"></td></tr>`);
+		if (options.pageBorderBottomHTML)
+		{
+			strs.push("<tr><td>"+options.pageBorderBottomHTML+"</td></tr>");
+		}
+		strs.push("</table>");
+	}
+	else
+	{
+		if (options.overlayHTML)
+			strs.push(options.overlayHTML);
+		strs.push(`<img src="` + imgDataURL + `" style="display:block; margin:auto;">`);
+	}
+	strs.push(`</body></html>`);
+	return strs.join("");
+}
+
+/**
+ * @param {string} imgDataURL
+ * @param {string} orientation
+ * @param {string | null | undefined} paperSize
+ * @param {{ pageBorderTopHTML?: string; pageBorderBottomHTML?: string; overlayHTML?: string }} options
+ */
+export function printImageData(imgDataURL, orientation, paperSize, options)
+{
+	let page = window.open("", "_blank", 'toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,left=10, top=10, width=600, height=800, visible=none');
+	if (page == null)
+		return false;
+	let pageContent = genPrintWindowHTML(imgDataURL, orientation, paperSize, options);
+	page.document.body.innerHTML = ''
+	page.document.write(pageContent);
+	page.document.close();  
+	return true;
+}
+
 /**
  * @returns {Promise<{os: String,osVer?:string,browser: String,browserVer?: string,devName?:string}>}
  */