Praveen Singh

HTML5 Canvas Image cropper: pan, zoom and crop

Introduction

HTML5 Canvas Image cropper: pan, zoom and crop

In this article, we will be building a pure client side Image cropper, with absolutely no help from server. We will be using HTML5 Canvas technology to achieve that.

Image cropper can be made in different way, we are going for pan and zoom option here, where you can move the background image, zoom in or out and then crop it.

Demo


Video tutorial


9 comments:

  1. Great stuff. Thanks bro. Please how can I upload the cropped image to my server.

    ReplyDelete
  2. Thank you very much, i would like to know how to use it in a server and how to move the image draw in the canvas for saving it in a folder in my website

    ReplyDelete
  3. Uncaught TypeError: Cannot read property 'getContext' of null , got this error.

    ReplyDelete


  4. Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

    Personal Installment Loans
    Title Car loan
    Cash Advance Loan

    ReplyDelete
  5. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  6. Hi Praveen,
    Great tutorial! Can this be done with video as well? Ie, if I have a UHD video file (3840 x 2160) and, say I want to be able to zoom within a HD or HD-ready sized rectangle (1920 x 1080 or 1280 x 720) up to 120% of the UHD video within that crop rectangle..

    ReplyDelete
  7. Ah, upon closer look I see that what I’m looking for is a bit different than what this HTML does. I would like to do what the example shows to the left, then also be able to pan around in the image.. A lot like a fixed mask with floating content. Sure, the generate new image ability could also be a of interest for our use. But first and foremost, we’re investigating whether the HTML5 and elements together supports a crop/pan/zoom ability at all?

    ReplyDelete