छवियों
बचत HTML तत्वों एक जटिल जवाब की आवश्यकता है!
सबसे पहले, बहुत अच्छे सुरक्षा कारणों से, ब्राउज़र HTML तत्वों के समान-पृष्ठ इमेजिंग की अनुमति नहीं देते हैं। उदाहरण के लिए कल्पना करें कि एक दुर्भावनापूर्ण स्क्रिप्ट जो HTML इनपुट फ़ॉर्म को आपके बैंकिंग उपयोगकर्ता नाम + पासवर्ड से लेती है और इसे एक छवि में परिवर्तित करती है और छवि को चोर को भेजती है-अच्छा नहीं!
इसलिए, आईई बस एक ही पृष्ठ HTML तत्व इमेजिंग - अवधि को अवरुद्ध करता है। 1. एम्बेड "foreignObject" का उपयोग कर एक एसवीजी तत्व में HTML तत्व:
Chrome और Firefox पराक्रम अभी भी एक सुविधा (बग ?!) है कि आप इस तरह के चित्रों में HTML तत्वों चालू करने के लिए अनुमति देता है। 2. एसवीजी तत्व को कैनवास तत्व में बनाएं। 3. पीएनजी छवि का प्रतिनिधित्व करने वाली एन्कोडेड स्ट्रिंग प्राप्त करने के लिए canvas.toDataURL ('image/png') का उपयोग करें।
चूंकि ऐसा लगता है कि आप HTML को स्टाइल करने के नियंत्रण में हैं, तो आपके पास PhantomJs.org (phantomjs.org) जैसे "हेडलेस" HTML जनरेटर का उपयोग करके पूर्ण समाधान हो सकता है। आप एचटीएमएल तत्व उत्पन्न और शैली बनाने के लिए फ़ैंटोमज का उपयोग कर सकते हैं। फ़ैंटॉमजे के पास एक रास्टरराइज़र होता है जिसका उपयोग आप उस तत्व को एक छवि में बदलने के लिए कर सकते हैं।
phantomjs rasterize.js http://myHtmlOnMyPage.html myHtmlImage.png
क्रोम/फ़ायरफ़ॉक्स कोड है: इसके अलावा, आप एक वेब पेज है कि केवल स्टाइल आवश्यकता के HTML शामिल सेवा कर सकते हैं, PhantomJs कोड की तो यह 1 लाइन आप उस पृष्ठ का एक png मिल जाएगा यहां मिली: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
और इस तरह दिखता है:
<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>
मैं यह सोचते करती हूं कि आप पहले से ही कैसे एक HTML5 कैनवास टैग (कि पारदर्शी पिक्सेल है) को बचाने के लिए एक PNG फ़ाइल के रूप में जानते हैं, और कुछ करने के लिए उम्मीद कर रहे हैं सादा एचटीएमएल और सीएसएस (सावी एक पीएनजी फ़ाइल के रूप में, पारदर्शिता के साथ, प्रस्तुत एचटीएमएल कंटेनर एनजी)। क्या वो सही है? –
क्षमा करें, मैंने आपका प्रश्न नहीं देखा। मैं सवाल अपडेट करूंगा। –