Image Perspective correction using Javascript and OpenCV

-
Hello everyone, in this article I am going to explain how we can crop an image with irregular rectangular window and correct perspective to get a regular rectangular image frame. Find the final result below :


How this cropping and perspective correction is done in this project, the below animation shows



Well now lets discuss about the steps I followed to implement this. 

I hope you have gone through my crop window making over an image post, if you have't please visit 

https://reactcodes.blogspot.com/2019/11/creating-irregular-crop-window-on-image.html 


It is important because, that is the first step. A quick summery of that post, I am taking an image in background, I am using d3 to create an svg element which is acting like an crop box, I have added some dragging function to adjust the corner, so that any image portion of any shape can be cropped.

After this step, I have setup basic UI git show the output side by side. I have added canvas and using opencv javascript library to paint the image portion into new canvas.

You will find the full code in below GitHub link so I am not adding much code in this article, will only go through some important snippets.

Getting all 4 corners of cropbox

const children = document.querySelectorAll('#window_g .handle')

Load img src into the canvas

utils.loadImageToCanvas(imageUsed, 'imageInit') 

Calculate the scale factor as canvas size might be different, so that we can calculate previous point positions according to canvas position.

const scaleFactor = parseInt(imageWidth / svgCropWidth)

Finally put the irregular cropped portion into the regular destination canvas which is rectangular


    let dst = new cv.Mat();

    let dsize = new cv.Size(imageHeight, imageWidth);

    let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, pointsArray);

    let dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, imageHeight, 0, imageHeight, imageWidth, 0, imageWidth]);

    let M = cv.getPerspectiveTransform(srcTri, dstTri);

    cv.warpPerspective(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());

    document.getElementById('imageInit').style.display = "none"

    cv.imshow('imageResult', dst);

GitHub link for this project code : https://github.com/reactcodes/crop-perspective-correction-image

If you are facing any issues regarding this code kindly let me know by commenting below.

If you like the article Kindly follow my blog and subscribe to get daily updates, it will encourage me a lot. Thanks for visiting... :)

Comments

  1. UnknownApril 12, 2021 at 2:49 AM

    Hi, Will this work for video as well?

    ReplyDelete
  2. UnknownApril 16, 2021 at 4:29 AM

    I've downloaded the project source from github and opened index.html in my browser. But on cropping i don't see cropped out(which is shown in the above gif). I dont see any difference in output.

    ReplyDelete
  3. sharifJune 30, 2021 at 4:59 AM

    Hi i saw your github project i see, after apply click the image remain same nothing come like your photo here,, i mean the right side image

    ReplyDelete
    Replies
    1. kalyan pradhanJuly 27, 2021 at 1:32 PM

      I tried to run it on a server and the project worked well, give it a try! without server the issue is CORS issue which is generated by browser

      Delete
  4. UnknownSeptember 1, 2021 at 12:04 AM

    I am trying to make your code work in my machine. I certainly dont understand how you manage to make the crop, I see you add +1200 to width of canvas but you substract -1200 to height ???? Why is that for??

    And when you create the image in the imageInit you drawImage putting width to height and height to width ? Can you explain a little bit more?

    ReplyDelete

Post a Comment

Popular posts from this blog

Best coding practice and structure for redux saga with react hooks | Separate watcher and worker saga | React clean code

-
Image
Hello everyone, in this article we are going to learn about proper use of redux saga, some effects of redux saga like put, call, take, takeEvery etc. Along with that we are going to separate saga files into watcher and worker for improving code readability. Let's create a simple react application with will render list of data on click of a button. Whenever user clicks on the button an endpoint is called and data is fetched from a remote server. We will use a sample endpoint provided by  reqres.in Finished application looks like below screenshot : Folder structure for this application will look like below: components : will have all the components we will use for the app components -> style : will have separate folder and file to hold the styling REDUX setup : constants  -> index : will hold all action types and constant values actions  -> index : will hold all the actions reducers -> index : is the root reducer reducers -> ot...
Read more

How to use redux with React Hooks - Creating TodoList

-
Image
Hello everyone in this article we are going to take a look at how we can use redux with React Hooks. # What are React Hooks React Hooks are functions that let us hook into React State and lifecycle features from functional components. Using redux with react hooks conceptually is same as we use it in class components but syntax wise they are bit different To learn about this today we are going to create a simple ToDo List Application, here is a quick look Use create-react-app to initialise a react app and install dependencies  redux, react-redux You will have basic react app folder structure by now. So let's create the redux store import { createStore } from 'redux' ; const INITIAL_STATE = { data : [ 'Get up early' , 'Have Breakfast' , 'Start coding' ], }; function tasks(state = INITIAL_STATE, action) { switch (action.type) { case 'ADD_TASK' : return { ...state, dat...
Read more

Setting up Redux Devtools for React applications

-
Image
Hello everyone, in this article we are going to look at how can we set up redux devtools for react applications which are using redux. As a reference we will take our previous tutorial's redux setup. Visit : Best coding practice and structure for redux saga with react hooks | Separate watcher and worker saga | React clean code How to install Redux Devtools? To install Redux Dev, if you are using Google Chrome, go to chrome web store or  https://chrome.google.com/webstore/category/extensions Search redux devtools Select below extension Install the extension After successful installation an icon for the same should be added beside chrome url bar. Now whenever you run a react application which is using redux the icon will glow. Refer below mark on the screenshot: Now let's focus on code As mentioned in the above tutorial , Store file for redux setup looks like below : import { createStore,applyMiddleware } from 'redux' import root...
Read more