Autor Zpráva
JardaB
Profil
Ahoj, existuje nějaké řešení jak měnit barvu PNG, či GIF obrázku, který je jednobarevný s transparentním pozadím? Jde mi o to si udělat jednoduchý editor na potisky triček, kde zvolím motiv a po kliknutí na barvu motivu si nasimuluji jak pro daný motiv bude vypadat na triku. Nechci pro každý motiv dělat 30 barevných variant, protože bude tak 500 motivů a cca 30 barevných kombinací.
Předpokládám že by to mohlo jít přes <canvas>?


Našel jsem tohle a funguje...

<script>
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [255,153,0]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Blue component
      pix[i+2] = uniqueColor[2]; // Green component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);
</script>
Keeehi
Profil
Tisku triček nerozumím, takže se zeptám jako amatér, ale jaký formát se používá jako zrojový pro tisk? Není to náhodou něco vektorového? Protože kdyby ano, krásně by to šlo uložit jako SVG a u něj jdou barvy měnit jednoduše i jen s pomocí CSS. Když se správně připraví tak může být dvoubarevný. Pro více barev je pak potřeba javascript. Ale ty píšeš o jedné, tak myslím, že by to bylo ideální.
JardaB
Profil
Keeehi:
Tady nejde o formát pro tisk, ale o pouze grafický náhled pro klienta. Pokud lze měnit barvu SVG a prohlížeče s tím nemají problém, tak je to asi nejjednodušší řešení.. Nyní se zeptám já, jakou vlastností se mění samotná barva pomocí CSS u SVG obrázku? Klasicky např. color: red; ? SVG formát sem zatím nikdy nepoužíval, ale pokud neumí průhledné pozadí, tak je mi to k ničemu.
JardaB
Profil
Takže jsem si vytvořil SVG obrázek v Corelu a vložil do html následující:

<img id="ikona" src="2.svg">

ale nevím jak na změnu barvy. Tohle nefunguje #ikona {fill: red;}

Když otevřu zdrojový kód obrázku tak je následující a zde když přepíšu fill: tak funguje.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" height="297mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 210 297">
 <defs>
  <style type="text/css">
   <![CDATA[
    #fil0 {fill:#ff0000}
   ]]>
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path id="fil0" d="M95.7743 35.6467c4.8574,0 8.7966,4.1313 8.7966,9.2256 0,5.0944 -3.9392,9.2257 -8.7966,9.2257 -4.8573,0 -8.7965,-4.1313 -8.7965,-9.2257 0,-5.0943 3.9392,-9.2256 8.7965,-9.2256z"/>
 </g>
</svg>
T-fon
Profil
Asi bude stačit vyhodit z SVG tu část, kde máš natvrdo definici barvy.
Živá ukázka
JardaB
Profil
Mno řekl bych, že tobě to funguje jen proto, že nevkládáš to SVG tagem <img id="ikona" src="2.svg">, ale rovnou si vložil celý kód SVG obrázku do html
Kajman
Profil
A Vy to tak udělat nemůžete? Prostě místo img použít tag svg?
JardaB
Profil
Musel bych načítat zdrojové kody obrázků a vkládat je přímo do kódu. Je to řešitelné, ale to už mi přijde více elegantní řešení s <canvas>


Teď sleduji, že změna barvy pomocí canvas nebude úplně to pravé ořechové. Když se vytvoří průhledné PNG nebo GIF, tak jsou krajní pixely v odstínu barvy a tvoří efekt, že kontura grafiky je ostrá. Po překrytí barvou pomocí canvas se překryjí i tyto pixely a ve finále je grafika již mírně kostrbatá. Malinko se to zlepší, když se grafika udělá ve větším rozlišení např. 300 DPI.

Asi nej řešení bude přes SVG...
Kajman
Profil
Tu <svg> část ze .svg souboru můžete do html dát až např. javascriptem, aby se svg lépe stylovalo či upravovalo.
Object moved
JardaB
Profil
To je na mě už poměrně složité... musím řádně prostudovat.

Zkusil jsem trochu naivně:

function vlozSVG ()
 {
  var vysledek;
  $.get('motivy/test.svg', function(data){
    vysledek = data;
    textil.innerHTML = vysledek;
    });
 } 

pro mě bude asi snazší zavolat PHP které mi vrátí obsah souboru. V PHP se orientuji lépe...
Keeehi
Profil
JardaB:
Tady nejde o formát pro tisk, ale o pouze grafický náhled pro klienta.
To mi bylo jasné, ale šlo mi především o to, zda máš k dospozici data ve vektorovém formátu. Protože pokud ne, tak z rastru se do vektoru předělávají těžko a asi bys to dělat nechtěl.

Ono SVG se dá do HTML vložit různě. Například
<object type="image/svg+xml" data="motivy/test.svg"></object>
To by mělo umožnit manipulaci i přes externí CSS styl.
JardaB
Profil
Keeehi:
Ono SVG se dá do HTML vložit různě. Například
<object type="image/svg+xml" data="motivy/test.svg"></object>
To by mělo umožnit manipulaci i přes externí CSS styl

zkusil jsem a nejde


Ve finále bude mít asi obojí své pro a proti. U canvas mi je poskytnuta výhoda snadné manipulace s obrázkem, tj. zvětšení, zmenšení, posunutí, otočení aj. tedy pravděpodobně zůstanu u toho na úkor výsledné kvality náhledu.
Keeehi
Profil
U zvětšení, zmenšení a otočení má výhodu SVG právě proto, že to je vektorový formát a tudíž tím neztrácí na kvalitě.
JardaB
Profil
Ano v tomto směru máte naprostou pravdu. Mě jde jen o náhledy a tedy mi přijde pohodlnější canvas.
petr
Profil *
Proč na takhle triviální věc používat SVG nebo canvas? Stačí obyčejnému obrázku s průhledným pozadím měnit barvu pozadí. Je to méně JavaScriptu a lepší podpora v prohlížečích.
Živá ukázka
Keeehi
Profil
petr:
Až na to, že on chce měnit pozici, velikost a barvu motivu na nejspíše fotorealistickém tričku. Takže potřebuje nad spoustu fotek různých triček pozicovat motivy různých barev. To tvoji metodou neudělá. Jedině, že by jsi nějak dokázal do té fotky trička "průhledně namalovat" ten motiv. Pak by to šlo měněním pozadí.
petr
Profil *
Keeehi:
chce měnit pozici, velikost
V tom mu žádná metoda ani nepomáhá, ani nebrání.
motivy různých barev
Hm, tak tohle je jasný úkol pro SVG. V tomhle se mu nic nevyrovná. Tak kde je vlastně problém? Prostě jenom nejde vložit?
JardaB:
zkusil jsem a nejde
Trochu víc snahy! Myslím si, že investice času do studia SVG se vyplatí, canvas nikdy nebude vypadat tak dobře a budou s ním jen problémy.

JardaB:
U canvas mi je poskytnuta výhoda snadné manipulace s obrázkem
nic
petr
Profil *
Keeehi:
Ono SVG se dá do HTML vložit různě. Například
<object type="image/svg+xml" data="motivy/test.svg"></object>
To by mělo umožnit manipulaci i přes externí CSS styl.
Přes externí CSS styl asi ne (možná při vložení SVG jinou metodou), ale JardaB stejně potřebuje měnit barvy motivu dynamicky. Přes JavaScript to však jde: How to access SVG elements with Javascript. Už jsem i vytvořil funkční ukázku. Ten motiv musel být na stejné doméně, takže jsem ho nahrál jako další HTML ukázku (kvůli tomu se mu zobrazuje posuvník, ale při správném Content-Type se zobrazovat nebude).
Poznatky z tvoření ukázky:
– SVG motiv musí být na stejné doméně, jinak contentDocument vrací null (zobrazí se, ale nelze měnit barva)
– křivkám v motivu je třeba samozřejmě sjednotit atributy fill, nebo stroke – vybrat si jedno z toho (univerzálnější je fill) a naráz měnit společnému rodiči
– motiv lze přebarvovat, posouvat, zvětšovat – prostě krása SVG :-)
– jak už výše ↑ zmíněno, na motiv nelze aplikovat externí styl, přednastavené styly musí být uvnitř SVG
– server musí při požadavku na SVG odeslat hlavičku Content-Type: image/svg+xml (zdá se to jako samozřejmost, ale není)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: