<canvas>

Question

का उपयोग करके बहुत बड़े एसवीजी को पीएनजी में कनवर्ट करें। मैं एक बड़े एसवीजी (इसका डेटा यूआरएल लगभग 750000 - 1000000 वर्ण) को पीएनजी में परिवर्तित करने की कोशिश कर रहा हूं, एक छवि के माध्यम से और कैनवास में डेटा यूआरएल पास करके, लेकिन छवि है केवल एसवीजी के 1/4 लोड हो रहा है।

के माध्यम से बनाया जा रहा है:

var svg_xml = (new XMLSerializer()).serializeToString(svg), 
    url = 'data:image/svg+xml;base64,' + btoa(svg_xml); 

var img = new Image(); 
img.width = 730; 
img.height = 300; 
img.onload = function(){ 
    var canvas = document.create('canvas'); 
    canvas.width = 730; 
    canvas.height = 300; 

    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0, 730, 300); 

    callbackFn(canvas.toDataURL('image/png'); 
} 
img.src = url 

संपादित

मैं canvg को लागू करने एसवीजी आकर्षित करने के लिए कोशिश की है लेकिन DataURL उत्पादित एक खाली छवि में परिणाम:

var svg_xml = (new XMLSerializer()).serializeToString(svg); 
var canvas = document.createElement('canvas'); 
canvas.width = 730; 
canvas.height = 300; 

var ctx = canvas.getContext('2d'); 
ctx.drawSvg(svg_xml, 0, 0, 730, 300); 
callbackFn(canvas.toDataURL('image/png'); 

वहाँ है मैंने जिस विधि का उपयोग किया है, उसके साथ कुछ भी गलत है?

आगे संपादित

मैं अब काफी विश्वास है कि यह कैनवास के रूप में मैं एक ही प्रभाव के लिए एक ब्लॉब समाधान को लागू करने की कोशिश की गई सम्पूर्ण छवि आकर्षित करने में नाकाम रहने है कर रहा हूँ: फिर

var svg_xml = (new XMLSerializer()).serializeToString(svg), 
    blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}), 
    url = window.URL.createObjectURL(blob); 

var img = new Image(); 
img.width = 730; 
img.height = 300; 
img.onload = function(){ 
    var canvas = document.create('canvas'); 
    canvas.width = 730; 
    canvas.height = 300; 

    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0, 730, 300); 

    window.URL.revokeObjectURL(url); 
    callbackFn(canvas.toDataURL('image/png'); 
} 
img.src = url 

छवि ठीक लोड करता है और यूआरएल पर जा रहा है (इसे रद्द करने से पहले) छवि को ठीक से प्रदर्शित करता है।

कैनवास डेटाURL की लंबाई सुसंगत नहीं है इसलिए मुझे नहीं लगता कि यह अधिकतम है, क्या कैनवास आकार का पता लगाने का कोई तरीका है? एप्लिकेशन केवल क्रोम और फ़ायरफ़ॉक्स के लिए समर्थित है।

Answer 1

Working fiddle.

HTML:

<div> 
     <svg xmlns="http://www.w3.org/2000/svg" 
       width="526" height="233"> 
      <rect x="13" y="14" width="500" height="200" rx="50" ry="100" 
       fill="none" stroke="blue" stroke-width="10" /> 
     </svg> 
     <a id='imgId'>Save</a> 
    </div> 
    <canvas></canvas> 

जावास्क्रिप्ट:

var svg = document.getElementsByTagName('svg')[0]; 
var svg_xml = (new XMLSerializer()).serializeToString(svg), 
    blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}), 
    url = window.URL.createObjectURL(blob); 

var img = new Image(); 
img.width = 730; 
img.height = 300; 
img.onload = function(){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = 730; 
    canvas.height = 300; 

    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0, 730, 300); 

    window.URL.revokeObjectURL(url); 
    var canvasdata = canvas.toDataURL('image/png'); 
    var a = document.getElementById('imgId'); 
    a.download = "export_" + Date.now() + ".png"; 
    a.href=canvasdata; 
} 
img.src = url 

आपका प्रश्न:

क्यों छवि केवल एसवीजी का 1/4 के बारे में लोड कर रहा है?

उत्तर:

बस का पालन करें इन नियमों:

1. <rect/> + width<rect/> < = width की <svg/>
2. y की की <rect/> + height<rect/> < = heightके के की

उदाहरण के लिए:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200"> 
    <rect x="10" y="10" width="550" height="250" rx="50" ry="100" 
        fill="none" stroke="blue" stroke-width="10" /> 
</svg> 

यहाँ, <rect/> = 10 की x, <rect/> = 550 की चौड़ाई, <svg> = 500

तो

की चौड़ाई, 10 + 550>500

इस मामले में छवि आंशिक रूप से प्रस्तुत की जाएगी।

आशा है कि यह आपकी समस्या का समाधान करेगा।