रैफेल जेएस द्वारा कैनवास

Question

में उत्पन्न एसएनजी के रूप में सहेजने में समस्या Raphael JS (और उपयोगकर्ता, क्योंकि आप छवियों को खींच और घुमा सकते हैं) द्वारा उत्पन्न एक एसवीजी को परिवर्तित करने की कोशिश कर रहे हैं। मैंने इस Convert SVG to image (JPEG, PNG, etc.) in the browser का पालन किया लेकिन अभी भी इसे प्राप्त नहीं किया जा सकता है।

यह आसान होना चाहिए लेकिन मैं अपनी उंगली को जो भी गलत करता हूं उस पर नहीं डाल सकता।

मुझे #ec के साथ id के साथ एक div में मेरा svg मिला और कैनवास का #canvas है।

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}); 
}); 

चेतावनी मुझे देता है:

<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> 

जो svg की एक्सएमएल है और यदि मेरा मानना ​​है कि canvg documentation, यह अच्छा है।

वैसे भी, इस कोड के साथ, परिवर्तनीय img, जिसमें परिवर्तित छवि डेटा होना चाहिए, को svg के आयामों के साथ एक खाली पीएनजी का डेटा मिला।

केवल एक चीज मुझे लगता है कि राफेल जे एस द्वारा उत्पन्न svg अच्छी तरह से canvg के लिए स्वरूपित नहीं है (जैसे, image की hrefxlink:href होना चाहिए अगर मैं the W3C recommandations का पालन करें)

किसी को भी इस समस्या पर एक विचार है? : डी

Answer 1

मैंने SVG - Edit के साथ काम किया और एसवीजी छवियां जेनरेट कीं, हमने सर्वर पर ImageMagic इंस्टॉल किया था (आपने शायद इसे पहले ही इंस्टॉल किया है)।

एक बार स्थापित होने पर आपको टर्मिनल में "foo.svg foo.png" कन्वर्ट जैसे कमांड को निष्पादित करने की आवश्यकता होती है। यदि आप php का उपयोग कर रहे हैं तो आप कर सकते हैं:

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

PHP में और यह हो गया है।

Answer 2

canvgSVG डेटा फ़ाइल पथ या एक एकल लाइन स्ट्रिंग के रूप में

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

लेकिन अपने कोड में, अपने div #ec के HTML सामग्री से गुजर रहे हैं स्वीकार करता है दोनों jQuery के $.html() और डोम के innerHTML विधियां एक तत्व की HTML सामग्री को वापस लौटाती हैं, इसलिए शायद अधिकतर पंक्तियों में।

canvg, फ़ाइल पथ के रूप में इस बहु लाइन html सामग्री की व्याख्या

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

और विकृत यूआरएल से डेटा लाने की कोशिश करता है।

तो कैनवास रूपांतरण प्रक्रिया में एसवीजी असफल रहा और यही कारण है कि आप छवि को उम्मीद के रूप में नहीं प्राप्त कर रहे हैं।

यहाँ एक अद्यतन संस्करण है कि काम करना चाहिए,

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}); 
}); 

Answer 3

svgfix.js इस त्रुटियों का समाधान होगा है। इस ब्लॉग पोस्ट पर एक नज़र डालें Export Raphael Graphic to Image