code/franz
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merged Texture work over to the main index. Using a hidden <canvas>, we can now draw their selected color in with a transparent texture PNG, get the base64 encoded string, and apply it to the mini layout - total ownage. :D

Browse source
This commit is contained in:
Veno Server 2009-09-04 02:24:03 -05:00
parent c03bdafd3c
commit f865073ea8
2 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

13
index.php
View file

@ -7,6 +7,7 @@
<script type="text/javascript" src="http://images.webs.com/static/global/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/franz.js"></script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
<script type="text/javascript" src="js/texture.js"></script>
<script type="text/javascript">
var img_input,
layoutMods,
@ -93,6 +94,14 @@
return false;
});
$("#setTextureBG").click(function() {
texture.draw('lol_texture', 'img/test1.png', [selectedColor], function() {
newBase64String = texture.getBase64();
$("#testLayout").css({'background': 'transparent url(' + newBase64String + ')'});
});
return false;
});
$("#setHeaderBG").click(function() {
previewBannerBG.css({"background-color": selectedColor});
return false;
@ -132,6 +141,7 @@
<a href="#" id="setContentBG" title="Set as Content BG">Set as Content Background</a>
<a href="#" id="setSidebarBG" title="Set as Sidebar BG">Set as Sidebar Background</a>
<a href="#" id="setFooterBG" title="Set as Footer BG">Set as Footer Background</a>
<a href="#" id="setTextureBG" title="Set as Main BG w/ Texture">Set as Main BG w/ Texture</a>
</div>
<div id="testLayout">
@ -181,9 +191,10 @@
</p>
</div>
</div>
<canvas id="lol_texture" width="50" height="50" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"></canvas>
<div id="options">
<p id="hsv">
<a href="#" id="sort_hue" title="Sort by Hue">Sort by Hue</a>

9
js/texture.js
View file

@ -15,7 +15,7 @@ var texture = {
* @Param: baseImage - base image to use (generally a semi-transparent PNG)
* @Param: colorArray - array of colors to use in the texture (Right now, this only accepts two colors, primary and secondary)
*/
draw: function(drawingCanvas, baseImage, colorArray) {
draw: function(drawingCanvas, baseImage, colorArray, callbackfn) {
texture.canvas = document.getElementById(drawingCanvas);
texture.ctx = texture.canvas.getContext('2d');
@ -25,7 +25,10 @@ var texture = {
texture.ctx.fillStyle = colorArray[0];
texture.ctx.fillRect(0, 0, 50, 50);
texture.ctx.drawImage(img, 0, 0, 50, 50);
}
callbackfn();
}
img.src = baseImage;
}
},
getBase64: function() { return document.getElementById("lol_texture").toDataURL("image/png"); }
}