Chart/api/export.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. import {namespaces as d3Namespaces} from "d3-selection";
  6. import {document, window} from "../../module/browser";
  7. import {
  8. 	getBBox,
  9. 	getBoundingRect,
  10. 	getCssRules,
  11. 	isFunction,
  12. 	mergeObj,
  13. 	toArray
  14. } from "../../module/util";
  16. type TExportOption = TSize & {
  17. 	preserveAspectRatio: boolean,
  18. 	preserveFontStyle: boolean,
  19. 	mimeType: string
  20. };
  22. type TSize = {x?: number, y?: number, width: number, height: number};
  24. type TTextGlyph = {
  25. 	[key: string]: TSize & {
  26. 		fill: string,
  27. 		fontFamily: string,
  28. 		fontSize: string,
  29. 		textAnchor: string,
  30. 		transform: string
  31. 	}
  32. };
  34. /**
  35.  * Encode to base64
  36.  * @param {string} str string to be encoded
  37.  * @returns {string}
  38.  * @private
  39.  * @see https://developer.mozilla.org/ko/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
  40.  */
  41. const b64EncodeUnicode = (str: string): string =>
  42. 	window.btoa?.(
  43. 		encodeURIComponent(str)
  44. 			.replace(/%([0-9A-F]{2})/g,
  45. 				(match, p: number | string): string => String.fromCharCode(Number(`0x${p}`)))
  46. 	);
  48. /**
  49.  * Convert svg node to data url
  50.  * @param {HTMLElement} node target node
  51.  * @param {object} option object containing {width, height, preserveAspectRatio}
  52.  * @param {object} orgSize object containing {width, height}
  53.  * @returns {string}
  54.  * @private
  55.  */
  56. function nodeToSvgDataUrl(node, option: TExportOption, orgSize: TSize) {
  57. 	const {width, height} = option || orgSize;
  58. 	const serializer = new XMLSerializer();
  59. 	const clone = node.cloneNode(true);
  60. 	const cssText = getCssRules(toArray(document.styleSheets))
  61. 		.filter((r: CSSStyleRule) => r.cssText)
  62. 		.map((r: CSSStyleRule) => r.cssText);
  64. 	clone.setAttribute("xmlns", d3Namespaces.xhtml);
  66. 	// remove padding & margin
  67. 	clone.style.margin = "0";
  68. 	clone.style.padding = "0";
  70. 	// remove text nodes
  71. 	if (option.preserveFontStyle) {
  72. 		clone.querySelectorAll("text").forEach(t => {
  73. 			t.innerHTML = "";
  74. 		});
  75. 	}
  77. 	const nodeXml = serializer.serializeToString(clone);
  79. 	// escape css for XML
  80. 	const style = document.createElement("style");
  82. 	style.appendChild(document.createTextNode(cssText.join("\n")));
  84. 	const styleXml = serializer.serializeToString(style);
  86. 	// foreignObject not supported in IE11 and below
  87. 	// https://msdn.microsoft.com/en-us/library/hh834675(v=vs.85).aspx
  88. 	const dataStr = `<svg xmlns="${d3Namespaces.svg}" width="${width}" height="${height}" 
  89. 		viewBox="0 0 ${orgSize.width} ${orgSize.height}" 
  90. 		preserveAspectRatio="${option?.preserveAspectRatio === false ? "none" : "xMinYMid meet"}">
  91. 			<foreignObject width="100%" height="100%">
  92. 				${styleXml}
  93. 				${nodeXml.replace(/(url\()[^#]+/g, "$1")}
  94. 			</foreignObject></svg>`;
  96. 	return `data:image/svg+xml;base64,${b64EncodeUnicode(dataStr)}`;
  97. }
  99. /**
  100.  * Get coordinate of the element
  101.  * @param {SVGElement} elem Target element
  102.  * @param {object} svgOffset SVG offset
  103.  * @returns {object}
  104.  * @private
  105.  */
  106. function getCoords(elem, svgOffset): TSize {
  107. 	const {top, left} = svgOffset;
  108. 	const {x, y} = getBBox(elem, true);
  109. 	const {a, b, c, d, e, f} = elem.getScreenCTM();
  110. 	const {width, height} = getBoundingRect(elem, true);
  112. 	return {
  113. 		x: (a * x) + (c * y) + e - left,
  114. 		y: (b * x) + (d * y) + f - top + (height - Math.round(height / 4)),
  115. 		width,
  116. 		height
  117. 	};
  118. }
  120. /**
  121.  * Get text glyph
  122.  * @param {SVGTextElement} svg Target svg node
  123.  * @returns {Array}
  124.  * @private
  125.  */
  126. function getGlyph(svg: SVGElement): TTextGlyph[] {
  127. 	const {left, top} = getBoundingRect(svg);
  128. 	const filterFn = t => t.textContent || t.childElementCount;
  129. 	const glyph: TTextGlyph[] = [];
  131. 	toArray(svg.querySelectorAll("text"))
  132. 		.filter(filterFn)
  133. 		.forEach((t: SVGTextElement) => { // eslint-disable-line
  134. 			const getStyleFn = (ts: SVGTextElement): TTextGlyph => {
  135. 				const {fill, fontFamily, fontSize, textAnchor, transform} = window.getComputedStyle(
  136. 					ts
  137. 				);
  138. 				const {x, y, width, height} = getCoords(ts, {left, top});
  140. 				return {
  141. 					[ts.textContent as string]: {
  142. 						x,
  143. 						y,
  144. 						width,
  145. 						height,
  146. 						fill,
  147. 						fontFamily,
  148. 						fontSize,
  149. 						textAnchor,
  150. 						transform
  151. 					}
  152. 				};
  153. 			};
  155. 			if (t.childElementCount > 1) {
  156. 				const text: TTextGlyph[] = [];
  158. 				toArray(t.querySelectorAll("tspan"))
  159. 					.filter(filterFn)
  160. 					.forEach((ts: SVGTSpanElement) => {
  161. 						glyph.push(getStyleFn(ts));
  162. 					});
  164. 				return text;
  165. 			} else {
  166. 				glyph.push(getStyleFn(t));
  167. 			}
  168. 		});
  170. 	return glyph;
  171. }
  173. /**
  174.  * Render text glyph
  175.  * - NOTE: Called when the 'preserveFontStyle' option is true
  176.  * @param {CanvasRenderingContext2D} ctx Canvas context
  177.  * @param {Array} glyph Text glyph array
  178.  * @private
  179.  */
  180. function renderText(ctx, glyph): void {
  181. 	glyph.forEach(g => {
  182. 		Object.keys(g).forEach(key => {
  183. 			const {x, y, width, height, fill, fontFamily, fontSize, transform} = g[key];
  185. 			ctx.save();
  187. 			ctx.font = `${fontSize} ${fontFamily}`;
  188. 			ctx.fillStyle = fill;
  190. 			if (transform === "none") {
  191. 				ctx.fillText(key, x, y);
  192. 			} else {
  193. 				const args = transform
  194. 					.replace(/(matrix|\(|\))/g, "")
  195. 					.split(",");
  197. 				if (args.splice(4).every(v => +v === 0)) {
  198. 					args.push(x + width - (width / 4));
  199. 					args.push(y - height + (height / 3));
  200. 				} else {
  201. 					args.push(x);
  202. 					args.push(y);
  203. 				}
  205. 				ctx.transform(...args);
  206. 				ctx.fillText(key, 0, 0);
  207. 			}
  209. 			ctx.restore();
  210. 		});
  211. 	});
  212. }
  214. export default {
  215. 	/**
  216. 	 * Export chart as an image.
  217. 	 * - **NOTE:**
  218. 	 *   - IE11 and below not work properly due to the lack of the feature(<a href="https://msdn.microsoft.com/en-us/library/hh834675(v=vs.85).aspx">foreignObject</a>) support
  219. 	 *   - Every style applied to the chart & the basic CSS file(ex. billboard.css) should be at same domain as API call context to get correct styled export image.
  220. 	 * @function export
  221. 	 * @instance
  222. 	 * @memberof Chart
  223. 	 * @param {object} option Export option
  224. 	 * @param {string} [option.mimeType="image/png"] The desired output image format. (ex. 'image/png' for png, 'image/jpeg' for jpeg format)
  225. 	 * @param {number} [option.width={currentWidth}] width
  226. 	 * @param {number} [option.height={currentHeigth}] height
  227. 	 * @param {boolean} [option.preserveAspectRatio=true] Preserve aspect ratio on given size
  228. 	 * @param {boolean} [option.preserveFontStyle=false] Preserve font style(font-family).<br>
  229. 	 * **NOTE:**
  230. 	 *   - This option is useful when outlink web font style's `font-family` are applied to chart's text element.
  231. 	 *   - Text element's position(especially "transformed") can't be preserved correctly according the page's layout condition.
  232. 	 *   - If need to preserve accurate text position, embed the web font data within to the page and set `preserveFontStyle=false`.
  233. 	 *     - Checkout the embed example: <a href="https://stackblitz.com/edit/zfbya9-8nf9nn?file=index.html">https://stackblitz.com/edit/zfbya9-8nf9nn?file=index.html</a>
  234. 	 * @param {Function} [callback] The callback to be invoked when export is ready.
  235. 	 * @returns {string} dataURI
  236. 	 * @example
  237. 	 *  chart.export();
  238. 	 *  // --> "data:image/svg+xml;base64,PHN..."
  239. 	 *
  240. 	 *  // Initialize the download automatically
  241. 	 *  chart.export({mimeType: "image/png"}, dataUrl => {
  242. 	 *     const link = document.createElement("a");
  243. 	 *
  244. 	 *     link.download = `${Date.now()}.png`;
  245. 	 *     link.href = dataUrl;
  246. 	 *     link.innerHTML = "Download chart as image";
  247. 	 *
  248. 	 *     document.body.appendChild(link);
  249. 	 *  });
  250. 	 *
  251. 	 *  // Resize the exported image
  252. 	 *  chart.export(
  253. 	 *    {
  254. 	 *      width: 800,
  255. 	 *      height: 600,
  256. 	 *      preserveAspectRatio: false,
  257. 	 *      preserveFontStyle: false,
  258. 	 *      mimeType: "image/png"
  259. 	 *    },
  260. 	 *    dataUrl => { ... }
  261. 	 *  );
  262. 	 */
  263. 	export(option?: TExportOption, callback?: (dataUrl: string) => void): string {
  264. 		const $$ = this.internal;
  265. 		const {state, $el: {chart, svg}} = $$;
  266. 		const {width, height} = state.current;
  267. 		const opt = mergeObj(Object.create(null), {
  268. 			width,
  269. 			height,
  270. 			preserveAspectRatio: true,
  271. 			preserveFontStyle: false,
  272. 			mimeType: "image/png"
  273. 		}, option) as TExportOption;
  275. 		const svgDataUrl = nodeToSvgDataUrl(chart.node(), opt, {width, height});
  276. 		const glyph = opt.preserveFontStyle ? getGlyph(svg.node()) : [];
  278. 		if (callback && isFunction(callback)) {
  279. 			const img = new Image();
  281. 			img.crossOrigin = "Anonymous";
  282. 			img.onload = () => {
  283. 				const canvas = document.createElement("canvas");
  284. 				const ctx = canvas.getContext("2d");
  286. 				canvas.width = opt.width || width;
  287. 				canvas.height = opt.height || height;
  288. 				ctx.drawImage(img, 0, 0);
  290. 				if (glyph.length) {
  291. 					renderText(ctx, glyph);
  293. 					// release glyph array
  294. 					glyph.length = 0;
  295. 				}
  297. 				callback.bind(this)(canvas.toDataURL(opt.mimeType));
  298. 			};
  300. 			img.src = svgDataUrl;
  301. 		}
  303. 		return svgDataUrl;
  304. 	}
  305. };