Basically how do sites like picfont work? Or those cake design sites where you have a template and you insert your picture into the frame and add & stylise text to the textbox?
I have an invite ad for a programme, where people put their picture and name and send out a personal invite. So the graphics guy has done the template. Rather than having 1000 people send him their photos and names, I know it's possible to put the template on a web page and have people upload their pictures, do some custom edit and stylise their names.
HOW do I do this, please? I would like some pointers or code I can implement, please. Thank you.
As mentioned, you will need the <Canvas> element for this, but this needs some custom development as well.
I took the liberty of creating a good starting point: https://jsfiddle.net/Zomry/f8to2fyq/11/
This demo loads a background image, can insert a custom image (assumed to be square here) and allows the location of custom text.
You can change this example to whatever you like. You will need to change the background, the positions of the text and the background and whatever you like to change with it.
Good luck with your project.
Related
Probably not the best title, also, that why I ask here, describing this to a human may help me, describing it on google won't. I tried searching but I couldn't find.
How can I display some info about the destination of a link when hovering over it? For example if the link is towards a forum post I want to display a summary of the contents of the post, or if it is towards a site, display the site logo, title, a summary of the page? etc.
That has nothing to do with Laravel... well, Laravel could provide you with that info but the interaction that you're describing should be achieved with JavaScript/CSS on hovering an element.
Mock up those elements with HTML/CSS first, how they would look, and then use JS (or a JS library) to make it dynamic on certain actions (i.e: hover).
Just use an html tooltip attribute. Should be all you need.
https://www.w3schools.com/css/css_tooltip.asp
Or if you need more complex elements just write js / jquery code for the class Onhover action
I would like to know the best web technology/js library to achieve this functionality. I need to change the colors of specific objects inside an image. I need to develop a tool where they can choose a color and the objects inside the image will turn into that color.
This is a very close example of what I need. I've been reading about canvas but I haven't been able to find anything close.
www.msistone.com/virtual-kitchen-designer
Thanks in advance!
There are no magic or elaborated algorithm on it. They simply are using some PNG images and then they put the style tiles images before, so it looks like a texture changed or like if they uses a filter. You can realize of how it works watching the source code
The simplest way to target specific objects ( wall tiles, tables, floors, etc. ) within an image is in post production with an image editing application such as Photoshop, Artweaver, Paint.net, Inkscape, etc. and switch out images upon user selection using CSS or JavaScript. You replace the entire image this way and the minor changes show through when the image is switched.
If you don't want to do this manually there is no easy programmatic approach. For more information on coding applications to recognize objects look into machine learning and shape recognition algorithms but I suspect that is beyond the scope of a simple web app.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this
I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.
First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (http://getbootstrap.com/).
Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project: http://admindesigns.com/framework/dashboard.html
After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)
Cheers,
Chris
I want to edit image in real-time with javascript only. Im new to Js, so this may be dumb question...
I have 3 images:
Background
Car one
Car two
I want to display one on each other in real time. It should look like this:
And the cars should be moving there and back (I must be able to edit their position without refreshing the page).
Im not asking for complete solution, just a few links or pages and some information where to start with. I know Javascript syntax, I just have never used it in any website. If it's not possible, or it would be too hard, I gonna use flash or Java aplet, Im okay to use jQuery or other Javascript libraries. Thank you for any clues!
You might want to check out jQuery animate and z-indexes. What you'll want to do is with z-index place one on top of the other, then animate with jQuery accordingly.
http://api.jquery.com/animate/
http://css-tricks.com/almanac/properties/z/z-index/