Istemci DOM SVG seri hale getirmek için en iyi yolu nedir?

2 Cevap php

Ben elemanları ve kullanıcılar tarafından oluşturulan on-the-fly konumlandırılmış olan interaktif SVG / AJAX arayüzleri üzerinde çalışıyorum. Ben bir PNG görüntü ve / veya bir SVG belgeye mevcut görünümü vermek kullanıcılar için yeteneği desteklemek istiyorum. Ben SVG belgesi (iç içe dönüşümlerinin bir sürü olmadan) mümkün olduğunca basit olması gerçekten çok isterim. Zaten bu destekleyen herhangi bir çerçeve var mı?

Şu anda Ctrl + Alt + PrntScrn tekniğini kullanmak için kullanıcıların soruyorum, ve ben herhangi bir yazılım / eklentileri yüklemek için onlara sormak istemiyorum.

Eğer yardımcı olur sunucu tarafı kod, şu anda PHP uygulanmaktadır. Ben zaten ImageMagick kullanarak (istemci herhangi bir değişiklik yapmadan önce) "orijinal" belgesinden bir PNG görüntüsü oluşturmak için yeteneği uygulanan ettik.

2 Cevap

Ben sadece SVG destekleyen tarayıcılarda çalışmak için bu gerekiyor varsayarak yaşıyorum.

Firefox, Safari, Opera ve standart dışı XMLSerializer API sağlamak, bu yüzden böyle bir şey yapabilirsiniz:

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);

Oradan sunucuya göndermek ve karşılığında bir PNG alabilirsiniz.

İşte Mozilla's developer page on serializing XML from the DOM.

Opera W3C's DOM→XML serializer uygulanmasını vardır. XML modunda innerHTML Gecko iyi biçimlendirilmiş XML döndürür.

HTML5 <canvas> toDataURL() kullanarak PNG dosyası olarak içeriğini verebilirsiniz ve drawImage() kullanarak tuval üzerine herhangi bir <img> elemanı boyamak mümkün, bu yüzden data: URL olarak tuval ve ihracat üzerine boya <img src="data:application/svg+xml,…"> yaratmak mümkün olmalıdır.