<html>
<head>
<title>Sciter, Image generators for CSS</title>
<style>
html { background: transparent; }
div.test {
background: url(in-memory:test) stretch;
size:50%;
margin:*;
border:1px solid red;
}
</style>
<script type="text/tiscript">
var dynImage = null;
function generate()
{
function painter(gfx) // generates 1000 random lines on graphics
{
for(var n = 0; n < 1000; ++n)
{
var x1 = rand(500);
var x2 = rand(500);
var y1 = rand(500);
var y2 = rand(500);
gfx.lineWidth(1 + rand(6)); // 1..7
gfx.lineColor(color(rand(256),rand(256),rand(256)));
gfx.line(x1,y1,x2,y2);
}
}
var newImage = new Image(500,500,painter);
// bind image with the URL:
self.bindImage("in-memory:test", newImage);
if( dynImage ) dynImage.destroy();
dynImage = newImage;
// testing second mode of bindImage(url)
assert self.bindImage("in-memory:test") instanceof Image;
}
generate();
event click $(button#test)
{
generate();
}
event click $(button#save-png)
{
var bytes = dynImage.toBytes();
var filter = "PNG Files (*.png)|*.png|All Files (*.*)|*.*";
var ext = "png";
var path = view.selectFile(#save, filter, ext);
if( path )
bytes.save(path);
}
event click $(button#save-jpg)
{
var bytes = dynImage.toBytes(85); // 85% quality level
var filter = "JPEG Files (*.jpg)|*.jpg|All Files (*.*)|*.*";
var ext = "jpg";
var path = view.selectFile(#save, filter, ext);
if( path )
bytes.save(path);
}
event click $(button#to-clipboard)
{
view.clipboard(#put, dynImage);
}
event click $(button#from-clipboard)
{
var img = view.clipboard(#get, #picture);
if( img )
self.bindImage("in-memory:test", img);
}
</script>
</head>
<body>
<button #test>ReGenerate</button>
<button #save-png>Save as PNG image to file</button>
<button #save-jpg>Save as JPEG image to file</button>
<button #to-clipboard>Save image to clipboard</button>
<button #from-clipboard>Load image from clipboard</button>
<div .test>Test</div>
</body>
</html>