Chrome 캔버스 이미지의 Three.js 보안 오류

Question

Chrome에서 캔버스 생성 이미지를로드하는 중에 문제가 발생합니다 (Firefox에서 작동).

는 " 'WebGLRenderingContext'에 'texImage2D'을 실행하지 못했습니다 : 크로스 출처 이미지를 BLOB에서 : ***는

나는이 다른 이미지 작업있어

를로드 할 수 없습니다, 그러나 이것은 하나 개의 I와 img.crossOrigin = "*" 또는 THREE.ImageUtils.crossOrigin = '*'가 작동하지 않는이 예 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

일반적인 보안, 즉 HTML 렌더링 된 텍스트의 SVG를 사용하고 있습니다, 어떤 아이디어가 어떻게

코드?이 라운드 얻을 수

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

확인 감사합니다. Erik. 이 문제가 해결 될 때까지 가능하지 않을 것 같습니다. 대신 지금 html2canvas에 의지 할 것입니다.