캔버스의 toDataURL을 사용하여 svg 이미지의 xlink : href 태그에서 이미지를 가져 와서 png/jpg 이미지로 변환하는 방법.

Question

SVG 이미지의 xlink : href 태그에 이미지 경로가 포함되어 있습니다. 브라우저에서 svg 이미지를로드하면 올바르게 표시됩니다.

toDataURL을 사용하여 svg 이미지를 변환하면 변환 된 jpg 또는 png가 비어 있습니다.

` 
image.src = data:image/svg+xml;charset=utf-8,<svg%20xmlns="http: 

//www.w3.org/2000/svg"%20width="871"%20height="435"> <foreignObject%20x="0"%20y="0"%20width="100%"%20height="100%"><div%20id="networkDiagramViewContainer"%20ng-right-click="show_traffic_events($event)"%20class="geDiagramContainer"%20style="cursor:%20default;%20width:%20251px;%20height:%20261px;%20overflow:%20initial;"%20xmlns="http://www.w3.org/1999/xhtml"><svg%20xmlns="http://www.w3.org/2000/svg"%20style="width:%20100%;%20height:%20100%;%20display:%20block;%20min-width:%20251px;%20min-height:%20261px;%20background-color:%20rgb(255,%20255,%20255);%20background-image:%20none;"><g><g/><g><g%20style="visibility:%20visible;"><image%20x="170"%20y="180"%20width="80"%20height="80"%20xlink:href="http://192.168.50.225:9002/media/apps/components/networkdiagram/stencils/clipart/others/Tire_128x128.png"%20xmlns:xlink="http://www.w3.org/1999/xlink"%20style="pointer-events:none"/><rect%20visibility="hidden"%20pointer-events="fill"%20x="170"%20y="180"%20width="80"%20height="80"/></g><g%20style="visibility:%20visible;"><image%20x="40"%20y="50"%20width="80"%20height="80"%20xlink:href="http://192.168.50.225:9002/media/apps/components/networkdiagram/stencils/clipart/others/Suit_Man_Blue_128x128.png"%20xmlns:xlink="http://www.w3.org/1999/xlink"%20style="pointer-events:none"/><rect%20visibility="hidden"%20pointer-events="fill"%20x="40"%20y="50"%20width="80"%20height="80"/></g></g><g/><g/></g></svg></div></foreignObject></svg> 

var canvas = newCanvas(domNode); 
canvas.getContext('2d').drawImage(image, 0, 0); 
canvas.toDataURL('image/jpeg',1) 
` 

xlink : href 태그의 경로가 문제가되는지 알 수 없습니다.

var img = new Image(); 
var canvas = document.createElement('canvas'); 
canvas.width = this.width; 
canvas.height = this.height; 
// draw the loaded image 
canvas.getContext('2d').drawImage(this, 0, 0); 
// set our <image>'s href attribute to the dataURL of our canvas 
image.setAttributeNS(xlinkNS, 'href', canvas.toDataURL()); 

:

Answer 1

난 href 속성으로 설정 한 다음 toDataURL을 이용하여 각 이미지를 파싱하여이를 해결할 수 있었다