🏠 Home 

dom-to-image.js

dom-to-image文件

สคริปต์นี้ไม่ควรถูกติดตั้งโดยตรง มันเป็นคลังสำหรับสคริปต์อื่น ๆ เพื่อบรรจุด้วยคำสั่งเมทา // @require https://update.greasyfork.org/scripts/448541/1074759/dom-to-imagejs.js

  1. (function (global) {
  2. 'use strict';
  3. var util = newUtil();
  4. var inliner = newInliner();
  5. var fontFaces = newFontFaces();
  6. var images = newImages();
  7. // Default impl options
  8. var defaultOptions = {
  9. // Default is to fail on error, no placeholder
  10. imagePlaceholder: undefined,
  11. // Default cache bust is false, it will use the cache
  12. cacheBust: false
  13. };
  14. var domtoimage = {
  15. toSvg: toSvg,
  16. toPng: toPng,
  17. toJpeg: toJpeg,
  18. toBlob: toBlob,
  19. toPixelData: toPixelData,
  20. impl: {
  21. fontFaces: fontFaces,
  22. images: images,
  23. util: util,
  24. inliner: inliner,
  25. options: {}
  26. }
  27. };
  28. if (typeof module !== 'undefined')
  29. module.exports = domtoimage;
  30. else
  31. global.domtoimage = domtoimage;
  32. /**
  33. * @param {Node} node - The DOM Node object to render
  34. * @param {Object} options - Rendering options
  35. * @param {Function} options.filter - Should return true if passed node should be included in the output
  36. * (excluding node means excluding it's children as well). Not called on the root node.
  37. * @param {String} options.bgcolor - color for the background, any valid CSS color value.
  38. * @param {Number} options.width - width to be applied to node before rendering.
  39. * @param {Number} options.height - height to be applied to node before rendering.
  40. * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
  41. * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
  42. defaults to 1.0.
  43. * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
  44. * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
  45. * @return {Promise} - A promise that is fulfilled with a SVG image data URL
  46. * */
  47. function toSvg(node, options) {
  48. options = options || {};
  49. copyOptions(options);
  50. return Promise.resolve(node)
  51. .then(function (node) {
  52. return cloneNode(node, options.filter, true);
  53. })
  54. .then(embedFonts)
  55. .then(inlineImages)
  56. .then(applyOptions)
  57. .then(function (clone) {
  58. return makeSvgDataUri(clone,
  59. options.width || util.width(node),
  60. options.height || util.height(node)
  61. );
  62. });
  63. function applyOptions(clone) {
  64. if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
  65. if (options.width) clone.style.width = options.width + 'px';
  66. if (options.height) clone.style.height = options.height + 'px';
  67. if (options.style)
  68. Object.keys(options.style).forEach(function (property) {
  69. clone.style[property] = options.style[property];
  70. });
  71. return clone;
  72. }
  73. }
  74. /**
  75. * @param {Node} node - The DOM Node object to render
  76. * @param {Object} options - Rendering options, @see {@link toSvg}
  77. * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
  78. * */
  79. function toPixelData(node, options) {
  80. return draw(node, options || {})
  81. .then(function (canvas) {
  82. return canvas.getContext('2d').getImageData(
  83. 0,
  84. 0,
  85. util.width(node),
  86. util.height(node)
  87. ).data;
  88. });
  89. }
  90. /**
  91. * @param {Node} node - The DOM Node object to render
  92. * @param {Object} options - Rendering options, @see {@link toSvg}
  93. * @return {Promise} - A promise that is fulfilled with a PNG image data URL
  94. * */
  95. function toPng(node, options) {
  96. return draw(node, options || {})
  97. .then(function (canvas) {
  98. return canvas.toDataURL();
  99. });
  100. }
  101. /**
  102. * @param {Node} node - The DOM Node object to render
  103. * @param {Object} options - Rendering options, @see {@link toSvg}
  104. * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
  105. * */
  106. function toJpeg(node, options) {
  107. options = options || {};
  108. return draw(node, options)
  109. .then(function (canvas) {
  110. return canvas.toDataURL('image/jpeg', options.quality || 1.0);
  111. });
  112. }
  113. /**
  114. * @param {Node} node - The DOM Node object to render
  115. * @param {Object} options - Rendering options, @see {@link toSvg}
  116. * @return {Promise} - A promise that is fulfilled with a PNG image blob
  117. * */
  118. function toBlob(node, options) {
  119. return draw(node, options || {})
  120. .then(util.canvasToBlob);
  121. }
  122. function copyOptions(options) {
  123. // Copy options to impl options for use in impl
  124. if(typeof(options.imagePlaceholder) === 'undefined') {
  125. domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
  126. } else {
  127. domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
  128. }
  129. if(typeof(options.cacheBust) === 'undefined') {
  130. domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
  131. } else {
  132. domtoimage.impl.options.cacheBust = options.cacheBust;
  133. }
  134. }
  135. function draw(domNode, options) {
  136. return toSvg(domNode, options)
  137. .then(util.makeImage)
  138. .then(util.delay(100))
  139. .then(function (image) {
  140. var canvas = newCanvas(domNode);
  141. canvas.getContext('2d').drawImage(image, 0, 0);
  142. return canvas;
  143. });
  144. function newCanvas(domNode) {
  145. var canvas = document.createElement('canvas');
  146. canvas.width = options.width || util.width(domNode);
  147. canvas.height = options.height || util.height(domNode);
  148. if (options.bgcolor) {
  149. var ctx = canvas.getContext('2d');
  150. ctx.fillStyle = options.bgcolor;
  151. ctx.fillRect(0, 0, canvas.width, canvas.height);
  152. }
  153. return canvas;
  154. }
  155. }
  156. function cloneNode(node, filter, root) {
  157. if (!root && filter && !filter(node)) return Promise.resolve();
  158. return Promise.resolve(node)
  159. .then(makeNodeCopy)
  160. .then(function (clone) {
  161. return cloneChildren(node, clone, filter);
  162. })
  163. .then(function (clone) {
  164. return processClone(node, clone);
  165. });
  166. function makeNodeCopy(node) {
  167. if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
  168. return node.cloneNode(false);
  169. }
  170. function cloneChildren(original, clone, filter) {
  171. var children = original.childNodes;
  172. if (children.length === 0) return Promise.resolve(clone);
  173. return cloneChildrenInOrder(clone, util.asArray(children), filter)
  174. .then(function () {
  175. return clone;
  176. });
  177. function cloneChildrenInOrder(parent, children, filter) {
  178. var done = Promise.resolve();
  179. children.forEach(function (child) {
  180. done = done
  181. .then(function () {
  182. return cloneNode(child, filter);
  183. })
  184. .then(function (childClone) {
  185. if (childClone) parent.appendChild(childClone);
  186. });
  187. });
  188. return done;
  189. }
  190. }
  191. function processClone(original, clone) {
  192. if (!(clone instanceof Element)) return clone;
  193. return Promise.resolve()
  194. .then(cloneStyle)
  195. .then(clonePseudoElements)
  196. .then(copyUserInput)
  197. .then(fixSvg)
  198. .then(function () {
  199. return clone;
  200. });
  201. function cloneStyle() {
  202. copyStyle(window.getComputedStyle(original), clone.style);
  203. function copyStyle(source, target) {
  204. if (source.cssText) target.cssText = source.cssText;
  205. else copyProperties(source, target);
  206. function copyProperties(source, target) {
  207. util.asArray(source).forEach(function (name) {
  208. target.setProperty(
  209. name,
  210. source.getPropertyValue(name),
  211. source.getPropertyPriority(name)
  212. );
  213. });
  214. }
  215. }
  216. }
  217. function clonePseudoElements() {
  218. [':before', ':after'].forEach(function (element) {
  219. clonePseudoElement(element);
  220. });
  221. function clonePseudoElement(element) {
  222. var style = window.getComputedStyle(original, element);
  223. var content = style.getPropertyValue('content');
  224. if (content === '' || content === 'none') return;
  225. var className = util.uid();
  226. clone.className = clone.className + ' ' + className;
  227. var styleElement = document.createElement('style');
  228. styleElement.appendChild(formatPseudoElementStyle(className, element, style));
  229. clone.appendChild(styleElement);
  230. function formatPseudoElementStyle(className, element, style) {
  231. var selector = '.' + className + ':' + element;
  232. var cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
  233. return document.createTextNode(selector + '{' + cssText + '}');
  234. function formatCssText(style) {
  235. var content = style.getPropertyValue('content');
  236. return style.cssText + ' content: ' + content + ';';
  237. }
  238. function formatCssProperties(style) {
  239. return util.asArray(style)
  240. .map(formatProperty)
  241. .join('; ') + ';';
  242. function formatProperty(name) {
  243. return name + ': ' +
  244. style.getPropertyValue(name) +
  245. (style.getPropertyPriority(name) ? ' !important' : '');
  246. }
  247. }
  248. }
  249. }
  250. }
  251. function copyUserInput() {
  252. if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
  253. if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
  254. }
  255. function fixSvg() {
  256. if (!(clone instanceof SVGElement)) return;
  257. clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  258. if (!(clone instanceof SVGRectElement)) return;
  259. ['width', 'height'].forEach(function (attribute) {
  260. var value = clone.getAttribute(attribute);
  261. if (!value) return;
  262. clone.style.setProperty(attribute, value);
  263. });
  264. }
  265. }
  266. }
  267. function embedFonts(node) {
  268. return fontFaces.resolveAll()
  269. .then(function (cssText) {
  270. var styleNode = document.createElement('style');
  271. node.appendChild(styleNode);
  272. styleNode.appendChild(document.createTextNode(cssText));
  273. return node;
  274. });
  275. }
  276. function inlineImages(node) {
  277. return images.inlineAll(node)
  278. .then(function () {
  279. return node;
  280. });
  281. }
  282. function makeSvgDataUri(node, width, height) {
  283. return Promise.resolve(node)
  284. .then(function (node) {
  285. node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
  286. return new XMLSerializer().serializeToString(node);
  287. })
  288. .then(util.escapeXhtml)
  289. .then(function (xhtml) {
  290. return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
  291. })
  292. .then(function (foreignObject) {
  293. return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
  294. foreignObject + '</svg>';
  295. })
  296. .then(function (svg) {
  297. return 'data:image/svg+xml;charset=utf-8,' + svg;
  298. });
  299. }
  300. function newUtil() {
  301. return {
  302. escape: escape,
  303. parseExtension: parseExtension,
  304. mimeType: mimeType,
  305. dataAsUrl: dataAsUrl,
  306. isDataUrl: isDataUrl,
  307. canvasToBlob: canvasToBlob,
  308. resolveUrl: resolveUrl,
  309. getAndEncode: getAndEncode,
  310. uid: uid(),
  311. delay: delay,
  312. asArray: asArray,
  313. escapeXhtml: escapeXhtml,
  314. makeImage: makeImage,
  315. width: width,
  316. height: height
  317. };
  318. function mimes() {
  319. /*
  320. * Only WOFF and EOT mime types for fonts are 'real'
  321. * see http://www.iana.org/assignments/media-types/media-types.xhtml
  322. */
  323. var WOFF = 'application/font-woff';
  324. var JPEG = 'image/jpeg';
  325. return {
  326. 'woff': WOFF,
  327. 'woff2': WOFF,
  328. 'ttf': 'application/font-truetype',
  329. 'eot': 'application/vnd.ms-fontobject',
  330. 'png': 'image/png',
  331. 'jpg': JPEG,
  332. 'jpeg': JPEG,
  333. 'gif': 'image/gif',
  334. 'tiff': 'image/tiff',
  335. 'svg': 'image/svg+xml'
  336. };
  337. }
  338. function parseExtension(url) {
  339. var match = /\.([^\.\/]*?)$/g.exec(url);
  340. if (match) return match[1];
  341. else return '';
  342. }
  343. function mimeType(url) {
  344. var extension = parseExtension(url).toLowerCase();
  345. return mimes()[extension] || '';
  346. }
  347. function isDataUrl(url) {
  348. return url.search(/^(data:)/) !== -1;
  349. }
  350. function toBlob(canvas) {
  351. return new Promise(function (resolve) {
  352. var binaryString = window.atob(canvas.toDataURL().split(',')[1]);
  353. var length = binaryString.length;
  354. var binaryArray = new Uint8Array(length);
  355. for (var i = 0; i < length; i++)
  356. binaryArray[i] = binaryString.charCodeAt(i);
  357. resolve(new Blob([binaryArray], {
  358. type: 'image/png'
  359. }));
  360. });
  361. }
  362. function canvasToBlob(canvas) {
  363. if (canvas.toBlob)
  364. return new Promise(function (resolve) {
  365. canvas.toBlob(resolve);
  366. });
  367. return toBlob(canvas);
  368. }
  369. function resolveUrl(url, baseUrl) {
  370. var doc = document.implementation.createHTMLDocument();
  371. var base = doc.createElement('base');
  372. doc.head.appendChild(base);
  373. var a = doc.createElement('a');
  374. doc.body.appendChild(a);
  375. base.href = baseUrl;
  376. a.href = url;
  377. return a.href;
  378. }
  379. function uid() {
  380. var index = 0;
  381. return function () {
  382. return 'u' + fourRandomChars() + index++;
  383. function fourRandomChars() {
  384. /* see http://stackoverflow.com/a/6248722/2519373 */
  385. return ('0000' + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
  386. }
  387. };
  388. }
  389. function makeImage(uri) {
  390. return new Promise(function (resolve, reject) {
  391. var image = new Image();
  392. image.onload = function () {
  393. resolve(image);
  394. };
  395. image.onerror = reject;
  396. image.src = uri;
  397. });
  398. }
  399. function getAndEncode(url) {
  400. var TIMEOUT = 30000;
  401. if(domtoimage.impl.options.cacheBust) {
  402. // Cache bypass so we dont have CORS issues with cached images
  403. // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
  404. url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
  405. }
  406. return new Promise(function (resolve) {
  407. var request = new XMLHttpRequest();
  408. request.onreadystatechange = done;
  409. request.ontimeout = timeout;
  410. request.responseType = 'blob';
  411. request.timeout = TIMEOUT;
  412. request.open('GET', url, true);
  413. request.send();
  414. var placeholder;
  415. if(domtoimage.impl.options.imagePlaceholder) {
  416. var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
  417. if(split && split[1]) {
  418. placeholder = split[1];
  419. }
  420. }
  421. function done() {
  422. if (request.readyState !== 4) return;
  423. if (request.status !== 200) {
  424. if(placeholder) {
  425. resolve(placeholder);
  426. } else {
  427. fail('cannot fetch resource: ' + url + ', status: ' + request.status);
  428. }
  429. return;
  430. }
  431. var encoder = new FileReader();
  432. encoder.onloadend = function () {
  433. var content = encoder.r###lt.split(/,/)[1];
  434. resolve(content);
  435. };
  436. encoder.readAsDataURL(request.response);
  437. }
  438. function timeout() {
  439. if(placeholder) {
  440. resolve(placeholder);
  441. } else {
  442. fail('timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url);
  443. }
  444. }
  445. function fail(message) {
  446. console.error(message);
  447. resolve('');
  448. }
  449. });
  450. }
  451. function dataAsUrl(content, type) {
  452. return 'data:' + type + ';base64,' + content;
  453. }
  454. function escape(string) {
  455. return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
  456. }
  457. function delay(ms) {
  458. return function (arg) {
  459. return new Promise(function (resolve) {
  460. setTimeout(function () {
  461. resolve(arg);
  462. }, ms);
  463. });
  464. };
  465. }
  466. function asArray(arrayLike) {
  467. var array = [];
  468. var length = arrayLike.length;
  469. for (var i = 0; i < length; i++) array.push(arrayLike[i]);
  470. return array;
  471. }
  472. function escapeXhtml(string) {
  473. return string.replace(/#/g, '%23').replace(/\n/g, '%0A');
  474. }
  475. function width(node) {
  476. var leftBorder = px(node, 'border-left-width');
  477. var rightBorder = px(node, 'border-right-width');
  478. return node.scrollWidth + leftBorder + rightBorder;
  479. }
  480. function height(node) {
  481. var topBorder = px(node, 'border-top-width');
  482. var bottomBorder = px(node, 'border-bottom-width');
  483. return node.scrollHeight + topBorder + bottomBorder;
  484. }
  485. function px(node, styleProperty) {
  486. var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
  487. return parseFloat(value.replace('px', ''));
  488. }
  489. }
  490. function newInliner() {
  491. var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
  492. return {
  493. inlineAll: inlineAll,
  494. shouldProcess: shouldProcess,
  495. impl: {
  496. readUrls: readUrls,
  497. inline: inline
  498. }
  499. };
  500. function shouldProcess(string) {
  501. return string.search(URL_REGEX) !== -1;
  502. }
  503. function readUrls(string) {
  504. var r###lt = [];
  505. var match;
  506. while ((match = URL_REGEX.exec(string)) !== null) {
  507. r###lt.push(match[1]);
  508. }
  509. return r###lt.filter(function (url) {
  510. return !util.isDataUrl(url);
  511. });
  512. }
  513. function inline(string, url, baseUrl, get) {
  514. return Promise.resolve(url)
  515. .then(function (url) {
  516. return baseUrl ? util.resolveUrl(url, baseUrl) : url;
  517. })
  518. .then(get || util.getAndEncode)
  519. .then(function (data) {
  520. return util.dataAsUrl(data, util.mimeType(url));
  521. })
  522. .then(function (dataUrl) {
  523. return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
  524. });
  525. function urlAsRegex(url) {
  526. return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
  527. }
  528. }
  529. function inlineAll(string, baseUrl, get) {
  530. if (nothingToInline()) return Promise.resolve(string);
  531. return Promise.resolve(string)
  532. .then(readUrls)
  533. .then(function (urls) {
  534. var done = Promise.resolve(string);
  535. urls.forEach(function (url) {
  536. done = done.then(function (string) {
  537. return inline(string, url, baseUrl, get);
  538. });
  539. });
  540. return done;
  541. });
  542. function nothingToInline() {
  543. return !shouldProcess(string);
  544. }
  545. }
  546. }
  547. function newFontFaces() {
  548. return {
  549. resolveAll: resolveAll,
  550. impl: {
  551. readAll: readAll
  552. }
  553. };
  554. function resolveAll() {
  555. return readAll(document)
  556. .then(function (webFonts) {
  557. return Promise.all(
  558. webFonts.map(function (webFont) {
  559. return webFont.resolve();
  560. })
  561. );
  562. })
  563. .then(function (cssStrings) {
  564. return cssStrings.join('\n');
  565. });
  566. }
  567. function readAll() {
  568. return Promise.resolve(util.asArray(document.styleSheets))
  569. .then(getCssRules)
  570. .then(selectWebFontRules)
  571. .then(function (rules) {
  572. return rules.map(newWebFont);
  573. });
  574. function selectWebFontRules(cssRules) {
  575. return cssRules
  576. .filter(function (rule) {
  577. return rule.type === CSSRule.FONT_FACE_RULE;
  578. })
  579. .filter(function (rule) {
  580. return inliner.shouldProcess(rule.style.getPropertyValue('src'));
  581. });
  582. }
  583. function getCssRules(styleSheets) {
  584. var cssRules = [];
  585. styleSheets.forEach(function (sheet) {
  586. try {
  587. util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
  588. } catch (e) {
  589. console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
  590. }
  591. });
  592. return cssRules;
  593. }
  594. function newWebFont(webFontRule) {
  595. return {
  596. resolve: function resolve() {
  597. var baseUrl = (webFontRule.parentStyleSheet || {}).href;
  598. return inliner.inlineAll(webFontRule.cssText, baseUrl);
  599. },
  600. src: function () {
  601. return webFontRule.style.getPropertyValue('src');
  602. }
  603. };
  604. }
  605. }
  606. }
  607. function newImages() {
  608. return {
  609. inlineAll: inlineAll,
  610. impl: {
  611. newImage: newImage
  612. }
  613. };
  614. function newImage(element) {
  615. return {
  616. inline: inline
  617. };
  618. function inline(get) {
  619. if (util.isDataUrl(element.src)) return Promise.resolve();
  620. return Promise.resolve(element.src)
  621. .then(get || util.getAndEncode)
  622. .then(function (data) {
  623. return util.dataAsUrl(data, util.mimeType(element.src));
  624. })
  625. .then(function (dataUrl) {
  626. return new Promise(function (resolve, reject) {
  627. element.onload = resolve;
  628. element.onerror = reject;
  629. element.src = dataUrl;
  630. });
  631. });
  632. }
  633. }
  634. function inlineAll(node) {
  635. if (!(node instanceof Element)) return Promise.resolve(node);
  636. return inlineBackground(node)
  637. .then(function () {
  638. if (node instanceof HTMLImageElement)
  639. return newImage(node).inline();
  640. else
  641. return Promise.all(
  642. util.asArray(node.childNodes).map(function (child) {
  643. return inlineAll(child);
  644. })
  645. );
  646. });
  647. function inlineBackground(node) {
  648. var background = node.style.getPropertyValue('background');
  649. if (!background) return Promise.resolve(node);
  650. return inliner.inlineAll(background)
  651. .then(function (inlined) {
  652. node.style.setProperty(
  653. 'background',
  654. inlined,
  655. node.style.getPropertyPriority('background')
  656. );
  657. })
  658. .then(function () {
  659. return node;
  660. });
  661. }
  662. }
  663. }
  664. })(this);