From 51a7b6e11a0fe2f6e79c4e51b076683d8e46922c Mon Sep 17 00:00:00 2001 From: Aleksander Burzec Date: Fri, 5 Apr 2019 17:03:01 +0200 Subject: [PATCH] temporary fix: https://github.com/tsayen/dom-to-image/issues/125 Marker is not included(arrow) --- dist/dom-to-image.min.js | 4 ++-- spec/dom-to-image.spec.js | 6 ++++++ spec/resources/svg-arrow-head/control-image | 1 + spec/resources/svg-arrow-head/dom-node.html | 11 ++++++++++ spec/resources/svg-arrow-head/style.css | 24 +++++++++++++++++++++ src/dom-to-image.js | 12 +++++++++-- 6 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 spec/resources/svg-arrow-head/control-image create mode 100644 spec/resources/svg-arrow-head/dom-node.html create mode 100644 spec/resources/svg-arrow-head/style.css diff --git a/dist/dom-to-image.min.js b/dist/dom-to-image.min.js index 2787c432..0ba10539 100644 --- a/dist/dom-to-image.min.js +++ b/dist/dom-to-image.min.js @@ -1,2 +1,2 @@ -/*! dom-to-image 19-06-2018 */ -!function(a){"use strict";function b(a,b){function c(a){return b.bgcolor&&(a.style.backgroundColor=b.bgcolor),b.width&&(a.style.width=b.width+"px"),b.height&&(a.style.height=b.height+"px"),b.style&&Object.keys(b.style).forEach(function(c){a.style[c]=b.style[c]}),a}return b=b||{},g(b),Promise.resolve(a).then(function(a){return i(a,b.filter,!0)}).then(j).then(k).then(c).then(function(c){return l(c,b.width||q.width(a),b.height||q.height(a))})}function c(a,b){return h(a,b||{}).then(function(b){return b.getContext("2d").getImageData(0,0,q.width(a),q.height(a)).data})}function d(a,b){return h(a,b||{}).then(function(a){return a.toDataURL()})}function e(a,b){return b=b||{},h(a,b).then(function(a){return a.toDataURL("image/jpeg",b.quality||1)})}function f(a,b){return h(a,b||{}).then(q.canvasToBlob)}function g(a){"undefined"==typeof a.imagePlaceholder?v.impl.options.imagePlaceholder=u.imagePlaceholder:v.impl.options.imagePlaceholder=a.imagePlaceholder,"undefined"==typeof a.cacheBust?v.impl.options.cacheBust=u.cacheBust:v.impl.options.cacheBust=a.cacheBust}function h(a,c){function d(a){var b=document.createElement("canvas");if(b.width=c.width||window.devicePixelRatio*q.width(a),b.height=c.height||window.devicePixelRatio*q.height(a),c.bgcolor){var d=b.getContext("2d");d.fillStyle=c.bgcolor,d.fillRect(0,0,b.width,b.height)}return b}return b(a,c).then(q.makeImage).then(q.delay(100)).then(function(b){var c=d(a),e=c.getContext("2d");return e.scale(window.devicePixelRatio,window.devicePixelRatio),e.drawImage(b,0,0),c})}function i(a,b,c){function d(a){return a instanceof HTMLCanvasElement?q.makeImage(a.toDataURL()):a.cloneNode(!1)}function e(a,b,c){function d(a,b,c){var d=Promise.resolve();return b.forEach(function(b){d=d.then(function(){return i(b,c)}).then(function(b){b&&a.appendChild(b)})}),d}var e=a.childNodes;return 0===e.length?Promise.resolve(b):d(b,q.asArray(e),c).then(function(){return b})}function f(a,b){function c(){function c(a,b){function c(a,b){q.asArray(a).forEach(function(c){b.setProperty(c,a.getPropertyValue(c),a.getPropertyPriority(c))})}""==b.fontStretch,a.cssText?(b.cssText=a.cssText,b.font=a.font):c(a,b),b.fontStretch="normal"}c(window.getComputedStyle(a),b.style)}function d(){function c(c){function d(a,b,c){function d(a){var b=a.getPropertyValue("content");return a.cssText+" content: "+b+";"}function e(a){function b(b){return b+": "+a.getPropertyValue(b)+(a.getPropertyPriority(b)?" !important":"")}return q.asArray(a).map(b).join("; ")+";"}var f="."+a+":"+b,g=c.cssText?d(c):e(c);return document.createTextNode(f+"{"+g+"}")}var e=window.getComputedStyle(a,c),f=e.getPropertyValue("content");if(""!==f&&"none"!==f){var g=q.uid();b.className=b.className+" "+g;var h=document.createElement("style");h.appendChild(d(g,c,e)),b.appendChild(h)}}[":before",":after"].forEach(function(a){c(a)})}function e(){a instanceof HTMLTextAreaElement&&(b.innerHTML=a.value),a instanceof HTMLInputElement&&b.setAttribute("value",a.value)}function f(){b instanceof SVGElement&&(b.setAttribute("xmlns","http://www.w3.org/2000/svg"),b instanceof SVGRectElement&&["width","height"].forEach(function(a){var c=b.getAttribute(a);c&&b.style.setProperty(a,c)}))}return b instanceof Element?Promise.resolve().then(c).then(d).then(e).then(f).then(function(){return b}):b}return c||!b||b(a)?Promise.resolve(a).then(d).then(function(c){return e(a,c,b)}).then(function(b){return f(a,b)}):Promise.resolve()}function j(a){return s.resolveAll().then(function(b){var c=document.createElement("style");return a.appendChild(c),c.appendChild(document.createTextNode(b)),a})}function k(a){return t.inlineAll(a).then(function(){return a})}function l(a,b,c){return Promise.resolve(a).then(function(a){return a.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(a)}).then(q.escapeXhtml).then(function(a){return''+a+""}).then(function(a){return''+a+""}).then(function(a){return"data:image/svg+xml;charset=utf-8,"+a})}function m(){function a(){var a="application/font-woff",b="image/jpeg";return{woff:a,woff2:a,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:b,jpeg:b,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"}}function b(a){var b=/\.([^\.\/]*?)$/g.exec(a);return b?b[1]:""}function c(c){var d=b(c).toLowerCase();return a()[d]||""}function d(a){return a.search(/^(data:)/)!==-1}function e(a){var b=/url\(['"]?(data:)([^'"]+?)['"]?\)/;return a.search(b)!==-1}function f(a){return new Promise(function(b){for(var c=window.atob(a.toDataURL().split(",")[1]),d=c.length,e=new Uint8Array(d),f=0;f'+a+""}).then(function(a){return''+a+""}).then(function(a){return"data:image/svg+xml;charset=utf-8,"+a})}function m(){function a(){var a="application/font-woff",b="image/jpeg";return{woff:a,woff2:a,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:b,jpeg:b,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"}}function b(a){var b=/\.([^\.\/]*?)$/g.exec(a);return b?b[1]:""}function c(c){var d=b(c).toLowerCase();return a()[d]||""}function d(a){return a.search(/^(data:)/)!==-1}function e(a){var b=/url\(['"]?(data:)([^'"]+?)['"]?\)/;return a.search(b)!==-1}function f(a){return new Promise(function(b){for(var c=window.atob(a.toDataURL().split(",")[1]),d=c.length,e=new Uint8Array(d),f=0;f with marker head in tag', function (done) { + loadTestPage('svg-arrow-head/dom-node.html', 'svg-arrow-head/style.css', 'svg-arrow-head/control-image') + .then(renderAndCheck) + .then(done).catch(done); + }); + it('should render whole node when its scrolled', function (done) { var domNode; loadTestPage('scroll/dom-node.html', 'scroll/style.css', 'scroll/control-image') diff --git a/spec/resources/svg-arrow-head/control-image b/spec/resources/svg-arrow-head/control-image new file mode 100644 index 00000000..29feaa39 --- /dev/null +++ b/spec/resources/svg-arrow-head/control-image @@ -0,0 +1 @@ +data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC3UlEQVR4Xu3bsW3bYBQE4NMCKVwYSJAt3HsCT5AqVdKkygL2BBkgA3gbL+IlFPxCFBCCFPLIX6d75Kn1s9/v+3gUIdi7PbBHXjYJ7BrIDtjZnGjDBzlYBMTnCgiIj8XhJAEJiFkCZsdJQwJiloDZcdKQgJglYHacOQ35CuAOwC+z32UVx2FBfgBoIO31GpT+1wAL8hPAl8ExgtLZhAVp64PSGWH44+aABMUQJChXQpnbkONxcvvqDLMUJE0xBAlKR5QeDcntyxQkTekA07MhaYopSJqyAOYaDUlTTEHSlBkw12xImmIKkqYQMIqGpCmmIGnKBBhlQ9IUU5A05T8wt2hImmIKkqacgbllQ9IUU5A0ZQDj0JA0xRQkTTH9h51N/+GE0y1r+Ba3WRRXkM3evpxB5qK8APgI4PuETyrsRtxBWJSG8fQ35QbyZpf4yIEqgExFGWK072kY5VpSBWQM5RTjeB2Wa0klkEsoHwa3qdMbQrmWVAM5RXkHcD9yWy7VkoogR5RHAJ8nvGmXaklVkEvvGZd8yrSkIgiLUeqJqxrIHIxST1yVQJZglGlJFZClGGVaUgHkE4BnAA8TnqjGRuyfuCqAHENuIN86wFg/cVUC6QVj3ZKKID1gbFtSGWQJjG1L1gAyF8ayJWsCYWEsW7JGEAbGriVrBpkCY9eSLYCMwVi1ZEsgl2CsWrJFkHMwNi3ZMsgQpn0s83vsgzDF1wOiSJnYERAiLMVoQBQpEzsCQoSlGA2IImViR0CIsBSjAVGkTOwICBGWYjQgipSJHQEhwlKMBkSRMrEjIERYitGAKFImdgSECEsxGhBFysSOgBBhKUYDokiZ2BEQIizFaEAUKRM7AkKEpRgNiCJlYkdAiLAUowFRpEzsCAgRlmI0IIqUiR0BIcJSjAZEkTKxIyBEWIrRgChSJnYEhAhLMRoQRcrEjoAQYSlGA6JImdgRECIsxeg/EMWy7JiWwB8pKgC7pb/IIwAAAABJRU5ErkJggg== diff --git a/spec/resources/svg-arrow-head/dom-node.html b/spec/resources/svg-arrow-head/dom-node.html new file mode 100644 index 00000000..c31d855c --- /dev/null +++ b/spec/resources/svg-arrow-head/dom-node.html @@ -0,0 +1,11 @@ +
+ + + + + + + + +
diff --git a/spec/resources/svg-arrow-head/style.css b/spec/resources/svg-arrow-head/style.css new file mode 100644 index 00000000..2023620a --- /dev/null +++ b/spec/resources/svg-arrow-head/style.css @@ -0,0 +1,24 @@ +#dom-node { + width: 100px; + overflow: hidden; +} + +#root { + border: 1px solid red; + position: relative; + height: 100px; +} + +svg { + position: absolute; + left: 5px; + top: 5px; +} +.svg-line { + cursor: crosshair; + stroke: rgba(0, 0, 0, 0.8); + stroke-width: 3; +} +.svg-line-head { + fill: rgba(0, 0, 0, 0.8); +} diff --git a/src/dom-to-image.js b/src/dom-to-image.js index 2b23a52e..0ea6bd19 100644 --- a/src/dom-to-image.js +++ b/src/dom-to-image.js @@ -246,7 +246,10 @@ function cloneStyle() { copyStyle(window.getComputedStyle(original), clone.style); - + // temporary fix of: https://github.com/tsayen/dom-to-image/issues/125 + if (util.isChrome() && clone.style.marker && clone.tagName === 'line') { + clone.style.marker = ''; + } function copyStyle(source, target) { target.fontStretch == ''; if (source.cssText) { @@ -385,7 +388,8 @@ escapeXhtml: escapeXhtml, makeImage: makeImage, width: width, - height: height + height: height, + isChrome: isChrome, }; function mimes() { @@ -596,6 +600,10 @@ var value = window.getComputedStyle(node).getPropertyValue(styleProperty); return parseFloat(value.replace('px', '')); } + + function isChrome() { + return /chrome/i.test( navigator.userAgent ); + } } function newInliner() {