16.08.2011, 16:22
(
Последний раз редактировалось bhaveshnande; 30.09.2011 в 18:45.
)
BSN Image2Textdraw Converter Online v0.2 -Stable release
IntroductionBSN Image2Textdraw Converter Online is a Online application built with JavaScript and HTML5 which allows you to easily convert Images into SA:MP textdraws. Inspired from the Gamer931215's image2textdraw converter I thought I should make a online version of the software. You can upload images more than 45x45 pixels now, the number of non-transparent pixels is counted and final code is generated if the non-transparent pixels are less than 2048 which is the textdraw limit by SA:MP
Video
[ame]http://www.youtube.com/watch?v=JrYFndc5BKM[/ame]
Features
Superfast
This app works superfast, however the speed is dependent on the machine you are using, on a normal PC you should get the output in 2-3 seconds.
Drag and drop
You can drag and drop images into the box and your image gets selected! But you can also select your file by browsing your hard drive (the ancient way!)
Transparency Detection
It detects the pixels in your image which are transparent and skips them
No more 45x45
The 45x45 pixel limit is removed in this version which means you can upload larger images, the tool calculates the transparent and non-transparent pixels, if the number of non-transparent pixels is less than 2048 output is generated or else you get a message saying you should upload images with less number of non-transparent pixels.
Position Selector
You can select the position for your image just by clicking on the position selector, your selected image appears where you click.
Custom Background Image - new in 0.2
Screen shots of converted Images
Features to be added
- Multiple Image support
- Background detection
- Improvement in speed
- and a lot more....
- Select the image from your drive either by dragging or browsing
- Click on the Position Selector Image below to select the position of your image
- Click Convert to conver the image into textdraws
- Click Highlight Text to highlight all the text in output box
- Copy the text and paste it into PAWNO
- Compile and add the name to your server.cfg filterscript list
Note: This online application generates the same PAWNO code produced my Gamer931215's converter so I would like to thank him for "enum" and for loop idea in PAWNO script which made the script half in size.
Credits
- Myself for programming and designing
- Gamer931215 for PAWNO logic
- Norbert_G for testing
- TimothyInTheHouse for testing
- And anyone else whose name I forgot...
Код:
v0.2 Stable Release - 28/8/2011 No bugs fixed from BETA version v0.2 BETA - 28/8/2011 No bugs found v0.2 ALPHA - 27/8/2011 Custom Image feature with some minor UI updates v0.1 Stable Release - 19/8/2011 Stable version released, 1 bug fixed from 0.1 BETA v0.1 BETA - 19/8/2011 - Added image support for sizes larger than 45x45, Image preview on Position selector v0.1 ALPHA - 17/8/2011 - basic release version
Below is the list of non-fixed bugs for current app version, if you find any bugs please report them in comments. Also it would be appreciated if you try suggesting a solution to these bugs from source code available
Код:
Summary Status Importance Last Updated
#1 None of the upload method works if the page is "still loading" Confirmed High 17/09/2011
#2 Some .PNG images do not convert - instead return "undefiled" Confirmed Critical 30/09/2011
Website URL: http://bsndesign.webs.com/image2textdraw.htm (version 0.2 Stable Release)
Built With
HTML5 Image API Supported On
Source Code:
This is a quick look into JavaScript code used for converting, entire code can be obtained by selecting "View Source" in right click menu.
Код:
<script type="text/javascript">
window.onerror = function(msg, err_url, line)
{
alert('an error occured on line: ' + line);
};
window.addEvent('load', function() {
var canvas = document.getElementById("canvas");
var file = document.getElementById("file");
file.onchange = function() {
var reader = new FileReader();
reader.onload = function(e) {
img = new Image();
img.onload = function()
{
if (image_uploaded_drag === false)
{
image_uploaded = true;
image_uploade_browse = true;
canvas.width = img.width;
canvas.height = img.height;
context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
context1.drawImage(img, pos_x, pos_y);
}
else
{
alert("You already uploaded a image with \"Drag and drop method\", please refresh the page if you want to use \"Browse file method\"");
}
};
img.src = e.target.result;
};
reader.readAsDataURL(file.files[0]);
};
});
window.onload = function() {
image_uploaded = false;
image_uploaded_browse = false;
image_uploaded_drag = false;
pos_x = 0;
pos_y = 0;
canvas1 = document.getElementById("canvas1");
context1 = canvas1.getContext("2d");
document.getElementById("refresh_image").style.visibility = "hidden";
}
function Create2DArray(rows) {
var arr = [];
for (var i = 0; i < rows; i++) {
arr[i] = [];
}
return arr;
}
function change_pic()
{
custom_url = prompt("Enter URL of your custom Image","http://");
document.getElementById("canvas1").style.backgroundImage="url(" + custom_url + ")";
document.getElementById("refresh_image").style.visibility = "visible";
}
function refresh_click()
{
document.getElementById("canvas1").style.backgroundImage="url(screen.png)";
document.getElementById("refresh_image").style.visibility = "hidden";
}
function point_it(event) {
if (image_uploaded === true) {
pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("canvas1").offsetLeft;
pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("canvas1").offsetTop;
context1.clearRect(0, 0, canvas1.width, canvas1.height);
context1.drawImage(img, pos_x, pos_y);
document.getElementById("form_x").value = pos_x;
document.getElementById("form_y").value = pos_y;
}
else {
alert("Upload a image first");
}
}
function convert() {
if (image_uploaded === true) {
richtextbox3 = document.getElementById("samp_main");
//get image properties | Image size limit : 45x45 pixels
height = img.height;
width = img.width;
var imgDat;
textdraw_name = "null";
final_color = new Array(height * width);
x_axis_final = new Array(height * width);
y_axis_final = new Array(height * width);
status_used = new Array(height * width);
img_width = width + 1;
pre_text = "\n//Converted using BSN Image2Textdraw Converter Online \n#include<a_samp>\n#define USED_DRAWS " + height * width + "\nenum textdraw\n{\n\tText:id,\n\tused\n}\nnew TextDrawInfo[USED_DRAWS][textdraw];\npublic OnFilterScriptInit()\n{\n";
pixels = 0;
for (i = 0; i <= height; i++) //i = constant for first loop j is changing therefore j = horizontal scanning i = vertical scanning
{
for (j = 0; j <= width; j++) {
imgDat = context.getImageData(j, i, 1, 1); // now j=x axis i=y axis
final_color[j * img_width + i] = "0x" + dec2hex(imgDat.data[0]) + dec2hex(imgDat.data[1]) + dec2hex(imgDat.data[2]) + "ff";
if (imgDat.data[3] === 0) {
status_used[j * img_width + i] = "0";
}
else {
status_used[j * img_width + i] = "1";
pixels = pixels + 1;
}
x_axis_final[j * img_width + i] = pos_x + j;
y_axis_final[j * img_width + i] = pos_y + i;
}
}
if (pixels <= 2048)
{
string = new Array(width * height);
for (k = 0; k < height * width; k++) {
string[k] = "\tTextDrawInfo[" + k + "][id] = TextDrawCreate(" + x_axis_final[k] + "," + y_axis_final[k] + ",\".\");TextDrawTextSize(TextDrawInfo[" + k + "][id],1,1);TextDrawSetShadow(TextDrawInfo[" + k + "][id],0);TextDrawFont(TextDrawInfo[" + k + "][id],2);TextDrawColor(TextDrawInfo[" + k + "][id]," + final_color[k] + ");TextDrawInfo[" + k + "][used] = " + status_used[k] + ";";
}
post_text = "\n\n\treturn 1;\n}\npublic OnPlayerConnect(playerid)\n{\n\tfor(new i = 0;i<USED_DRAWS;i++)\n\t{\n\t\tif(TextDrawInfo[i][used] == 1){TextDrawShowForPlayer(playerid,TextDrawInfo[i][id]);}\n\t}\n\treturn 1;\n}\n\npublic OnFilterScriptExit()\n{\n\tfor(new i = 0;i<USED_DRAWS;i++)\n\t{\n\t\tif(TextDrawInfo[i][used] == 1){TextDrawDestroy(TextDrawInfo[i][id]);}\n\t}\n\treturn 1;\n}";
richtextbox3.innerHTML = pre_text + string.join("\n") + post_text;
}
else
{
alert("Your selected image had " + pixels + " non-transparent pixels, but SA:MP allows 2048 pixels. Try uploading a image with less number of non-transparent pixels");
}
}
else {
alert("Upload a image first");
}
}
dec2hex = function(d) {
var s = "00" + Number(d).toString(16);
return s.substring(s.length - 2);
};
</script>
il inspect the source a bit 
looks crazy nice, i'm going test 