Code

HTML 5 Upload Image, Ratio with Drag and Drop

HTML 5 Upload Image, Ratio with Drag and Drop

By
Cart 1,972 sales

A HTML5 Upload image tool, full use of HTML5 with canvas (with fallback options). Together with a ratio and drag & drop makes this tool ideal for use in a CMS.

Features

  • uses canvas to crop the image, no server scripts needed!
  • want to use a server script, no problem! simple change it with additional options
  • full HTML5 support
  • touch support! Works on tablet and mobile!
  • Responsive design option
  • save your image with AJAX or use the tradional FORM input file element
  • uses ratio to let it fit your screen or element
  • easy to use
  • additional options to configure
  • bootstrap 3.1
  • jQuery 1.9

UPDATE: jan. 24

  • New: Download button
  • New: Force not saving and pushing your own save function

UPDATE: nov. 21

  • Improvement: Script is working with tablet and phone!
  • New: Resize option added for responsive design

UPDATE: nov. 17

  • New: Save original option added

UPDATE: oct. 24

  • Bugfix: Tools appear when reediting form
  • Bugfix: Rounding floats to int

UPDATE: oct. 20

  • Bugfix: Input required will remain after deleting image

UPDATE: oct. 13

  • Improvement: Saving button show directly when clicking
  • Improvement: Mimetype on toDataURL
  • Improvement: Hide buttons with data-button-edit = false
  • Improvement: Set save text with data-save-label = “Saving”
  • Improvement: Documentation
  • Bugfix: Background text not hidding with transparent PNG
  • Bugfix: Wrong script usage in demo

UPDATE: oct. 6

  • New: Server image
  • New: POST only dimensions
  • Improvement: Buttons all have own CSS label for your own implementation

Update september 25th

  • NEW: existing image preview
  • NEW: remove existing image or uploaded image
  • IMPROVEMENT: Better error response
  • IMPROVEMENT: PHP script examples
  • BIGFIX: ajax=false not removing editor
  • BUGFIX: double image with canvas
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey