2010-11-18 2 views
8

Raphael JS (이미지를 드래그하여 회전 할 수 있으므로 사용자)가 생성 한 SVG로 변환하려고합니다. 나는이 Convert SVG to image (JPEG, PNG, etc.) in the browser을 따라 갔지만 여전히 얻을 수 없다.캔버스에 Raphael JS에서 생성 한 SVG를 png로 저장할 때 문제가 발생했습니다.

쉽지 만 내가 잘못한 부분에 손가락을 대지 못합니다.

#ec으로 div에 내 svg가 있고 id이고 캔버스의 값은 #canvas입니다. SVG의 XML입니다

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"> 
<desc>Created with Raphael</desc> 
<defs></defs> 
<image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image> 
<rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect> 
<circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle> 
<image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image> 
<image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image> 
<image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> 
<image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> 
<image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image> 
</svg> 

을 내가 canvg documentation을 믿는다면, 그것은 좋다 :

function saveDaPicture(){ 
    var img = document.getElementById('canvas').toDataURL("image/png"); 
    $('body').append('<img src="'+img+'"/>'); 
} 
$('#save').click(function(){ 
    var svg = $('#ec').html(); 
    alert(svg); 
    canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); 
}); 

경고

이 날 수 있습니다.

어쨌든이 코드를 사용하면 변환 된 이미지 데이터가 있어야하는 변수 img에 svg 크기의 빈 png 데이터가 있습니다.

같아요 유일한 것은 라파엘 JS에 의해 생성 된 SVG 잘 canvg에 대한 형식의되지 않는다는 점이다

누구든지이 문제에 생각이있어 (내가 the W3C recommandations를 따르는 경우처럼, imagehrefxlink:href을해야한다)? : D

+1

canvg 캔버스가 이미지를 올바르게 렌더링합니까? 내가 함께 할 수있는 실제 예제에 연결할 수 있습니까? – jbeard4

+0

@Shikiryu 해결책을 찾았습니까? 나는 비슷한 [질문] (http://stackoverflow.com/questions/16556447/merst-images-from-raphael-svg) – vibskov

답변

1

SVG - Edit으로 작업하고 SVG 이미지를 생성 했으므로 서버에 ImageMagic을 설치했습니다. 이미 설치했을 것입니다.

설치가 끝나면 터미널에서 "convert foo.svg foo.png"와 같은 명령을 실행하면됩니다. php를 사용하고 있다면 다음을 할 수 있습니다 :

shell_exec("convert image.svg image.png"); 

PHP에서 완료되었습니다.

+0

Unfortunatly, 나는 내 서버에 ImageMagick을 공유하지 않아서 설치할 수 없다. 그것도 설치하십시오. 그럼에도 불구하고 누군가 내 문제와 동일한 문제를 겪는다면 좋은 힌트입니다. +1 – Shikiryu

6

canvgSVG 데이터 파일 경로 또는

canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true}); 

하지만 코드에서

, 당신이 사업부 #ec의 HTML 콘텐츠를 전달하는 한 줄의 문자열을 받아 모두 jQuery의 $.html() 및 DOM의 innerHTML 메서드는 요소의 HTML 내용을 그대로 반환하므로 대부분 여러 줄로 구성됩니다.

canvg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"> 

을 파일 경로로이 여러 줄의 HTML 콘텐츠를 해석하고 잘못된 URL에서 데이터를 가져 오기 위해 시도합니다.

SVG에서 Canvas 로의 변환 프로세스가 실패하여 이미지가 예상대로 나오지 않습니다. 여기

function saveDaPicture(){ 
    var img = document.getElementById('canvas').toDataURL("image/png"); 
    $('body').append('<img src="'+img+'"/>'); 
} 

$('#save').click(function(){ 
    var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+</g, "<"); 
          // strips off all spaces between tags 
    //alert(svg); 
    canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true}); 
}); 
+0

당신이 지적 했으니까요. JS에서 다중 행을 단 한 줄로 만드는 방법이 없습니까? – Shikiryu

+0

물론 여러 줄을 싱글 라인으로 변환 할 수 있습니다. 내 답변을 업데이트하고 있습니다. –

2

svgfix.js이 오류를 해결할 작동해야 업데이트 버전입니다. 이 블로그 게시물을 보시오 Export Raphael Graphic to Image

+2

안녕하세요 Ignacio! 여기에 스택 오버플로, [링크 전용 답변은 답변으로 간주되지 않습니다] (http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers/8259 # 8259). 일부 코드로 풀어 내지 않으면 삭제할 때 [faq # deletion] 섹션, 특히 "* 질문에 근본적으로 대답하지 않는 대답은 삭제 될 수 있습니다."라는 답변이 삭제 될 수 있습니다. 외부 사이트에 대한 링크보다 많음 * " – jadarnel27

+2

이것은 가장 좋은 답변이기 때문에 수치 스럽습니다. – Homer6

+1

참고로,이 경우 Raphael에서 생성하지 않고 구 브라우저에서 작동하지 않는 ''요소가 필요합니다. 확실히 해결 방법이 있지만이를 명심하십시오. – Terry

관련 문제