Image to bbcode web-app

[hotfooted]

Hi,

I have developed a web-app which might be useful to others. I think it helps when developing quality signatures so I thought I would share. The web-app allows you to open an image and generate the bbcode to make it usable on this forum in posts and signatures. Once it's converted you can just hit copy and come back to the forum, paste the code, and you are ready to go.

There are a couple of caveats for use as anyone who has made signatures would understand.

1) While there is no limitation of image width and height in the web-app there is on the bbcode used in the forum and as such a general recommendation is to process images with dimensions 40 pixels or less on each axis. There are circumstances where you can ignore this such as when you don't have signature limitations or you have a reduced image palette which leads to caveat 2

2) It is best when there are less than 256 distinct colours, this increases the chance of colour runs, which reduce the amount of bbcode produced. The less bbcode the better.

3) Alpha is unsupported, mainly because i'm lazy, mostly because it saves nothing in bbcode and matching a background is easy enough.

I will post some examples of the output in the following posts and you can judge the quality compared to those done by hand or with other means (Don't get me wrong, many kudos to those who do it by hand, I don't mean to detract from their work)

Hopefully you find this helpful. You might even consider donating if it is, it's by no means required, it's appreciated though.

http://hotfooted.bitballoon.com/

peace

NOTE: Nothing is uploaded and all processing is done on the users machine with javascript.


EXAMPLES

████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████


████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████

[1714189367]

1714189367

[1714189367]

1714189367

[hotfooted]

MORE EXAMPLES (You can only post so much bbcode per post )


████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████


████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████
████████████████████████████████

[SFR10]

Although you've done a nice job into making the web app, somehow you've failed to take into consideration the signature character limits (which is 4000 characters)
For the above two images you've posted, they each have 18760 and 16805 characters respectively. I even uploaded a single complex image and it end up with 55527 characters which is a lot.



This is a 60 x 40 px(height) and it's shown like this. Image is a .png format and the app failed to deliver it in the appropriate size and it's consists of "3952" characters" which is a lot for a single image.
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████




This is a 60 x 40 px(height) and it's shown like this. Image is a .jpg format and the app failed to deliver it in the appropriate size and it's consists of "24928" characters" which is way more than the limit and for a simple image, is simply too much characters. Someone could go all the way in the code and delete each of those separate color codes and make them into one but it would take a lot of time and still the image wouldn't be correct in terms of height.
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████
████████████████████████████████████████████████████████████

[Jet Cash]

I wouldn't like a poster to have any active code in his sig, and if I detected it, I would probably put him on ignore.
Signatures are enough of a nuisance as it is.

[Decoded]

I tried putting the Telegram icon in (just because it was on my desktop at the time), and since it was a HD image, there were WAY too many characters. A reccommendation is to add code to shrink images before processing them.

The problem is that the bbcode boxes are of an odd size and arent squares, so they either look stretched or squished.

[hotfooted]

Hi peoples,

SFR10: I stated in the original post the forum has limitation which you must abide. If you choose to ignore those limitations that is at your discretion. The height issue can easily be negated but it is due to the nature of the full block character that images cannot be truly represented.

Jet Cash: That's your personal choice. I think the signatures are great even if limited. I just wanted to offer the ability to recreate logos as accurate as possible in bbcode. this whole issue could be negated if the forum would allow actual images.

Decoded: This app is aimed at those who design signatures it is not a photoshop or gimp replacement it is a simple conversion tool. Resizing an image is not that big a deal and can be done before processing.

In the end this is targeted at those who design signatures and have a good handle on whatever image development program they use. I only really did it as a tool to help those who develop signatures and have to struggle with the task of encoding a logo manually. If it's not of use to you that's fine but perhaps there are those who appreciate it. Anyways thanks for the feedback.