displaying content images in 3d env

src/components/mixins.js

@@ -35,6 +35,29 @@ export default {
       }
       // console.log('createLabelCanvas', ctx)
       return ctx.canvas
+    },
+    createImgCanvas (src) {
+      // let vnode = this
+      return new Promise((resolve, reject) => {
+        var img = new Image()
+        // XSS resolution
+        // https://www.html5gamedevs.com/topic/31184-solved-cors-problem-with-dynamictexture-on-some-servers-tainted-canvas/
+        img.crossOrigin = 'Anonymous'
+        img.src = src
+        img.onload = function () {
+          // console.log('img loaded', this)
+          const ctx = document.createElement('canvas').getContext('2d')
+          ctx.canvas.width = this.width
+          ctx.canvas.height = this.height
+          ctx.fillStyle = 'red'
+          // ctx.fillRect(0, 0, this.width, this.height)
+          ctx.drawImage(this, 0, 0, this.width, this.height)
+          resolve({ img: this, canvas: ctx.canvas })
+        }
+        img.onerror = function () {
+          reject(src)
+        }
+      })
     }
   }
 }