클라이언트 측에서 Svg를 PNG로 변환

저는 사용자가 Svg에서 디자인을 생성 할 수있는 웹 기반 응용 프로그램에서 작업 중입니다. 나는 클라이언트 측에서 png 이미지 파일로 svg 디자인을 변환하고 싶다. 캔버스를 사용하는 해결책을 찾았습니다. Firefox에서 잘 작동하지만 크롬에서는 보안 오류가 발생합니다.클라이언트 측에서 Svg를 PNG로 변환

검사 덕분에 아래의 코드 : -

var mainsvg=document.getElementById('svgforImg');       
var canvas=document.getElementById('canvas');      
var ctx = canvas.getContext("2d"); 
         var data=mainsvg.innerHTML; 
         var DOMURL = self.URL || self.webkitURL || self; 
         var svg = new Blob([data], { 
           type: "image/svg+xml;charset=utf-8" 
         }); 
         var url = DOMURL.createObjectURL(svg); 
         var img = new Image(); 
img.onload = function() { 
           ctx.drawImage(img, 0, 0); 
           DOMURL.revokeObjectURL(url);         
           var imageurl = canvas.toDataURL("image/png"); 
}

지금 내 변수 이미지 URL은 'base64로 PNG'이미지가 포함되어 있습니다. 이것은 Firefox에서 작동합니다. 하지만 크롬 라인

var imageurl = canvas.toDataURL("image/png");

보안 오류가 발생합니다.

도움을 주시면 감사하겠습니다.

출처

2013-10-11 RashFlash

가능한 캔버스 [DOM 예외 18]의 복제본 (http://stackoverflow.com/questions/13829525/dom-exception-18-from-canvas) –

즉, 서버 측을 이동해야합니다. 크롬과 파이어 폭스 모두로 변환 된 이미지를 얻으려면 – RashFlash

예, 아마 (최신 개발 버전의 크롬을 요구할 수 없다면). svg가 간단하다면 canvg (http://code.google.com/p/canvg/)와 같은 행운을 누릴 수 있습니다. –

나는 이것이 this question과 관련이 있다고 생각합니다. SVG는 어떤 서버에서 시작 되었습니까? 애플리케이션이 다른 애플리케이션과 다른 경우 (하위 도메인이 중요 함을 기억하십시오!) 원 서버에서 원하는 http- 헤더를 추가 할 수 있습니다.

출처

2013-10-11 06:46:01 Markus

코드에서 볼 수 있듯이 SVG는 DOM에 있습니다. 캔버스가 만들어진 같은 장소 – RashFlash

클라이언트 측에서 Svg를 PNG로 변환

답변

관련 문제