come riempire un'immagine con motivo

diciamo che ho un'immagine! enter image description here come riempire un'immagine con motivo

ora voglio colmare questa immagine con enter image description here

e la mia immagine finale dovrebbe assomigliare a questa enter image description here

come farlo? fino a quel momento ero in grado di cambiare il colore di quell'immagine ma non ero in grado di riempire lo schema.

posso farlo con html5 canvas (modello)? c'è un modo per farlo con PHP o qualsiasi piattaforma web.

fonte

2013-07-27 MD TAHMID HOSSAIN

non si può fare questo facilmente, ma se si vuole farlo, non posso dire di qualsiasi libreria per la manipolazione delle immagini rendere la vostra seconda immagine un po 'trasparente, e compila zona prima immagine su, quindi verrà mostrata anche la prima curva delle immagini, ma hai perso un po 'di opacità. puoi usare magik, gd per php, e la stessa cosa si applica per la tela ma devi fare riferimento alle sue informazioni sul modello di archiviazione –

grazie per la direzione. –

Utilizzare [PNGa e CSS] (http://imgur.com/86fZO1i). –

utilizzare questa procedura per creare simulare l'applicazione di un modello mappato alla maglietta:

creare una versione ad alto contrasto della camicia.
DrawImage quella maglia sulla tela
Set globalCompositeOperation a
(appare solo ogni nuovo disegno in cui l'immagine della camicia è opaco) “fonte-cima”
Creare un modello dall'immagine a scacchi
riempire la tela con il motivo a scacchi
(apparirà solo nella camicia non trasparente)
Impostare la globalAlpha ad un valore molto basso
ripetutamente DrawImage camicia alto contrasto
(puo sovrappone efficacemente la camicia “rughe”)

enter image description here

Per una migliore soluzione

creare una “mappa a sbalzo” di la maglietta e applicala con il motivo a scacchi in tre.js

Ecco il codice e un violino: 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>

fonte

2013-07-27 07:31:11 markE

perfetto! mi hai salvato la vita! Grazie. –

a proposito, come hai creato "bump-map" della maglietta? posso farlo con jquery, html5 o ho bisogno di tornare a Photoshop? –

Sì, crea la mappa texture (mappa a rilievo) in Photoshop. – markE

Come suggerito in sede di commento alla tua domanda, un approccio è quello di sovrapporre elementi DOM - l'elemento DOM superiore dovrebbe essere un PNG con trasparenza, e quello in basso dovrebbe essere il vostro modello di sfondo. Anche questo funziona (ed è più veloce poiché non è necessario calcolare l'immagine combinata), ma offre un po 'meno flessibilità in termini di combinazione delle immagini. Con il metodo canvas, puoi utilizzare qualsiasi modalità di fusione desiderata.

Una seconda opzione che non è ancora supportata dalla maggior parte dei browser è l'uso di CSS background blend modes. Ciò consentirebbe di creare un'immagine PNG con trasparenza, assegnargli un colore di sfondo e utilizzare la fusione con CSS. Questo è veloce e richiede solo un elemento DOM.

Un terzo approccio consiste nell'utilizzare le tele. (Modifica: L'approccio alla trama di markE è più rapido e semplice.) ho implementato un approccio tela relativo a questo JSFiddle: http://jsfiddle.net/IceCreamYou/uzzLa/ - ecco il succo del discorso:

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

Ciò che fa è creare una tela l'immagine di base con e una seconda tela che piastrelle vostra immagine modello, quindi utilizza i dati dei pixel per sovrapporre il pattern sulla base quando i pixel di base non sono trasparenti.

fonte

2013-07-27 07:33:54 IceCreamYou

come riempire un'immagine con motivo

risposta

Problemi correlati