मान लें कि मेरे पास एक छवि है! 
पैटर्न के साथ एक छवि को भरने के लिए कैसे
अब मैं 
साथ उस छवि को भरना चाहते हैं और मेरे अंतिम छवि इस 
इसे कैसे करना की तरह दिखना चाहिए? अब तक मैं उस छवि का रंग बदलने में सक्षम था लेकिन पैटर्न को भरने में सक्षम नहीं था।
क्या मैं इसे html5 कैनवास (पैटर्न) के साथ कर सकता हूं? क्या PHP या किसी भी वेब प्लेटफ़ॉर्म के साथ ऐसा करने का कोई तरीका है। अपनी शर्ट के लिए एक मैप किए गए पैटर्न को लागू करने के अनुकरण बनाने के लिए इन चरणों का
उपयोग:
एक बेहतर समाधान
की एक "टक्कर-नक्शा" बनाएँ के लिए drawImage शर्ट और इसे तीन.जेएस
में चेकर्ड पैटर्न के साथ लागू करें यहां कोड और एक पहेली है: http://jsfiddle.net/m1erickson/kzfKD/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img1=new Image();
var img=new Image();
img.onload=function(){
img1.onload=function(){
start();
}
img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";
function start(){
ctx.drawImage(img1,0,0);
ctx.globalCompositeOperation="source-atop";
ctx.globalAlpha=.85;
var pattern = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = pattern;
ctx.fill();
ctx.globalAlpha=.15;
ctx.drawImage(img1,0,0);
ctx.drawImage(img1,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=436 height=567></canvas>
</body>
</html>
सही कोड दे सकते हैं! तुमने मेरे जीवन आदमी को बचाया! धन्यवाद। –
जिस तरह से आपने शर्ट का "टक्कर-नक्शा" बनाया है? क्या मैं इसे jquery, html5 के साथ कर सकता हूं या मुझे फ़ोटोशॉप पर वापस जाने की आवश्यकता है? –
हां, फ़ोटोशॉप में बनावट मानचित्र (बंप नक्शा) बनाएं। – markE
आपके प्रश्न पर टिप्पणी में सुझाव के रूप में, एक दृष्टिकोण डोम तत्वों ओवरले करने के लिए है - शीर्ष DOM एलीमेंट पारदर्शिता के साथ एक PNG होना चाहिए, और नीचे एक अपने पृष्ठभूमि पैटर्न होना चाहिए। यह भी काम करता है (और यह तेज़ है क्योंकि आपको संयुक्त छवि की गणना करने की आवश्यकता नहीं है) लेकिन छवियों के संयुक्त तरीके के संदर्भ में थोड़ा कम लचीलापन प्रदान करता है। कैनवास विधि के साथ, आप इच्छित मिश्रण मोड का उपयोग कर सकते हैं।
एक दूसरा विकल्प जो अभी तक अधिकांश ब्राउज़रों द्वारा समर्थित नहीं है, CSS background blend modes का उपयोग करना है। यह आपको पारदर्शिता के साथ एक पीएनजी छवि बनाने, इसे पृष्ठभूमि रंग असाइन करने और सीएसएस के साथ मिश्रण का उपयोग करने की अनुमति देगा। यह तेज़ है और केवल एक डीओएम तत्व की आवश्यकता है।
कैनवस का उपयोग करने का एक तीसरा दृष्टिकोण है। (संपादित करें: मार्कई का कैनवास दृष्टिकोण तेज़ और सरल है।) मैं इस JSFiddle में एक कैनवास आधारित दृष्टिकोण को लागू किया: http://jsfiddle.net/IceCreamYou/uzzLa/ - यहाँ सार है:
// Get the base image data
var image_data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var image_data_array = image_data.data;
// Get the pattern image data
var overlay_data = ovlyCtx.getImageData(0, 0, ovlyCtx.canvas.width, ovlyCtx.canvas.height).data;
// Loop over the pixels in the base image and merge the colors
for (var i = 0, j = image_data_array.length; i < j; i+=4) {
// Only merge when the base image pixel is nontransparent
// Alternatively you could implement a border-checking algorithm depending on your needs
if (image_data_array[i+3] > 0) {
image_data_array[i+0] = combine(image_data_array[i+0], overlay_data[i+0]); // r
image_data_array[i+1] = combine(image_data_array[i+1], overlay_data[i+1]); // g
image_data_array[i+2] = combine(image_data_array[i+2], overlay_data[i+2]); // b
}
}
// Write the image data back to the canvas
ctx.putImageData(image_data, 0, 0);
क्या यह करता है आधार छवि के साथ एक कैनवास और एक दूसरे कैनवास है कि आपके पैटर्न छवि टाइल, तो का उपयोग करता है बनाने के है पिक्सेल डेटा आधार पर पैटर्न को ओवरले करने के लिए जब आधार पिक्सेल नॉनट्रांस्पेरेंट होते हैं।
आप इस यह आसानी से, लेकिन यदि आप इसे करना चाहते हैं, मैं नहीं छवि हेरफेर के लिए किसी भी पुस्तकालय के बारे में कह सकते हैं अपने दूसरी छवि एक छोटे से पारदर्शी बनाने, और पहली छवि पर क्षेत्र में भरने के लिए नहीं कर सकते, तो पहली छवियों वक्र भी दिखाया जाएगा, लेकिन आप थोड़ा अस्पष्टता खो दिया है। आप मैजिक, जीडी के लिए जीडी का उपयोग कर सकते हैं, और कैनवास के लिए एक ही चीज लागू होती है लेकिन दिशा के लिए –
पैटर्न को भरने के बारे में इसके डॉक्यूमेंटेशन का उल्लेख करना होगा। –
[पीएनजीए और सीएसएस] का उपयोग करें (http://imgur.com/86fZO1i)। –