Click here to Skip to main content
13,897,535 members
Rate this:
 
Please Sign up or sign in to vote.
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:

<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');
    }
}


<pre><h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
Posted
Updated 7-Jan-19 19:57pm
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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.
   
v2

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web05 | 2.8.190306.1 | Last Updated 8 Jan 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100