Creating irregular crop window on image using Javascript

-

Look at the project structure below, I have only one image under asset folder for testing, under 'libs' folder I have d3 library and numeric library

I am using d3 library to make the crop window and other transition effects and numeric library to calculate positions

So lets look at the code...

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Image Crop</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="background" class="o_image">
<img src="./assets/bill.png" alt="bill" />
<span>©reactcodes blog</span>
</div>
</div>
</body>
<script src="./libs/d3.v3.min.js"></script>
<script src="./libs/numeric-solve.min.js"></script>
<script src="./index.js"></script>
<script src="./crop_window.js"></script>
</html>

index.js

const attachCropBox = function (imgWidth,imgHeight) {
console.log('image loaded : ',imgWidth ,' ', imgHeight)
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = imgWidth - margin.left - margin.right,
height = imgHeight - margin.top - margin.bottom;

var sourcePoints = [[0, 0], [width, 0], [width, height], [0, height]],
targetPoints = [[0, 0], [width, 0], [width, height], [0, height]];

var svg = d3.select("#background").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("id","window_g");

var line = svg.selectAll(".line")
.data(d3.range(0, width + 1, 40).map(function(x) { return [[x, 0], [x, height]]; })
.concat(d3.range(0, height + 1, 40).map(function(y) { return [[0, y], [width, y]]; })))
.enter().append("path")
.attr("class", "line line--x");

var handle = svg.selectAll(".handle")
.data(targetPoints)
.enter().append("circle")
.attr("class", "handle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 7)
.call(d3.behavior.drag()
.origin(function(d) { return {x: d[0], y: d[1]}; })
.on("drag", dragged));

d3.selectAll("button")
.datum(function(d) { return JSON.parse(this.getAttribute("data-targets")); })
.on("click", clicked)
.call(transformed);

function clicked(d) {
d3.transition()
.duration(750)
.tween("points", function() {
if (!(d == null)){
var i = d3.interpolate(targetPoints, d);
return function(t) {
handle.data(targetPoints = i(t)).attr("transform", function(d) { return "translate(" + d + ")"; });
transformed();
};
}
});
}

function dragged(d) {
d3.select(this).attr("transform", "translate(" + (d[0] = d3.event.x) + "," + (d[1] = d3.event.y) + ")");
transformed();
}

function transformed() {
for (var a = [], b = [], i = 0, n = sourcePoints.length; i < n; ++i) {
var s = sourcePoints[i], t = targetPoints[i];
a.push([s[0], s[1], 1, 0, 0, 0, -s[0] * t[0], -s[1] * t[0]]), b.push(t[0]);
a.push([0, 0, 0, s[0], s[1], 1, -s[0] * t[1], -s[1] * t[1]]), b.push(t[1]);
}

var X = solve(a, b, true), matrix = [
X[0], X[3], 0, X[6],
X[1], X[4], 0, X[7],
0, 0, 1, 0,
X[2], X[5], 0, 1
].map(function(x) {
return d3.round(x, 6);
});

line.attr("d", function(d) {
return "M" + project(matrix, d[0]) + "L" + project(matrix, d[1]);
});
}
function project(matrix, point) {
point = multiply(matrix, [point[0], point[1], 0, 1]);
return [point[0] / point[3], point[1] / point[3]];
}

function multiply(matrix, vector) {
return [
matrix[0] * vector[0] + matrix[4] * vector[1] + matrix[8 ] * vector[2] + matrix[12] * vector[3],
matrix[1] * vector[0] + matrix[5] * vector[1] + matrix[9 ] * vector[2] + matrix[13] * vector[3],
matrix[2] * vector[0] + matrix[6] * vector[1] + matrix[10] * vector[2] + matrix[14] * vector[3],
matrix[3] * vector[0] + matrix[7] * vector[1] + matrix[11] * vector[2] + matrix[15] * vector[3]
];
}
}

window.onload = function() {
var img = new Image();
img.onload = function () {
const imgWidth = img.width;
const imgHeight = img.height;
attachCropBox(imgWidth,imgHeight)
}
img.src = "./assets/bill.png";
}

style.css

body{
margin:0;
padding: 0;
}
.container{
display: flex;
}
.container .o_image{
width: 50%;
}
.container .p_image{
width: 50%;
text-align: center;
}
span{
display: block;
}
img{
border: 1px solid blue;
}
.b_container{
text-align: center;
width: 100%;
}
button{
width: 80px;
height: 30px;
border: none;
background-color: coral;
}
svg {
position: absolute;
top: 0;
left: 0;
}
.line {
stroke: blue;
stroke-width: 0.7px;
stroke-linecap: square;
}
.handle {
fill: blue;
pointer-events: all;
stroke:blue;
stroke-width: 2px;
cursor: move;
opacity: 0.8;
}


Thanks for visiting my blog... have a nice day

Comments

  1. Edgar C. JonesJune 25, 2021 at 6:28 AM

    What a very good article. I appreciate your post.We are an PHOTO CROPPING Company. Recently we have post an article about add brushes to photoshop and Vehicles Background Replacement. Please check out. Thanks

    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