Suchen
Inside Forum
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > andere (Programmier-)Sprachen > JavaScript

JavaScript Alles rund um JavaScript, Ajax und die diversen JS-Frameworks.

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 05.04.2018, 09:49
Mathias05 Mathias05 ist offline
Engagierter Besucher
 
Registriert seit: 12.12.2006
Beiträge: 158
Standard svg bild in canvas

hallo,
ich möchte in ein canvas element svg bilder einfügen. an sich ja kein Problem, denn die svg werden automatisch in Pixel Bilder konvertiert. ich habe nun ein SVG, relativ einfach, mit 7 verschiedenen Pfaden und Füllungen. im Firefox und Chrome wird das Bild richtig convertiert und hat auch im canvas nur 7 Farben. wenn ich das gleiche im Edge mache, hat das Bild 18 Farben. dabei ist die Abweichung nur ein "Zähler" im RGB Wert. Im Edge Browser wird also das Bild irgendwie verändert, Interpolierung, AntiAlias, irgendwas in der Art. Das Ändern des SVG Headers verändert das Ergebnis. Aber besser als 18 Farben ist nicht. Manche Einstellungen bringen auch 40 Farben hervor. wie muss ich den svg Header festlegen, dass des keine Farbanpassungen gibt? oder kann man im Javscript Code noch etwas einstellen um das zu verhindern. imageSmoothingEnabled brints jedenfalls nicht.

Hier das SVG

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW SE -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="230px" height="250px" version="1.1" shape-rendering="crispEdges" text-rendering="crispEdges"
image-rendering="optimizeSpeed" fill-rule="nonzero" clip-rule="nonzero"  
viewBox="0 0 230 250"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Ebene_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path id="_203956960" fill="#009EB9" fill-rule="nonzero" d="M24 0l6 0c8,5 11,15 21,17 8,2 16,-3 24,-5 25,-5 50,-5 75,-1 10,1 19,8 29,6 9,-2 13,-12 20,-17l6 0c17,35 5,76 9,114 -2,-4 -8,-4 -11,0 -16,15 -27,35 -33,55 -9,-20 -34,-28 -55,-27 -21,-2 -46,7 -55,27 -7,-21 -17,-41 -33,-57 -3,-3 -9,-3 -11,1 3,-37 -8,-78 8,-113zm13 44l0 0c-22,19 -20,58 4,74 21,16 52,11 67,-10 2,4 4,8 6,12 3,-3 4,-7 7,-11 16,25 57,24 74,0 16,-19 13,-48 -5,-65 -22,-22 -65,-13 -76,17 -12,-29 -54,-39 -77,-17zm31 131c6,0 10,8 17,6 4,0 8,-8 11,-5 -2,12 -26,11 -28,-1zm33 0c6,0 10,8 16,6 5,0 8,-8 12,-5 -2,12 -27,11 -28,-1zm32 0c6,0 10,8 17,6 4,0 8,-8 11,-5 -2,12 -26,11 -28,-1zm-90 12c5,3 9,7 14,9 2,17 19,28 35,32 -10,0 -20,-4 -29,-8 -9,-5 -18,-13 -23,-22 1,-4 2,-7 3,-11zm143 1c2,4 3,8 4,12 -5,9 -15,15 -24,20 -9,4 -18,8 -28,8 16,-4 32,-14 35,-32 5,-2 9,-5 13,-8zm-102 3c6,-1 10,8 16,5 5,1 8,-7 12,-4 -2,12 -27,11 -28,-1zm34 0c5,-1 9,8 16,5 4,1 8,-7 12,-4 -3,12 -27,11 -28,-1zm-17 16c6,-1 10,7 16,5 5,1 8,-8 12,-4 -2,12 -27,11 -28,-1z"/>
  <path id="_205890256" fill="#82D3C4" fill-rule="nonzero" d="M60 169c9,-20 34,-29 55,-27 21,-1 46,7 55,27 -2,9 -6,21 3,27 -3,18 -19,28 -35,32l-1 0c-15,1 -30,2 -45,0l0 0c-16,-4 -33,-15 -35,-32 9,-7 4,-18 3,-27zm8 6l0 0c2,12 26,13 28,1 -3,-3 -7,5 -11,5 -7,2 -11,-6 -17,-6zm33 0l0 0c1,12 26,13 28,1 -4,-3 -7,5 -12,5 -6,2 -10,-6 -16,-6zm32 0l0 0c2,12 26,13 28,1 -3,-3 -7,5 -11,5 -7,2 -11,-6 -17,-6zm-49 16l0 0c1,12 26,13 28,1 -4,-3 -7,5 -12,4 -6,3 -10,-6 -16,-5zm34 0l0 0c1,12 25,13 28,1 -4,-3 -8,5 -12,4 -7,3 -11,-6 -16,-5zm-17 16l0 0c1,12 26,13 28,1 -4,-4 -7,5 -12,4 -6,2 -10,-6 -16,-5zm-64 -163c23,-22 65,-12 77,17 11,-30 54,-39 76,-17 18,17 21,46 5,65 -17,24 -58,25 -74,0 1,-5 8,-12 5,-17 -7,-2 -15,-1 -22,-1 -4,6 2,12 4,17 -15,21 -46,26 -67,10 -24,-16 -26,-55 -4,-74zm25 0l0 0c-19,2 -35,22 -31,41 3,19 22,34 41,30 20,-2 34,-22 31,-41 -3,-19 -22,-33 -41,-30zm88 6l0 0c-14,2 -26,16 -25,30 0,16 14,30 30,29 15,0 30,-14 29,-30 0,-17 -17,-32 -34,-29z"/>
  <path id="_208859976" fill="#E8E3D9" fill-rule="nonzero" d="M62 44c19,-3 38,11 41,30 3,19 -11,39 -31,41 -19,4 -38,-11 -41,-30 -4,-19 12,-39 31,-41zm9 15l0 0c-12,2 -21,14 -18,26 2,12 14,21 26,19 12,-2 21,-15 19,-27 -2,-12 -15,-21 -27,-18zm79 -9c17,-3 34,12 34,29 1,16 -14,30 -29,30 -16,1 -30,-13 -30,-29 -1,-14 11,-28 25,-30zm-8 15l0 0c-9,2 -15,12 -13,20 3,13 22,17 29,6 10,-11 -2,-29 -16,-26zm-77 3c9,-3 11,11 3,12 -8,2 -10,-11 -3,-12zm73 5c5,-2 8,7 4,9 -6,3 -10,-6 -4,-9z"/>
  <path id="_208859352" fill="#000000" fill-rule="nonzero" d="M71 59c12,-3 25,6 27,18 2,12 -7,25 -19,27 -12,2 -24,-7 -26,-19 -3,-12 6,-24 18,-26zm-6 9l0 0c-7,1 -5,14 3,12 8,-1 6,-15 -3,-12zm77 -3c14,-3 26,15 16,26 -7,11 -26,7 -29,-6 -2,-8 4,-18 13,-20zm-4 8l0 0c-6,3 -2,12 4,9 4,-2 1,-11 -4,-9z"/>
  <path id="_208859424" fill="#CF132B" fill-rule="nonzero" d="M104 91c7,0 15,-1 22,1 3,5 -4,12 -5,17 -3,4 -4,8 -7,11 -2,-4 -4,-8 -6,-12 -2,-5 -8,-11 -4,-17z"/>
  <path id="_208859688" fill="#003882" fill-rule="nonzero" d="M16 113c2,-4 8,-4 11,-1 16,16 26,36 33,57 1,9 6,20 -3,27 -5,-2 -9,-6 -14,-9 -1,4 -2,7 -3,11 -4,11 -14,3 -18,-3 -3,5 -5,12 -11,14 -9,-1 -9,-10 -10,-17 -2,-27 -1,-56 15,-79zm187 1c3,-4 9,-4 11,0 17,27 20,62 12,92 -7,10 -16,-3 -18,-10 -4,6 -13,14 -18,4 -1,-4 -2,-8 -4,-12 -4,3 -8,6 -13,8 -9,-6 -5,-18 -3,-27 6,-20 17,-40 33,-55z"/>
  <path id="_205262072" fill="#C27C05" fill-rule="nonzero" d="M66 244c-9,-3 -11,-18 -3,-24 9,4 19,8 29,8l0 0c-3,8 0,16 4,22l-3 0c-8,-2 -10,-11 -11,-18 -6,5 -1,12 1,17 -12,-1 -17,-13 -13,-23 -7,2 -4,13 -4,18zm72 -16c10,0 19,-4 28,-8 9,6 6,20 -3,24 1,-6 3,-16 -3,-18 3,10 -1,22 -13,22 2,-4 7,-11 1,-16 -1,8 -3,17 -11,18l-5 0c6,-5 8,-14 5,-22l1 0z"/>
 </g>
</svg>
Mit Zitat antworten
  #2  
Alt 05.04.2018, 22:12
Kasalop Kasalop ist offline
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.799
Standard AW: svg bild in canvas

Tja, Willkommen in der Welt der Webentwicklung

Der IE / Edge macht eben immer sein eigenes Ding. Was du mal versuchen könntest, ist dein svg vorher per XMLSerializer in einen String umzuwandeln und diesen dann per data-url in ein image zu laden. das kannst du dann wieder in ein canvas malen. Evtl. bleiben dir so deine Farben erhalten. Habe ich aber nicht getestet, wäre nur ein anderer Ansatz als das direkte malen auf das canvas.

Lg Kasalop
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?
Mit Zitat antworten
  #3  
Alt 06.04.2018, 09:03
Mathias05 Mathias05 ist offline
Engagierter Besucher
 
Registriert seit: 12.12.2006
Beiträge: 158
Standard AW: svg bild in canvas

OK, probieren wir mal . danke
Mit Zitat antworten


Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Mit Canvas Bearbeitungssoftware? Sorolo HTML 3 20.08.2016 07:34
Wie Text in Canvas ändern tpk HTML 0 13.05.2015 09:25
Zwei Canvas Element zu einem Bild zusammenfügen NecroniX JavaScript 0 22.04.2015 15:21
HTML5 Canvas - On-The-Fly Videogenerierung? ABD HTML 8 14.02.2014 10:29
canvas rotate xm22 JavaScript 10 07.02.2010 12:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:30 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC