कैप्चर/बचाने/सीएसएस फिल्टर प्रभाव के साथ एक छवि निर्यात लागू किया

Question

मैं चारों ओर टूलींग CSS3 के फिल्टर प्रभाव (संतृप्ति, सेपिया, इसके विपरीत, आदि)

का उपयोग करता है बनाना चित्र संपादक है एक साधारण तस्वीर संपादक बनाने के लिए कर रहा हूँ आसान हिस्सा, हालांकि, लागू फ़िल्टरों के साथ छवि को सहेजना या निर्यात करना संभव है, शायद अविश्वसनीय रूप से मुश्किल लगता है ..

मुझे मूल रूप से उच्च उम्मीद थी कि @niklasvh's html2canvas के साथ यह संभव होगा। दुर्भाग्यवश, यह अधिकांश CSS3 गुणों को कैप्चर नहीं करता है, अकेले फिल्टर प्रभाव दें।

अगर किसी के पास कोई समाधान या दुखद है, तो निश्चित ज्ञान यह है कि यह संभव नहीं है, इसकी सराहना की जाएगी! धन्यवाद!

Answer 1

आप नहीं हैं, मुझे पता है कि एचटीएमएल 5 कैनवास तत्व में ग्राफिक्स के लिए सीएसएस लागू करने में सक्षम है (क्योंकि वे डीओएम का हिस्सा नहीं हैं)।

हालांकि, यह ठीक है! हम अभी भी बुनियादी फिल्टर प्रभाव अपेक्षाकृत आसान कर सकते हैं और उन्हें जावास्क्रिप्ट की कुछ पंक्तियों के साथ एक छवि के रूप में सहेज सकते हैं।

मुझे एक अच्छा लेख मिला जो sepia-like effect to the canvas and saving it as an image लागू करने पर चला गया। इसे कॉपी करने के बजाय, मैं लेख से बड़े अधिग्रहण को हाइलाइट करूंगा।

संशोधित करना कैनवास छवि:

var canvas = document.getElementById('canvasElementId'), 
    context = canvas.getContext('2d'); 

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

for (var i = 0; i < imageData.data.length; i+=4) { 
    ... 
} 

क्रम कुछ कैनवास API तक पहुंच को पाने के लिए, आप जावास्क्रिप्ट ऊपर का उपयोग कर कैनवास पर 2 डी संदर्भ को सक्रिय करना होगा। एमडीएन में एपीआई पर कुछ महान दस्तावेज हैं जो context object के साथ आपके लिए उपलब्ध हैं, लेकिन यहां ध्यान देने योग्य महत्वपूर्ण हिस्सा getImageData() कॉल है। असल में, यह आपके द्वारा परिभाषित क्षेत्र में सभी पिक्सेल मानों को पकड़ लेगा (ऊपर दिए गए मामले में, हम पूरी छवि को पकड़ रहे हैं)। फिर, इस डेटा के साथ, हम सभी पिक्सल के माध्यम से पुनरावृत्त कर सकते हैं और आवश्यकतानुसार उन्हें बदल सकते हैं। sepia article में, यह स्पष्ट रूप से कुछ दिलचस्प समायोजन कर रहा है, लेकिन आप आवश्यकतानुसार ग्रेस्केल, धुंधला या कोई अन्य परिवर्तन भी कर सकते हैं और इसके लिए एक शानदार canvas filters library on Github है।

कैसे कैनवास छवि को बचाने के लिए:

var canvas = document.getElementById('canvasElementId'), 
    image = document.createElement("img"); 

image.src = canvas.toDataURL('image/jpeg'); 

document.body.appendChild(image); 

ऊपर स्क्रिप्ट अपने कैनवास का चयन (यह मानते हुए आप पहले से ही अपने ड्राइंग किया है) और एक छवि तत्व पैदा करेगा। यह यूआरएल उत्पन्न करने के लिए toDataURL() का उपयोग करता है जिसे आप छवि तत्व पर स्रोत सेट करने के लिए उपयोग कर सकते हैं। उपर्युक्त उदाहरण में, छवि तत्व दस्तावेज़ निकाय में जोड़ा गया है। आप MDN's canvas page पर अधिक जानकारी देख सकते हैं।

Answer 2

मुझे आपका जवाब मिला। मैंने इस कार्यक्रम को बनाया, आखिर में यह काम है।

उन कदम है:
1. अपलोड चित्र (JPG/PNG)
2. परिवर्तित सीएसएस फिल्टर के साथ
3. कस्टम कैनवास के लिए।
4. छवि के रूप में सहेजने के लिए कैमनजेएस का उपयोग करके प्रस्तुत करें।
5. किया गया।

आप फ़िल्टर के मूल्य को इसके डिफ़ॉल्ट में संशोधित करके प्रभाव मान को रीसेट कर सकते हैं।

शुभकामनाएं!