From f67f16c7b869bb169dc0cda9eb5a73318285367b Mon Sep 17 00:00:00 2001 From: Caio Campos Date: Tue, 17 Nov 2020 12:27:45 -0300 Subject: [PATCH 1/2] Added new option to set a custom timeout I have a process that generates an image from many images, due to the amount of images the loading often takes much more than 30 seconds --- src/dom-to-image.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/dom-to-image.js b/src/dom-to-image.js index 27201ac9..34abff42 100644 --- a/src/dom-to-image.js +++ b/src/dom-to-image.js @@ -11,7 +11,9 @@ // Default is to fail on error, no placeholder imagePlaceholder: undefined, // Default cache bust is false, it will use the cache - cacheBust: false + cacheBust: false, + // Default timeout + timeout: 30000 }; var domtoimage = { @@ -147,6 +149,12 @@ } else { domtoimage.impl.options.cacheBust = options.cacheBust; } + + if(typeof(options.timeout) === 'undefined') { + domtoimage.impl.options.timeout = defaultOptions.timeout; + } else { + domtoimage.impl.options.timeout = options.timeout; + } } function draw(domNode, options) { @@ -461,7 +469,7 @@ } function getAndEncode(url) { - var TIMEOUT = 30000; + var TIMEOUT = domtoimage.impl.options.timeout; if(domtoimage.impl.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 From bef87f99bc5cd65505dc3d66b52cb951334e6e6d Mon Sep 17 00:00:00 2001 From: Caio Campos <20524962+caiocampos@users.noreply.github.com> Date: Thu, 2 Dec 2021 09:32:34 -0300 Subject: [PATCH 2/2] Adicionado novo modo de cacheBust --- src/dom-to-image.js | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/src/dom-to-image.js b/src/dom-to-image.js index 34abff42..4f1a14a6 100644 --- a/src/dom-to-image.js +++ b/src/dom-to-image.js @@ -10,10 +10,12 @@ var defaultOptions = { // Default is to fail on error, no placeholder imagePlaceholder: undefined, - // Default cache bust is false, it will use the cache - cacheBust: false, - // Default timeout - timeout: 30000 + // Default hard cache bust is false, it will use the cache + hardCacheBust: false, + // Default cache bust is false, it will use the cache + cacheBust: false, + // Default timeout + timeout: 30000 }; var domtoimage = { @@ -49,7 +51,9 @@ * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only), defaults to 1.0. * @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 - * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url + * @param {Boolean} options.hardCacheBust - set to true to cache bust by appending the time to the request url + * @param {Boolean} options.cacheBust - set to true to cache bust by adding Cache-Control to the header + * @param {Boolean} options.timeout - set to true to set a timeout * @return {Promise} - A promise that is fulfilled with a SVG image data URL * */ function toSvg(node, options) { @@ -144,6 +148,13 @@ domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder; } + if(typeof options.hardCacheBust === 'undefined') { + domtoimage.impl.options.hardCacheBust = defaultOptions.hardCacheBust; + } else { + domtoimage.impl.options.hardCacheBust = options.hardCacheBust; + } + + if(typeof(options.cacheBust) === 'undefined') { domtoimage.impl.options.cacheBust = defaultOptions.cacheBust; } else { @@ -470,7 +481,7 @@ function getAndEncode(url) { var TIMEOUT = domtoimage.impl.options.timeout; - if(domtoimage.impl.options.cacheBust) { + if(domtoimage.impl.options.hardCacheBust) { // 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(); @@ -484,6 +495,13 @@ request.responseType = 'blob'; request.timeout = TIMEOUT; request.open('GET', url, true); + + if(domtoimage.impl.options.cacheBust || domtoimage.impl.options.hardCacheBust) { + request.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0"); + request.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT"); + request.setRequestHeader("Pragma", "no-cache"); + } + request.send(); var placeholder;