diff --git a/README.md b/README.md index 49abf516..637d6599 100644 --- a/README.md +++ b/README.md @@ -139,18 +139,19 @@ domtoimage.toCanvas(document.getElementById('my-node')).then(function (canvas) { }); ``` -Adjust cloned nodes before/after children are cloned [sample fiddle](https://jsfiddle.net/IDisposable/grLtjwe5/12/) +Adjust cloned nodes before/after children are cloned +[sample fiddle](https://jsfiddle.net/IDisposable/grLtjwe5/12/) ```javascript const adjustClone = (node, clone, after) => { - if (!after && clone.id === 'element') { - clone.style.transform = 'translateY(100px)'; - } - return clone; -} + if (!after && clone.id === 'element') { + clone.style.transform = 'translateY(100px)'; + } + return clone; +}; const wrapper = document.getElementById('wrapper'); -const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone}); +const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone }); ``` --- @@ -203,6 +204,11 @@ Set to true to enable the copying of the default styles of elements. This will m process faster. Try disabling it if seeing extra padding and using resetting / normalizing in CSS. Defaults to true. +#### useCredentialFeatures + +Allows optionally setting the `useCredentials` option if the resource matches a pattern in +the `useCredentialFilters` array. + ### Alternative Solutions to CORS Policy Issue Are you facing a [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) @@ -344,7 +350,8 @@ Klimas (fixes), Edgardo Di Gesto (fixes), 樊冬 Fan Dong (fixes), Shrijan Tripa SNDST00M (optimize), Joseph White (performance CSS), Phani Rithvij (test), David DOLCIMASCOLO (packaging), Zee (ZM) @zm-cttae (many major updates), Joshua Walsh @JoshuaWalsh (Firefox issues), Emre Coban @emrecoban (documentation), Nate Stuyvesant -@nstuyvesant (fixes), King Wang @eachmawzw (CORS image proxy) +@nstuyvesant (fixes), King Wang @eachmawzw (CORS image proxy), TMM Schmit @tmmschmit +(useCredentialsFilters) ## License diff --git a/dist/dom-to-image-more.min.js b/dist/dom-to-image-more.min.js index 5f0f9414..93d4ddb4 100644 --- a/dist/dom-to-image-more.min.js +++ b/dist/dom-to-image-more.min.js @@ -1,3 +1,3 @@ -/*! dom-to-image-more 09-02-2024 */ -!function(s){"use strict";const d=function(){let e=0;return{escape:function(e){return e.replace(/([.*+?^${}()|[]\/\\])/g,"\\$1")},isDataUrl:function(e){return-1!==e.search(/^(data:)/)},canvasToBlob:function(t){if(t.toBlob)return new Promise(function(e){t.toBlob(e)});return function(r){return new Promise(function(e){var t=l(r.toDataURL().split(",")[1]),n=t.length,o=new Uint8Array(n);for(let e=0;et.style.removeProperty(e)),["left","right","top","bottom"].forEach(e=>{t.style.getPropertyValue(e)&&t.style.setProperty(e,"0px")})))}e(c,l)}function t(){const u=d.uid();function t(r){const i=m(c,r),s=i.getPropertyValue("content");if(""!==s&&"none"!==s){const t=l.getAttribute("class")||"",n=(l.setAttribute("class",t+" "+u),document.createElement("style"));function e(){const e=`.${u}:`+r,t=(i.cssText?n:o)();return document.createTextNode(e+`{${t}}`);function n(){return`${i.cssText} content: ${s};`}function o(){const e=d.asArray(i).map(t).join("; ");return e+";";function t(e){const t=i.getPropertyValue(e),n=i.getPropertyPriority(e)?" !important":"";return e+": "+t+n}}}n.appendChild(e()),l.appendChild(n)}}[":before",":after"].forEach(function(e){t(e)})}function n(){d.isHTMLTextAreaElement(c)&&(l.innerHTML=c.value),d.isHTMLInputElement(c)&&l.setAttribute("value",c.value)}function o(){d.isSVGElement(l)&&(l.setAttribute("xmlns","http://www.w3.org/2000/svg"),d.isSVGRectElement(l))&&["width","height"].forEach(function(e){const t=l.getAttribute(e);t&&l.style.setProperty(e,t)})}}}(e,r,null,t)}).then(p).then(g).then(function(t){r.bgcolor&&(t.style.backgroundColor=r.bgcolor);r.width&&(t.style.width=r.width+"px");r.height&&(t.style.height=r.height+"px");r.style&&Object.keys(r.style).forEach(function(e){t.style[e]=r.style[e]});let e=null;"function"==typeof r.onclone&&(e=r.onclone(t));return Promise.resolve(e).then(function(){return t})}).then(function(e){let n=r.width||d.width(e),o=r.height||d.height(e);return Promise.resolve(e).then(function(e){return e.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(e)}).then(d.escapeXhtml).then(function(e){var t=(d.isDimensionMissing(n)?' width="100%"':` width="${n}"`)+(d.isDimensionMissing(o)?' height="100%"':` height="${o}"`);return`${e}`}).then(function(e){return"data:image/svg+xml;charset=utf-8,"+e})}).then(function(e){for(;0{w=null,v={}},2e4)}(),e})}function i(r,i){return f(r,i=i||{}).then(d.makeImage).then(function(e){var t="number"!=typeof i.scale?1:i.scale,n=function(e,t){let n=i.width||d.width(e),o=i.height||d.height(e);d.isDimensionMissing(n)&&(n=d.isDimensionMissing(o)?300:2*o);d.isDimensionMissing(o)&&(o=n/2);e=document.createElement("canvas");e.width=n*t,e.height=o*t,i.bgcolor&&((t=e.getContext("2d")).fillStyle=i.bgcolor,t.fillRect(0,0,e.width,e.height));return e}(r,t),o=n.getContext("2d");return o.msImageSmoothingEnabled=!1,o.imageSmoothingEnabled=!1,e&&(o.scale(t,t),o.drawImage(e,0,0)),n})}let h=null;function p(n){return e.resolveAll().then(function(e){var t;return""!==e&&(t=document.createElement("style"),n.appendChild(t),t.appendChild(document.createTextNode(e))),n})}function g(e){return n.inlineAll(e).then(function(){return e})}function y(e,t,i,s,n){const u=c.impl.options.copyDefaultStyles?function(t,e){var e=function(e){var t=[];do{if(e.nodeType===a){var n=e.tagName;if(t.push(n),E.includes(n))break}}while(e=e.parentNode,e);return t}(e),n=function(e){return("relaxed"!==t.styleCaching?e:e.filter((e,t,n)=>0===t||t===n.length-1)).join(">")}(e);if(v[n])return v[n];var o=function(){if(h)return h.contentWindow;var e=document.characterSet||"UTF-8",t=document.doctype,t=t?(`":"";return(h=document.createElement("iframe")).id="domtoimage-sandbox-"+d.uid(),h.style.visibility="hidden",h.style.position="fixed",document.body.appendChild(h),function(e,t,n,o){try{return e.contentWindow.document.write(t+`${o}`),e.contentWindow}catch(e){}var r=document.createElement("meta");r.setAttribute("charset",n);try{var i=document.implementation.createHTMLDocument(o),s=(i.head.appendChild(r),t+i.documentElement.outerHTML);return e.setAttribute("srcdoc",s),e.contentWindow}catch(e){}return e.contentDocument.head.appendChild(r),e.contentDocument.title=o,e.contentWindow}(h,t,e,"domtoimage-sandbox");function n(e){var t;return e?((t=document.createElement("div")).innerText=e,t.innerHTML):""}}(),e=function(e,t){let n=e.body;do{var o=t.pop(),o=e.createElement(o);n.appendChild(o),n=o}while(00<=u.search(e)).length),c.impl.options.useCredentials&&(n.withCredentials=!0),c.impl.options.corsImg&&0===u.indexOf("http")&&-1===u.indexOf(window.location.origin)){var o="POST"===(c.impl.options.corsImg.method||"GET").toUpperCase()?"POST":"GET";n.open(o,(c.impl.options.corsImg.url||"").replace("#{cors}",u),!0);let t=!1;const s=c.impl.options.corsImg.headers||{},l=(Object.keys(s).forEach(function(e){-1!==s[e].indexOf("application/json")&&(t=!0),n.setRequestHeader(e,s[e])}),function(e){try{return JSON.parse(JSON.stringify(e))}catch(e){r("corsImg.data is missing or invalid")}}(c.impl.options.corsImg.data||""));Object.keys(l).forEach(function(e){"string"==typeof l[e]&&(l[e]=l[e].replace("#{cors}",u))}),n.send(t?JSON.stringify(l):l)}else n.open("GET",u,!0),n.send();let i;function r(e){console.error(e),t("")}c.impl.options.imagePlaceholder&&(o=c.impl.options.imagePlaceholder.split(/,/))&&o[1]&&(i=o[1])}));return e.promise},uid:function(){return"u"+("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)+e++},delay:function(n){return function(t){return new Promise(function(e){setTimeout(function(){e(t)},n)})}},asArray:function(t){var n=[],o=t.length;for(let e=0;et.style.removeProperty(e)),["left","right","top","bottom"].forEach(e=>{t.style.getPropertyValue(e)&&t.style.setProperty(e,"0px")})))}e(c,u)}function t(){const l=d.uid();function t(i){const r=m(c,i),s=r.getPropertyValue("content");if(""!==s&&"none"!==s){const t=u.getAttribute("class")||"",n=(u.setAttribute("class",t+" "+l),document.createElement("style"));function e(){const e=`.${l}:`+i,t=(r.cssText?n:o)();return document.createTextNode(e+`{${t}}`);function n(){return`${r.cssText} content: ${s};`}function o(){const e=d.asArray(r).map(t).join("; ");return e+";";function t(e){const t=r.getPropertyValue(e),n=r.getPropertyPriority(e)?" !important":"";return e+": "+t+n}}}n.appendChild(e()),u.appendChild(n)}}[":before",":after"].forEach(function(e){t(e)})}function n(){d.isHTMLTextAreaElement(c)&&(u.innerHTML=c.value),d.isHTMLInputElement(c)&&u.setAttribute("value",c.value)}function o(){d.isSVGElement(u)&&(u.setAttribute("xmlns","http://www.w3.org/2000/svg"),d.isSVGRectElement(u))&&["width","height"].forEach(function(e){const t=u.getAttribute(e);t&&u.style.setProperty(e,t)})}}}(e,i,null,t)}).then(p).then(g).then(function(t){i.bgcolor&&(t.style.backgroundColor=i.bgcolor);i.width&&(t.style.width=i.width+"px");i.height&&(t.style.height=i.height+"px");i.style&&Object.keys(i.style).forEach(function(e){t.style[e]=i.style[e]});let e=null;"function"==typeof i.onclone&&(e=i.onclone(t));return Promise.resolve(e).then(function(){return t})}).then(function(e){let n=i.width||d.width(e),o=i.height||d.height(e);return Promise.resolve(e).then(function(e){return e.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(e)}).then(d.escapeXhtml).then(function(e){var t=(d.isDimensionMissing(n)?' width="100%"':` width="${n}"`)+(d.isDimensionMissing(o)?' height="100%"':` height="${o}"`);return`${e}`}).then(function(e){return"data:image/svg+xml;charset=utf-8,"+e})}).then(function(e){for(;0{w=null,v={}},2e4)}(),e})}function r(i,r){return f(i,r=r||{}).then(d.makeImage).then(function(e){var t="number"!=typeof r.scale?1:r.scale,n=function(e,t){let n=r.width||d.width(e),o=r.height||d.height(e);d.isDimensionMissing(n)&&(n=d.isDimensionMissing(o)?300:2*o);d.isDimensionMissing(o)&&(o=n/2);e=document.createElement("canvas");e.width=n*t,e.height=o*t,r.bgcolor&&((t=e.getContext("2d")).fillStyle=r.bgcolor,t.fillRect(0,0,e.width,e.height));return e}(i,t),o=n.getContext("2d");return o.msImageSmoothingEnabled=!1,o.imageSmoothingEnabled=!1,e&&(o.scale(t,t),o.drawImage(e,0,0)),n})}let h=null;function p(n){return e.resolveAll().then(function(e){var t;return""!==e&&(t=document.createElement("style"),n.appendChild(t),t.appendChild(document.createTextNode(e))),n})}function g(e){return n.inlineAll(e).then(function(){return e})}function y(e,t,r,s,n){const l=c.impl.options.copyDefaultStyles?function(t,e){var e=function(e){var t=[];do{if(e.nodeType===a){var n=e.tagName;if(t.push(n),E.includes(n))break}}while(e=e.parentNode,e);return t}(e),n=function(e){return("relaxed"!==t.styleCaching?e:e.filter((e,t,n)=>0===t||t===n.length-1)).join(">")}(e);if(v[n])return v[n];var o=function(){if(h)return h.contentWindow;var e=document.characterSet||"UTF-8",t=document.doctype,t=t?(`":"";return(h=document.createElement("iframe")).id="domtoimage-sandbox-"+d.uid(),h.style.visibility="hidden",h.style.position="fixed",document.body.appendChild(h),function(e,t,n,o){try{return e.contentWindow.document.write(t+`${o}`),e.contentWindow}catch(e){}var i=document.createElement("meta");i.setAttribute("charset",n);try{var r=document.implementation.createHTMLDocument(o),s=(r.head.appendChild(i),t+r.documentElement.outerHTML);return e.setAttribute("srcdoc",s),e.contentWindow}catch(e){}return e.contentDocument.head.appendChild(i),e.contentDocument.title=o,e.contentWindow}(h,t,e,"domtoimage-sandbox");function n(e){var t;return e?((t=document.createElement("div")).innerText=e,t.innerHTML):""}}(),e=function(e,t){let n=e.body;do{var o=t.pop(),o=e.createElement(o);n.appendChild(o),n=o}while(0 0) { + domtoimage.impl.options.useCredentials = + domtoimage.impl.options.useCredentialsFilters.filter( + (credentialsFilter) => url.search(credentialsFilter) >= 0 + ).length > 0; + } + if (domtoimage.impl.options.useCredentials) { request.withCredentials = true; } @@ -1404,8 +1421,8 @@ const docType = document.doctype; const docTypeDeclaration = docType ? `' + docType.publicId + )} ${escapeHTML(docType.systemId)}`.trim() + '>' : ''; // Create a hidden sandbox