Nicht in der Lage, SVG mit Text und Bild zu Canvas

zu speichern Ich zeichne den Text in SVG auf ein Bild basierend auf Benutzereingabe in Textfeld.
Ich möchte sowohl Bild und Text von SVG auf Canvas zu erfassen, so dass
ich es in Base 64 Zeichenfolge konvertieren kann, nachdem es auf Leinwand angezeigt. Ich bin in der Lage, erfassen Sie den Text im Canvas aber Bild wird nicht angezeigt.Nicht in der Lage, SVG mit Text und Bild zu Canvas

<body> 
    <svg id="svgelem" class="scaling-svg" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <image xlink:href="http://i.imgur.com/PWSOy.jpg" x="0" y="0" height="200" width="200" /> 
     <text x="38%" y="68%" alignment-baseline="middle" text-anchor="middle" font-family="Calibri" font-size="25" id="textbox" fill="black"></text> 
    </g> 
    </svg> 
    <input type="text" name="name" id="name" maxlength="26" /> 
    <input type="submit" id="drawText" value="Draw It" /> 

    <div style="clear:both;"></div> 
    <br/> 
    <canvas id="canvas" style="border:2px solid black;" width="250" height="250"> 
    </canvas> 
</body>

Werfen Sie einen Blick auf jsfiddle

Hier ist ein Link
https://jsfiddle.net/atulpr/0yhpygue/14/

Quelle

2016-05-12 Atul Prajapati

Dies ist das gleiche Problem wie in: Render SVG with external references to Canvas

Sie müssen das Bild mit Daten URI einbetten, anstatt Verwenden der externen URL

function embedImage(imageElement) { 
    var image = new Image(); 
    image.setAttribute('crossOrigin', 'anonymous'); 
    image.src = imageElement.getAttribute('xlink:href'); 
    image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    canvas.getContext('2d').drawImage(image, 0, 0); 
    imageElement.setAttribute('xlink:href', canvas.toDataURL('image/png')); 
    } 
}

https://jsfiddle.net/0yhpygue/15/

Quelle

2016-05-15 05:44:50 szym

vielen Dank, es funktionierte! –

Der in jsfiddle bereitgestellte Code funktioniert in Chrome, aber nicht in Firefox und nicht in IE. Auch in IE wird der Text nicht angezeigt, wenn es in ein Textfeld geschrieben wird, siehe neue Geige https://jsfiddle.net/atulpr/0yhpygue/19/ –

Nicht in der Lage, SVG mit Text und Bild zu Canvas

Antwort

Verwandte Themen