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。