Hello guys, supposing you want to for any reason - for fun, a client, money or any of those other crazy excuses that programmers have for creating websites - decide to create a website similar or identical to www.photocollage.net, how will you go about it? what are the library, classes, frameworks that you'd use? can one person create both the backend and the frontend of such a website?

Note the aim of this website is entirely for learning and I don't have any particular language in mind, so it would be nice if someone can show us how to achieve such in python, cobra, anaconda, php, ...... even ada language sef

I'd also like to mention that I spent a considerable amount of time and data on Google, but the results have not been as fruitful as i would have liked.

Make we come wait for them Broses to show and enlighten some of us

HTML5 Canvas + FileReader + Any backend you want

HTML5 Canvas has everything you need to handle images and rotation.. Because Canvas is not retained mode you will need to have Object that store the state of the drawing on the canvas and based on that state re-render your drawing on the screen, imagine a computer looking at a sketch and re-painting the canvas thousand times.

It will take a long time as you have to test with Multiple browsers as Canvas has different behaviour on different browsers. Good luck if this is a client job get ready to charge a lot as you will spend 90% of your time in the HTMLCanvasElement documentation, and also on Matrix Rotation if needed.

Try Paper.js or EaselJS but i would go with EaselJS

Not quite sure what you're saying, or what the problem is. What I would do to make a collage would be to seperate each picture into layers. Then maybe rotate some of the pictures by selecting them and right clicking the little nubs with the move selected pixels tool. Sharepoint Training in Chennai | Web Designing Training in Chennai

acemary90:
Not quite sure what you're saying, or what the problem is. What I would do to make a collage would be to seperate each picture into layers. Then maybe rotate some of the pictures by selecting them and right clicking the little nubs with the move selected pixels tool. Sharepoint Training in Chennai | Web Designing Training in Chennai

I think you be specific in terms of Technicality , because what you said simplifies the whole task, he's asking on a technical level.

pcguru1:
HTML5 Canvas + FileReader + Any backend you want

HTML5 Canvas has everything you need to handle images and rotation.. Because Canvas is not retained mode you will need to have Object that store the state of the drawing on the canvas and based on that state re-render your drawing on the screen, imagine a computer looking at a sketch and re-painting the canvas thousand times.

It will take a long time as you have to test with Multiple browsers as Canvas has different behaviour on different browsers. Good luck if this is a client job get ready to charge a lot as you will spend 90% of your time in the HTMLCanvasElement documentation, and also on Matrix Rotation if needed.

Try Paper.js or EaselJS but i would go with EaselJS

Nice one Bro, you no dey disappoint at all.

Supposing one wants to implement various fancy templates and frames such that when a user uploads an image it goes straight to the allocated place inside the template, for example, supposing I have it in mind to create an Xmas Card template such that when a user chooses it and uploads an image It goes to the space for the image(s) and the whole stuff is saved as a single image, can this also be achieved by HTML 5 canvas? www.pizap.com uses flash to achieve this, but I don't particularly like flash

CRAZYMADMAN:


Nice one Bro, you no dey disappoint at all.

Supposing one wants to implement various fancy templates and frames such that when a user uploads an image, for example, supposing I have it in mind to create an Xmas Card template such that when a user chooses it and uploads an image, it goes straight to the allocated place inside the template, can this also be achieved by HTML 5 canvas. www.pizap.com uses flash to achieve this, but I don't particularly like flash

Flash Graphics API and Canvas API are somewhat similar except Flash has more advanced features like filters and much, doing a frame isn't actually something that should be complicated, because you would have prepared an Image with a cut out zone where you want the uploaded image to fit.

However when rendering on Canvas, you need to know that you have an imaginary stack level. meaning it's like an artisit painting over a picture, so you draw the image first and draw the frame later so that the frame sits on top of the image.

Look at this book Friends with Eds though it's in Flash but you can transform the logic in JavaScript i read it when i attempted Game Programming so am familiar with how Computer draws.



My Advice, don't build a Canvas framework from scratch you don't have that luxury go with EaselJS and you can add plugins to it for your own special use-cases.

Infact Flash Graphics/Java Graphics/HTML Canvas/ and maybe C++ GDI kinda are similar so i think you should conceptualize the whole process. As in break it down write an algorithm on how it will work, then break the application into Modules, each Module handling a major part that way it will be easier to build the small small and see how it pans out.

acemary90:
Not quite sure what you're saying, or what the problem is. What I would do to make a collage would be to seperate each picture into layers. Then maybe rotate some of the pictures by selecting them and right clicking the little nubs with the move selected pixels tool. Sharepoint Training in Chennai | Web Designing Training in Chennai

Brother, I think you're talking about using softwares like photoshop, corel draw, etc. But if have websites in mind, then am definitely interested in the [bold] How [/bold]

pcguru1:


Flash Graphics API and Canvas API are somewhat similar except Flash has more advanced features like filters and much, doing a frame isn't actually something that should be complicated, because you would have prepared an Image with a cut out zone where you want the uploaded image to fit.

However when rendering on Canvas, you need to know that you have an imaginary stack level. meaning it's like an artisit painting over a picture, so you draw the image first and draw the frame later so that the frame sits on top of the image.

Look at this book Friends with Eds though it's in Flash but you can transform the logic in JavaScript i read it when i attempted Game Programming so am familiar with how Computer draws.



My Advice, don't build a Canvas framework from scratch you don't have that luxury go with EaselJS and you can add plugins to it for your own special use-cases.

Infact Flash Graphics/Java Graphics/HTML Canvas/ and maybe C++ GDI kinda are similar so i think you should conceptualize the whole process. As in break it down write an algorithm on how it will work, then break the application into Modules, each Module handling a major part that way it will be easier to build the small small and see how it pans out.

Seems all the fancy stuffs are achieved at the frontend. At what point does backend technologie (such as PHP) get called

CRAZYMADMAN:


Seems all the fancy stuffs are achieved at the frontend. At what point does backend technologie (such as PHP) get called

Persistence my brother .... Canvas can output all it's drawing to an image, so The Backend saves the images when through or if it's a dynamic app it can store the settings used for rendering.

Sadly these are the type of things i'd like to challenge myself but when i think about how much am making from it ? I don't bother

pcguru1:


Flash Graphics API and Canvas API are somewhat similar except Flash has more advanced features like filters and much, doing a frame isn't actually something that should be complicated, because you would have prepared an Image with a cut out zone where you want the uploaded image to fit.

However when rendering on Canvas, you need to know that you have an imaginary stack level. meaning it's like an artisit painting over a picture, so you draw the image first and draw the frame later so that the frame sits on top of the image.

Look at this book Friends with Eds though it's in Flash but you can transform the logic in JavaScript i read it when i attempted Game Programming so am familiar with how Computer draws.



My Advice, don't build a Canvas framework from scratch you don't have that luxury go with EaselJS and you can add plugins to it for your own special use-cases.

Infact Flash Graphics/Java Graphics/HTML Canvas/ and maybe C++ GDI kinda are similar so i think you should conceptualize the whole process. As in break it down write an algorithm on how it will work, then break the application into Modules, each Module handling a major part that way it will be easier to build the small small and see how it pans out.

I will look into EaseIJS and compare it with one Raphael.js that I was considering then

pcguru1:


Flash Graphics API and Canvas API are somewhat similar except Flash has more advanced features like filters and much, doing a frame isn't actually something that should be complicated, because you would have prepared an Image with a cut out zone where you want the uploaded image to fit.

However when rendering on Canvas, you need to know that you have an imaginary stack level. meaning it's like an artisit painting over a picture, so you draw the image first and draw the frame later so that the frame sits on top of the image.

Look at this book Friends with Eds though it's in Flash but you can transform the logic in JavaScript i read it when i attempted Game Programming so am familiar with how Computer draws.



My Advice, don't build a Canvas framework from scratch you don't have that luxury go with EaselJS and you can add plugins to it for your own special use-cases.

Infact Flash Graphics/Java Graphics/HTML Canvas/ and maybe C++ GDI kinda are similar so i think you should conceptualize the whole process. As in break it down write an algorithm on how it will work, then break the application into Modules, each Module handling a major part that way it will be easier to build the small small and see how it pans out.

So oga, if you are to build something like this, would you go with flash or Javascipt libraries? What would be the reason(s) for your choice?

Scholar01:


So oga, if you are to build something like this, would you go with flash or Javascipt libraries? What would be the reason(s) for your choice?

Flash is dead obviously JavaScript JavaScript can handle such feat like this. But it means I go read Maths textbook tire

stop wasting time use jQuery UI to develop your site . download the code and and put the the line of code where you want in your folder of your source code .

jQuery UI is built for designers and developers alike.
you can use it for mobile and Web development .

https://jqueryui.com

proxy20:
stop wasting time use jQuery UI to develop your site . download the code and and put the the line of code where you want in your folder of your source code .

jQuery UI is built for designers and developers alike.
you can use it for mobile and Web development .

https://jqueryui.com

Bro, you seem to be of the impression that we are not already familiar with jquery UI. If you can achieve something like this with just jquery UI, then am most curiously interested in HOW you would do that.

Note that what we are talking about is different from image arrangements that you can achieve with some jquery libraries like masonry, tiles, jquery collage, etc

Just continue your work forget jquery UI