Three.js Security Error on Canvas Image in Chrome

Question

I'm having an issue loading canvas generated image in Chrome (works in Firefox).

"Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at blob:*** could not be loaded

I've got this working with other images, however with this one I'm using an SVG for html rendered text i.e. this example https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

The usual security img.crossOrigin = "*" or THREE.ImageUtils.crossOrigin = '*' isn't working, any ideas how to get round this?

Code

    $("body").append('<canvas id="canvas" style="border:2px solid black;" width="200"   height="200"></canvas>');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
               '<foreignObject width="100%" height="100%">' +
               '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
                html +
               '</div>' +
               '</foreignObject>' +
               '</svg>';

    var DOMURL = window.URL || window.webkitURL || window;

    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    svg.crossOrigin = "*";
    var url = DOMURL.createObjectURL(svg);

    img.onload = function () {
      ctx.drawImage(img, 0, 0);

      THREE.ImageUtils.crossOrigin = '*';
      var texture = THREE.ImageUtils.loadTexture(url);
      texture.needsUpdate = true;


        var posterText = new THREE.Mesh(
        new THREE.BoxGeometry(img.naturalWidth, img.naturalHeight,1),
            new THREE.MeshPhongMaterial({
                map: texture,
                transparent: true
            })
        );  


        DOMURL.revokeObjectURL(url);
    };

    img.crossOrigin = "*";
    img.src = url;

beek beek · Accepted Answer · 2014-12-17T20:37:51

OK Thanks Erik. Seems it's not going to be possible until this is fixed. Will resort to html2canvas instead for now.

Three.js Security Error on Canvas Image in Chrome

1 Answers