I want to create a canvas.js application for image editing for cars

Question

0.00/5 (No votes)

See more:

, +

Hi I was thinking of doing a side project on canvas .js and I’m really into cars and wanted to see if there was a way of creating a site for car lovers to upload images of their car and have other canvas elements that they could drag and drop on to the image that they uploaded and change for instance the wheels lets say.
So that they could edit their car digitally online before actually doing it if anyone could point me in the right direction that would be great, I’m a newbie at canvas but im willing to learn.

thanks to who ever reads this and replies means a lot

What I have tried:

JavaScript

<pre>var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        ctx.drawImage(img, 20,20);
        alert('the image is drawn');
    }
}

HTML

<pre><h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>

Posted 6-Jan-19 2:55am

Member 14109498

Updated 7-Jan-19 19:57pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prasad Nikumbh · Answer 1 · 2019-01-07T19:57:00

Hi,

You can do this application but first you have to create a database for the same where you have to mention size of image ,location(x and y) and all.After that,you can search for events of canvas and also there are some jquery libraries available like jquery.Jcrop.js so you can use that cropping and resizing.
Events like onclick or resizing,moving,etc.you have to brainstorm for these logic.
By raising particular events, you can get the current size and location and you can save that location and size in db.so that when you open that theme afterwards you can get the same location and size of that particular image.Also,you can create other thing like can add the text,add image,or something else and then after that,you can get all location of that particular image and save it in database.

Thanks.