Chrome中Canvas图像上的Three.js安全错误

Question

我在Chrome中加载画布生成的图像时遇到问题（在Firefox中工作）。

“无法在'WebGLRenderingContext'上执行'texImage2D'：无法加载blob：***处的跨源图像

我已经将其与其他图像一起使用，但是与此同时，我正在使用SVG来生成html呈现的文本，即此示例https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

通常的安全性img.crossOrigin = "*"或THREE.ImageUtils.crossOrigin = '*'不起作用，有什么办法解决这个问题吗？

码

    $("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;

Answer 1

好，谢谢埃里克。 似乎直到解决此问题才有可能。 现在将改为使用html2canvas。