क्या आप जावास्क्रिप्ट का उपयोग कर एक से अधिक छवियों को एक साथ जोड़ सकते हैं?

Question

मुझे आश्चर्य है कि एकाधिक छवियों को केवल एक जावास्क्रिप्ट का उपयोग करके एक छवि में गठबंधन करने का कोई तरीका है। क्या ऐसा कुछ है जो कैनवास करने में सक्षम होगा। प्रभाव सकारात्मक के साथ किया जा सकता है, लेकिन क्या आप उन्हें डाउनलोड करने के लिए एक छवि में जोड़ सकते हैं?

अद्यतन अक्टू 1, 2008:

सलाह के लिए धन्यवाद, मैं मदद कर रहा था किसी को jQuery के साथ एक js/सीएसएस केवल साइट पर काम करते हैं, और वे के साथ कुछ MacOS गोदी की तरह छवि प्रभाव देख रहे थे कई छवियां जो एक-दूसरे को ओवरले करती हैं। जिस समाधान के साथ हम आए थे वह केवल पूर्ण स्थिति था, और माता-पिता <div> पर अपेक्षाकृत स्थान पर प्रभाव का उपयोग कर रहा था। छवियों को गठबंधन करना और उस एकल छवि पर प्रभाव बनाना बहुत आसान होता।

फिर मुझे Picnik जैसे ऑनलाइन छवि संपादकों के बारे में सोचने लगे और यह सोचकर कि जावास्क्रिप्ट में केवल फ़ोटोशॉप क्षमताओं के साथ ब्राउज़र आधारित छवि संपादक हो सकता है या नहीं। मुझे लगता है कि भविष्य में शायद एक संभावना नहीं है?

Answer 1

मुझे पता है कि यह एक पुराना प्रश्न है और ओपी को एक समाधान समाधान मिला है, लेकिन यह काम करेगा अगर छवियां और कैनवास पहले से ही HTML पृष्ठ का हिस्सा हैं।

<img id="img1" src="imgfile1.png"> 
<img id="img2" src="imgfile2.png"> 
<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

canvas.width = img1.width; 
canvas.height = img1.height; 

context.globalAlpha = 1.0; 
context.drawImage(img1, 0, 0); 
context.globalAlpha = 0.5; //Remove if pngs have alpha 
context.drawImage(img2, 0, 0); 
</script> 

या, यदि आप मक्खी पर छवियों को लोड करना चाहते हैं:

<canvas id="canvas"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 
Image img1 = new Image(); 
Image img2 = new Image(); 

img1.onload = function() { 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    img2.src = 'imgfile2.png'; 
}; 
img2.onload = function() { 
    context.globalAlpha = 1.0; 
    context.drawImage(img1, 0, 0); 
    context.globalAlpha = 0.5; //Remove if pngs have alpha 
    context.drawImage(img2, 0, 0); 
};   

img1.src = 'imgfile1.png'; 
</script> 

Answer 2

मुझे नहीं लगता कि आप क्लाइंट साइड जावास्क्रिप्ट ("उन्हें डाउनलोड के लिए एक छवि में जोड़कर") के साथ ऐसा करना चाहते हैं, क्योंकि यह क्लाइंट पर चल रहा है: भले ही आप उन्हें एक सिंगल में जोड़ सकें क्लाइंट पर छवि फ़ाइल, उस बिंदु पर आप पहले से ही सभी व्यक्तिगत छवियों को डाउनलोड कर चुके हैं, इसलिए विलय व्यर्थ है।

Answer 3

यदि वे आपके नियंत्रण में जेपीजी की एक जोड़ी थे, तो आकार के साथ, दोनों दिशाओं में 8 का एक बहुमत है। उसमें पिक्सेल ब्लॉक को फिर से बदलने, रिकोडिंग की आवश्यकता नहीं होगी।

Answer 4

ठीक है, समस्या यह है कि आप जावास्क्रिप्ट से 'डाउनलोड' नहीं कर सकते हैं, यह वास्तव में ज्यादा समझ में नहीं आता है, क्योंकि जावास्क्रिप्ट क्लाइंट पर चलता है, और यह केवल सर्वर से डाउनलोड करने के लिए समझ में आता है। क्या आप हमें बता सकते हैं कि आप क्या हासिल कर रहे हैं, आपका अंतिम लक्ष्य? हम बेहतर सुझावों के साथ आ सकते हैं।

Answer 5

आप इसके लिए पिक्सैस्टिक का उपयोग कर सकते हैं। मिश्रण उदाहरण यहां है: http://www.pixastic.com/lib/docs/actions/blend/