Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<img id="img" src="http://reklamtisk.cz/7.png"> <canvas id="canvas" width="300" height="300"></canvas> <div id="info"></div> <a href="#" onclick="drawCanvas('orange');">Změnit na Oranžovou</a> | <a href="#" onclick="drawCanvas('red');">Změnit na Červenou</a> | <a href="#" onclick="drawCanvas('royal_blue');">Změnit na Modrou</a>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
var cImg = new Array(); cImg['white'] = [255,255,255]; cImg['black'] = [0,0,0]; cImg['red'] = [255,0,0]; cImg['royal_blue'] = [20,71,200]; cImg['orange'] = [255,102,0]; cImg['lime_green'] = [134,219,12]; canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); function drawCanvas(colorImg) { var image = document.getElementById('img'); if(image) { var rgb = cImg[colorImg]; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.drawImage(image, 0, 0, image.width, image.height); var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height); var pix = imgd.data; var uniqueColor = [rgb[0],rgb[1],rgb[2]]; 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] = pix[i+3]; } ctx.putImageData(imgd, 0, 0); ctx.restore(); } else {document.getElementById("info").innerHTML="Nezpracováno";} }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>