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

Question

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

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

我已经将它与其他图像一起使用，但是对于这个我使用 SVG 来处理 html 呈现的文本，即这个例子 https://developer.mozilla.org/en-US/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。