Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Skyrunner]

Quick question: Does anyone know if a Canvas is the only way to edit an image's pixels in Javascript?

[Putnam]

In what Javascript library? Or is it just vanilla Javascript? I get so confused due to the general weirdness surrounding Javascript's library stuff.

EDIT: bahah speaking of which I actually looked up jquery just now and realized that I've been writing my own functions to do one of the things that it already does (DOM manipulation)

oh well how else do you learn a language than by reinventing the wheel

[Skyrunner]

Any Javascript.

[Putnam]

oh, okay, I see

...i'm going to be completely honest and say that there may actually be something in jquery

there's probably another library or two that can do that kind of thing

[Skyrunner]

I use d3, jquery is too mainstream

To me though, it seems that the way the whole Internet thing is designed is Image classes are just a wrapper to a link to a location (the image source), and to actually edit the images you need to blit them to a canvas and go from there.

[Putnam]

i didn't even know jquery EXISTED when i wrote my websites, you have no hipster cred on me

Now that I think of it, why exactly are you asking?

[Skyrunner]

I'm making a little tech demo/toy thing that requires just-in-time image manipulation

I have to be able to edit pixels directly, plus be able to instantiate new images that don't have a URL source.

edit: Also, how would one create the "oil slick"-like colors in this image?



I actually can't think of a way they would do that @.@

[Spehss _]

In that case, go into settings->compiler. It'll open up a window; first screen will have a bunch of checkboxes. Check the one that mentions using the C++11 standards.

Thanks. Did this, it's working.

[i2amroy]

edit: Also, how would one create the "oil slick"-like colors in this image?



I actually can't think of a way they would do that @.@

I assume you could start with a number of suitable color blotches on a canvas, then just start doing grab and drag transforms of image sections until it was suitably oil like.

[Telgin]

Quick question: Does anyone know if a Canvas is the only way to edit an image's pixels in Javascript?

The only other way I can think of to manipulate actual image data would be to take advantage of base64 encoded image data directly in an image tag.  I at least think you can do that.  You'd need to generate the entire image data (that is exactly as if you were saving it as a .png, .jpg or whatever, not just the pixel data), base64 encode it, then set the src attribute on the img tag to be the new base64 data.  Or something like that.

I'm positive some JavaScript library somewhere would support the base64 encoding if it isn't supported natively in browsers these days, but finding one that will help you access and manipulate individual pixel data of images in JavaScript is another issue entirely that I don't know any examples of.

Canvas is probably going to be 100x easier.

[Spehss _]

Not sure how to word this question. In c++, how do I make a vector like I would make an array[][]. Like, say I've been using an array of chars: "char arr

• [y]", and I want to replace it with a vector. How would I define it? Would it be "vector<char> arr
• [y]" ?

[Reelya]

Which part do you want to replace with a vector? You want a 2D vector basically? Or do you want a vector with char array strings inside it?

Vector is a 1D data structure. To make it 2D you have to have a vector of vectors (analogous to what [][] does, an array of arrays).

vector<vector<char>> arr;

I'm not going to make any claims about how usable or efficient this is however. Each time you instantiate a template, it creates a copy of the entire code for that template's inheritance tree with the current template parameter. vector<vector<char>> creates two separate class heirarchies with copies of the complete "vector" codebase, but with different template parameters compiled in, one for vector<char> and the other for vector<vector<char>>. So the standard templates are great for rapid development, but terrible for bloating the size of your exe file.

I outlined how to roll-your-own 2D array class on an earlier page. Though my implementation is bare-bones, you can add specialized stuff to it easily.

[Spehss _]

Which part do you want to replace with a vector? You want a 2D vector basically? Or do you want a vector with char array strings inside it?

Vector is a 1D data structure. To make it 2D you have to have a vector of vectors (analogous to what [][] does, an array of arrays).

vector<vector<char>> arr;

I'm not going to make any claims about how usable or efficient this is however. I outlined how to roll-your-own 2D arrays on an earlier page.

It's for storing data for a map level for a roguelike I'm making. Still in the super early stages. If there's a better way to store data for what basically amount to an x-y graph of ascii symbols with different traits, like the x-y coordinate, whether the tile is a floor or wall, etc, I'd love to know. Previously I was using an array[][] of chars just to make sure I could print it through curses.

Spoiler: actual early code stuff (click to show/hide)

Code: [Select]

class mapTile
{
    public:
        bool blockCheck = false;    //blockCheck for determining if tile is passable or not. false=impassable, true=passable.
        char tileGraphic;           //for tracking the ascii symbol to be used for the tile.
};

class mapLevel
{
    public:
        vector<vector<mapTile>> mapXYLayout;
};

[Reelya]

Code: [Select]

template <class T> class grid
{
    T *data;
public:
    int sizex, sizey;

    grid(int _sizex, int _sizey) : sizex(_sizex), sizey(_sizey)
    {
        data = new T[sizex * sizey];
    }

    ~grid() { delete [] data; }

    T &operator[](int x, int y) { return data[x + sizex * y]; }
}

// usage:
grid<char> charArray2D(20,20);

grid<mapTile> mapArray2D(80,25);

You can add anything you want to this, e.g. bounds-checking. But I designed this for access speed, so it assumes you've already screened your inputs.

[Spehss _]

Cool, another thing I never heard of. Off to Google I go then. Thanks for the example.