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를 따르는 경우처럼, image
의 href
이 xlink:href
을해야한다)? : D
canvg 캔버스가 이미지를 올바르게 렌더링합니까? 내가 함께 할 수있는 실제 예제에 연결할 수 있습니까? – jbeard4
@Shikiryu 해결책을 찾았습니까? 나는 비슷한 [질문] (http://stackoverflow.com/questions/16556447/merst-images-from-raphael-svg) – vibskov