wie man ein Bild mit Muster füllt

sagen wir, ich habe ein Bild! enter image description here wie man ein Bild mit Muster füllt

jetzt möchte ich das Bild füllen mit enter image description here

und mein letztes Bild wie dieses enter image description here

aussehen sollte, wie es zu tun? Bisher konnte ich die Farbe dieses Bildes ändern, konnte aber kein Muster füllen.

kann ich es mit html5 canvas (pattern) tun? Gibt es irgendeinen Weg, es mit PHP oder irgendeiner Netzplattform zu tun.

2013-07-27 MD TAHMID HOSSAIN

Sie können dies nicht leicht, aber wenn Sie es tun wollen, ich nicht über jede Bibliothek für Bildmanipulation machen Ihre zweite Bild ein wenig transparent, und füllen Bereich auf dem ersten Bild sagen kann, So wird auch die erste Bildkurve angezeigt, aber Sie haben ein wenig Opazität verloren. können Sie magik, gd für PHP verwenden, und das gleiche gilt für Leinwand, aber müssen Sie auf seine Dokumente über Ablage Muster –

Dank für die Richtung verweisen. –

Verwenden Sie [PNGa und CSS] (http://imgur.com/86fZO1i). –

Mit diesen Schritten erstellen simuliert ein zugeordnetes Muster zu Ihrem Hemd Anwendung:

erstellen eine kontrastreiche Version Ihres Hemdes.
DrawImage, das Hemd auf die Leinwand
Sets global auf „source-Spitze“
(jede neue Zeichnung erscheint nur dann, wenn das Hemd Bild undurchsichtig ist)
ein Muster aus dem karierten Bild erstellen
füllen sie die Leinwand mit dem karierten Muster
(nur im nicht-transparenten Shirt erscheint)
Stellen sie den globalAlpha auf einen sehr niedrigen Wert
DrawImage Wiederholen den kontrast Shirt
(dies effektiv das Hemd „Falten“ lagert)

enter image description here

Für eine bessere Lösung

einen „Bump-Map“ Erstellen von das Hemd und wenden Sie es mit dem karierten Muster in three.js an

Hier ist Code und eine Geige: 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>

Quelle

2013-07-27 07:31:11 markE

perfekt geben! Du hast mein Leben gerettet! Vielen Dank. –

übrigens, wie erstellt man "bump-map" des Shirts? kann ich es mit jquery, html5 oder ich muss zurück zu Photoshop gehen? –

Ja, erstellen Sie die Textur-Map (Bump-Map) in Photoshop. – markE

Wie in den Kommentaren zu Ihrer Frage vorgeschlagen, ist ein Ansatz DOM-Elemente zu überlagern - das Top-DOM-Element ein PNG mit Transparenz sein sollte, und die unteren Ihre Hintergrundmuster sein sollte. Dies funktioniert auch (und es ist schneller, da Sie das kombinierte Bild nicht berechnen müssen), bietet aber ein wenig weniger Flexibilität in Bezug auf die Art, wie die Bilder kombiniert werden. Mit der Canvas-Methode können Sie einen beliebigen Mischmodus verwenden.

Eine zweite Option, die von den meisten Browsern noch nicht unterstützt wird, ist die Verwendung von CSS background blend modes. Auf diese Weise können Sie ein PNG-Bild mit Transparenz erstellen, ihm eine Hintergrundfarbe zuweisen und die Überblendung mit CSS verwenden. Dies ist schnell und benötigt nur ein DOM-Element.

Ein dritter Ansatz ist die Verwendung von Leinwänden. (Edit: markE Leinwand-Ansatz ist schneller und einfacher.) implementiert ich eine Leinwand-basierten Ansatz in diesem JSFiddle: http://jsfiddle.net/IceCreamYou/uzzLa/ - hier ist der Kern:

// 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);

Was sie tut, ist eine Leinwand mit dem Basisbild erstellen und eine zweite Leinwand, die Ihr Musterbild Fliesen, verwendet Die Pixeldaten überlagern das Muster über der Basis, wenn die Basispixel nicht transparent sind.

Quelle

2013-07-27 07:33:54 IceCreamYou

wie man ein Bild mit Muster füllt

Antwort

Verwandte Themen