fix #4016; exporting with image fill

Author: junedchhipa

src/charts/common/bar/Helpers.js

@@ -185,7 +185,7 @@ export default class Helpers {
 
   getPathFillColor(series, i, j, realIndex) {
     const w = this.w
-    let fill = new Fill(this.barCtx.ctx)
+    let fill = this.barCtx.ctx.fill
 
     let fillColor = null
     let seriesNumber = this.barCtx.barOptions.distributed ? j : i

src/modules/Exports.js

@@ -20,25 +20,67 @@ class Exports {
   }
 
   getSvgString() {
-    const w = this.w
-    const width = w.config.chart.toolbar.export.width
-    let scale =
-      w.config.chart.toolbar.export.scale || width / w.globals.svgWidth
+    return new Promise((resolve) => {
+      const w = this.w
+      const width = w.config.chart.toolbar.export.width
+      let scale =
+        w.config.chart.toolbar.export.scale || width / w.globals.svgWidth
+
+      if (!scale) {
+        scale = 1 // if no scale is specified, don't scale...
+      }
+      let svgString = this.w.globals.dom.Paper.svg()
 
-    if (!scale) {
-      scale = 1 // if no scale is specified, don't scale...
-    }
-    let svgString = this.w.globals.dom.Paper.svg()
-    // in case the scale is different than 1, the svg needs to be rescaled
-    if (scale !== 1) {
       // clone the svg node so it remains intact in the UI
       const svgNode = this.w.globals.dom.Paper.node.cloneNode(true)
-      // scale the image
-      this.scaleSvgNode(svgNode, scale)
-      // get the string representation of the svgNode
-      svgString = new XMLSerializer().serializeToString(svgNode)
-    }
-    return svgString.replace(/ /g, ' ')
+
+      // in case the scale is different than 1, the svg needs to be rescaled
+
+      if (scale !== 1) {
+        // scale the image
+        this.scaleSvgNode(svgNode, scale)
+      }
+      // Convert image URLs to base64
+      this.convertImagesToBase64(svgNode).then(() => {
+        svgString = new XMLSerializer().serializeToString(svgNode)
+        resolve(svgString.replace(/ /g, ' '))
+      })
+    })
+  }
+
+  convertImagesToBase64(svgNode) {
+    const images = svgNode.getElementsByTagName('image')
+    const promises = Array.from(images).map((img) => {
+      const href = img.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
+      if (href && !href.startsWith('data:')) {
+        return this.getBase64FromUrl(href)
+          .then((base64) => {
+            img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', base64)
+          })
+          .catch((error) => {
+            console.error('Error converting image to base64:', error)
+          })
+      }
+      return Promise.resolve()
+    })
+    return Promise.all(promises)
+  }
+
+  getBase64FromUrl(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.crossOrigin = 'Anonymous'
+      img.onload = () => {
+        const canvas = document.createElement('canvas')
+        canvas.width = img.width
+        canvas.height = img.height
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 0, 0)
+        resolve(canvas.toDataURL())
+      }
+      img.onerror = reject
+      img.src = url
+    })
   }
 
   cleanup() {
@@ -70,11 +112,15 @@ class Exports {
   }
 
   svgUrl() {
-    this.cleanup()
-
-    const svgData = this.getSvgString()
-    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
-    return URL.createObjectURL(svgBlob)
+    return new Promise((resolve) => {
+      this.cleanup()
+      this.getSvgString().then((svgData) => {
+        const svgBlob = new Blob([svgData], {
+          type: 'image/svg+xml;charset=utf-8',
+        })
+        resolve(URL.createObjectURL(svgBlob))
+      })
+    })
   }
 
   dataURI(options) {
@@ -100,35 +146,37 @@ class Exports {
       ctx.fillStyle = canvasBg
       ctx.fillRect(0, 0, canvas.width * scale, canvas.height * scale)
 
-      const svgData = this.getSvgString()
+      this.getSvgString().then((svgData) => {
+        const svgUrl = 'data:image/svg+xml,' + encodeURIComponent(svgData)
+        let img = new Image()
+        img.crossOrigin = 'anonymous'
 
-      const svgUrl = 'data:image/svg+xml,' + encodeURIComponent(svgData)
-      let img = new Image()
-      img.crossOrigin = 'anonymous'
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0)
 
-      img.onload = () => {
-        ctx.drawImage(img, 0, 0)
-
-        if (canvas.msToBlob) {
-          // Microsoft Edge can't navigate to data urls, so we return the blob instead
-          let blob = canvas.msToBlob()
-          resolve({ blob })
-        } else {
-          let imgURI = canvas.toDataURL('image/png')
-          resolve({ imgURI })
+          if (canvas.msToBlob) {
+            // Microsoft Edge can't navigate to data urls, so we return the blob instead
+            let blob = canvas.msToBlob()
+            resolve({ blob })
+          } else {
+            let imgURI = canvas.toDataURL('image/png')
+            resolve({ imgURI })
+          }
         }
-      }
 
-      img.src = svgUrl
+        img.src = svgUrl
+      })
     })
   }
 
   exportToSVG() {
-    this.triggerDownload(
-      this.svgUrl(),
-      this.w.config.chart.toolbar.export.svg.filename,
-      '.svg'
-    )
+    this.svgUrl().then((url) => {
+      this.triggerDownload(
+        url,
+        this.w.config.chart.toolbar.export.svg.filename,
+        '.svg'
+      )
+    })
   }
 
   exportToPng() {

src/modules/Fill.js

@@ -14,6 +14,7 @@ class Fill {
 
     this.opts = null
     this.seriesIndex = 0
+    this.patternIDs = []
   }
 
   clippedImgArea(params) {
@@ -176,23 +177,29 @@ class Fill {
       let imgSrc = cnf.fill.image.src
 
       let patternID = opts.patternID ? opts.patternID : ''
-      this.clippedImgArea({
-        opacity: fillOpacity,
-        image: Array.isArray(imgSrc)
-          ? opts.seriesNumber < imgSrc.length
-            ? imgSrc[opts.seriesNumber]
-            : imgSrc[0]
-          : imgSrc,
-        width: opts.width ? opts.width : undefined,
-        height: opts.height ? opts.height : undefined,
-        patternUnits: opts.patternUnits,
-        patternID: `pattern${w.globals.cuid}${
-          opts.seriesNumber + 1
-        }${patternID}`,
-      })
-      pathFill = `url(#pattern${w.globals.cuid}${
+      const patternKey = `pattern${w.globals.cuid}${
         opts.seriesNumber + 1
-      }${patternID})`
+      }${patternID}`
+
+      if (this.patternIDs.indexOf(patternKey) === -1) {
+        console.log('patternKey', patternKey)
+        this.clippedImgArea({
+          opacity: fillOpacity,
+          image: Array.isArray(imgSrc)
+            ? opts.seriesNumber < imgSrc.length
+              ? imgSrc[opts.seriesNumber]
+              : imgSrc[0]
+            : imgSrc,
+          width: opts.width ? opts.width : undefined,
+          height: opts.height ? opts.height : undefined,
+          patternUnits: opts.patternUnits,
+          patternID: patternKey,
+        })
+
+        this.patternIDs.push(patternKey)
+      }
+
+      pathFill = `url(#${patternKey})`
     } else if (fillType === 'gradient') {
       pathFill = gradientFill
     } else if (fillType === 'pattern') {

src/modules/helpers/InitCtxVariables.js

@@ -8,6 +8,7 @@ import Crosshairs from '../Crosshairs'
 import Grid from '../axes/Grid'
 import Graphics from '../Graphics'
 import Exports from '../Exports'
+import Fill from '../Fill.js'
 import Options from '../settings/Options'
 import Responsive from '../Responsive'
 import Series from '../Series'
@@ -90,6 +91,7 @@ export default class InitCtxVariables {
     this.ctx.crosshairs = new Crosshairs(this.ctx)
     this.ctx.events = new Events(this.ctx)
     this.ctx.exports = new Exports(this.ctx)
+    this.ctx.fill = new Fill(this.ctx)
     this.ctx.localization = new Localization(this.ctx)
     this.ctx.options = new Options()
     this.ctx.responsive = new Responsive(this.ctx)