Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perfect

Love Brynge
Love Brynge
12,635 Points
Posted by Love Brynge
Love Brynge
12,635 Points

Email drawing?

Is it possible to create a function so that I could email the drawing to a specified adress?

//Love

Jacob Mishkin
Jacob Mishkin
23,118 Points

Do you mean, have a button that says "email your drawing to a friend" or something? what do you mean by a specified address?

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I tinkered with this a bit, and the short answer is that you can't do this with just jQuery. The mailto: option is just too limited, and can't accept something like an image.

You can do this with a bit of AJAX and something like Mandrill, but that's probably a little beyond the scope of this course.

If you're interested in expanding on the project, you could try saving a current snapshot of the canvas and displaying it below the drawing app. That is certainly possible. :)

Happy coding!

Love Brynge
Love Brynge
12,635 Points
Love Brynge
Love Brynge
12,635 Points

Ok! thanks!!

sooo, if I wanted to display it, how would I go about that? :)

Jacob Mishkin
Jacob Mishkin
23,118 Points

Love,

If you want to save the image this might help. This site is a great place to look up questions.

http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server

I hope this helps.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

How about something like...

// Save a snapshot of the current image.
var $saveImage = $('#saveImage'); // Save image button.
var $snapshots = $('#snapshots'); // Div for displaying snapshots.
$saveImage.click(function(){ // When you click the save image button...
  var canvas = document.getElementsByTagName("canvas")[0]; // Get the canvas element.
  var image = new Image(); // Create a new image.
  image.src = canvas.toDataURL(); // Set the image source to the canvas data URI
  $snapshots.append(image); // Append the snapshot to the div.
}); // End save image onclick.

  <!-- Save Image Button and Snapshots Div -->
  <button id="saveImage">Save Your Drawing</button>
  <div id="snapshots"></div>

/* Might as well make it look nicer... */
#saveImage {
  border: none;
    border-radius: 5px;
    margin: 10px auto;
    padding: 5px 20px;
    width: 320px;
}

#snapshots {
  box-sizing: border-box;
  margin: 1.5rem 5%;
  overflow: auto;
}

#snapshots img {
  margin: 1.5rem 2.5%;
  max-width: 42.5%;
  border: 0.25rem solid black;
}

#snapshots img:nth-child(odd) { float: left; }
#snapshots img:nth-child(even) { float: right; }