I am trying to make an element follow the cursor with an added dead zone behaviour.
As long as the cursor moves within a radius of 100 pixels around the element, then the element should not move. Otherwise the element should follow behind the cursor when the 100 pixel radius is exceeded (in any direction). I don't want the orb to catch up with the cursor so it would prevent clicking on other elements, but rather stay on the edge of the dead zone.
In my example, the element is pushed away from the cursor, which is not what I want.
NOTE: I want a native JavaScript solution that doesn't use a library, like jQuery's stop().animate().
const $TheOrb = document.getElementById('TheOrb')
const deadzone = 100
document.addEventListener('mousemove', (event = {}) => {
const x = Math.abs(event.pageX - ($TheOrb.getBoundingClientRect().left + $TheOrb.clientWidth / 2))
const y = Math.abs(event.pageY - ($TheOrb.getBoundingClientRect().top + $TheOrb.clientHeight / 2))
if (x > deadzone || y > deadzone)
$TheOrb.style.transform = `translate(${
event.pageX - $TheOrb.clientWidth / 2 + deadzone // Don't work correctly with dead zone!
}px, ${
event.pageY - $TheOrb.clientHeight / 2 + deadzone // Don't work correctly with dead zone!
}px)`
})
#TheOrb {
position: absolute;
padding: 1em;
background-color: red;
font-size: 1.2em;
font-style: open-sans;
color: #fff;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
transition: .1s;
}
<div id="TheOrb">Voff!</div>
New Version
I have made a new version, which uses transform: translate() instead of the left and right properties. It also ensures the orb stops at the deadzone distance when moving towards the cursor. I have also removed transition: 0.2s.
const $TheOrb = document.getElementById('TheOrb');
const deadzone = 100;
let orbX = 0;
let orbY = 0;
document.addEventListener('mousemove', e => {
const x = e.pageX - (orbX + $TheOrb.clientWidth / 2);
const y = e.pageY - (orbY + $TheOrb.clientHeight / 2);
if (x > deadzone) {
orbX = e.pageX - $TheOrb.clientWidth / 2 - deadzone;
} else if (Math.abs(x) > deadzone) {
orbX = e.pageX - $TheOrb.clientWidth / 2 + deadzone;
}
if (y > deadzone) {
orbY = e.pageY - $TheOrb.clientHeight / 2 - deadzone;
} else if (Math.abs(y) > deadzone) {
orbY = e.pageY - $TheOrb.clientHeight / 2 + deadzone;
}
$TheOrb.style.transform = `translate(${orbX}px, ${orbY}px)`;
});
#TheOrb {
position: absolute;
padding: 1em;
background-color: red;
font-size: 1.2em;
font-style: open-sans;
color: #fff;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
}
<div id="TheOrb">Voff!</div>
Old Version
I have rewritten the JavaScript to use the CSS left and top properties instead of transform. I have also added transition: 0.2s; to the CSS, so that the orb follows the mouse smoothly.
const $TheOrb = document.getElementById('TheOrb');
const deadzone = 100;
document.addEventListener('mousemove', e => {
const x = Math.abs(e.pageX - (Number($TheOrb.style.left.replace('px', '')) + $TheOrb.clientWidth / 2));
const y = Math.abs(e.pageY - (Number($TheOrb.style.top.replace('px', '')) + $TheOrb.clientHeight / 2));
if (x > deadzone || y > deadzone) {
$TheOrb.style.left = e.pageX - $TheOrb.clientWidth / 2 + 'px';
$TheOrb.style.top = e.pageY - $TheOrb.clientHeight / 2 + 'px';
}
});
#TheOrb {
position: absolute;
padding: 1em;
background-color: red;
font-size: 1.2em;
font-style: open-sans;
color: #fff;
border: 2px solid #000;
border-radius: 50%;
cursor: pointer;
transition: 0.2s;
}
<div id="TheOrb">Voff!</div>
Related
I'm trying to draw a diagonal line with CSS and JS between to elements like this.
I have two divs that I know both of their left and top coordinates.
<div class='wrapper'>
<div class='point' style='left: 40px; top: 40px;'></div>
<div class='point' style='left: 260px; top: 120px;'></div>
<div class='line'></div>
</div>
But how to calculate rotation degree and height value here?
const point1 = document.getElementsByClassName('point')[0]
const point2 = document.getElementsByClassName('point')[1]
const line = document.getElementsByClassName('line')[0]
const lineLeft = parseInt(point1.style.left) + point1.clientWidth
const lineTop = parseInt(point1.style.top) + point1.clientHeight
line.style.left = `${lineLeft}px`
line.style.top = `${lineTop}px`
line.style.height = '?'
line.style.transform = 'rotate(?deg)'
Here's the CodePen version of it.
If you have to do this via CSS and Javascript, it is possible but not ideal. You'll have to do some extra work to calculate the angle between the points and the distance between your points. Take a look at the sample below:
const point1 = document.getElementsByClassName('point')[0]
const point2 = document.getElementsByClassName('point')[1]
const line = document.getElementsByClassName('line')[0]
// Find the points based off the elements left and top
var p1 = {x: point1.offsetLeft, y: point1.offsetTop};
var p2 = {x: point2.offsetLeft, y: point2.offsetTop};
// Get distance between the points for length of line
var a = p1.x - p2.x;
var b = p1.y - p2.y;
var length = Math.sqrt( a*a + b*b );
// Get angle between points
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
// Get distance from edge of point to center
var pointWidth = point1.clientWidth / 2;
var pointHeight = point1.clientWidth / 2;
// Set line distance and position
// Add width/height from above so the line starts in the middle instead of the top-left corner
line.style.width = length + 'px';
line.style.left = (p1.x + pointWidth)+ 'px';
line.style.top = (p1.y + pointHeight) + 'px';
// Rotate line to match angle between points
line.style.transform = "rotate(" + angleDeg + "deg)";
.wrapper {
width: 320px;
height: 180px;
position: relative;
border: 1px solid #aaa;
background-color: #eee;
}
.point {
width: 20px;
height: 20px;
position: absolute;
background-color: #555;
}
.line {
position: absolute;
height:2px;
background-color: #d63030;
transform-origin: left;
}
<div class='wrapper'>
<div class='point' style='left: 40px; top: 40px;'></div>
<div class='point' style='left: 260px; top: 120px;'></div>
<div class='line'</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
This seems to be possible in the mobile version of interact.js while I am looking for a solution that works also in standard desktop browser.
I've found one solution on this Blog by bhch
Here is the code:
/*
* Some code borrowed from: https://codepen.io/taye/pen/wrrxKb
*/
interact('.rotation-handle')
.draggable({
onstart: function(event) {
var box = event.target.parentElement;
var rect = box.getBoundingClientRect();
// store the center as the element has css `transform-origin: center center`
box.setAttribute('data-center-x', rect.left + rect.width / 2);
box.setAttribute('data-center-y', rect.top + rect.height / 2);
// get the angle of the element when the drag starts
box.setAttribute('data-angle', getDragAngle(event));
},
onmove: function(event) {
var box = event.target.parentElement;
var pos = {
x: parseFloat(box.getAttribute('data-x')) || 0,
y: parseFloat(box.getAttribute('data-y')) || 0
};
var angle = getDragAngle(event);
// update transform style on dragmove
box.style.transform = 'translate(' + pos.x + 'px, ' + pos.y + 'px) rotate(' + angle + 'rad' + ')';
},
onend: function(event) {
var box = event.target.parentElement;
// save the angle on dragend
box.setAttribute('data-angle', getDragAngle(event));
},
})
function getDragAngle(event) {
var box = event.target.parentElement;
var startAngle = parseFloat(box.getAttribute('data-angle')) || 0;
var center = {
x: parseFloat(box.getAttribute('data-center-x')) || 0,
y: parseFloat(box.getAttribute('data-center-y')) || 0
};
var angle = Math.atan2(center.y - event.clientY,
center.x - event.clientX);
return angle - startAngle;
}
body {
font-family: sans-serif;
}
.box {
width: 150px;
height: 100px;
position: relative;
background-color: #4be091;
border-radius: 6px;
}
.rotation-handle {
padding: 3px 4px;
display: table;
position: absolute;
left: 50%;
right: 50%;
bottom: -35px;
background-color: #ff1661;
border-radius: 10rem;
line-height: 1;
text-align: center;
font-weight: bold;
color: #fff;
cursor: move;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<p>
<strong>Rotate the box using the red handle.</strong>
</p>
<div class="box">
<div class="rotation-handle">↻</div>
</div>
I am writing an image viewer JS component and i'm currently stuck on the calculation for the zooming in. I figured out the zooming in or out on one point (instead of just the center) using css transforms. I'm not using transform-origin because there will be multiple points of zooming in or out, and the position must reflect that. However, that's exactly where i'm stuck. The algorithm i'm using doesn't calculate the offset correctly after trying to zoom in (or out) when the mouse has actually moved from the initial position and I can't for the life of me figure out what's missing in the equation.
The goal is whenever the mouse is moved to another position, the whole image should scale with that position as the origin, meaning the image should scale but the point the mouse was over should remain in its place.
For reference, look at this JS component. Load an image, zoom in somewhere, move your mouse to another position and zoom in again.
Here's a pen that demonstrates the issue in my code: https://codepen.io/Emberfire/pen/jOWrVKB
I'd really apreciate it if someone has a clue as to what i'm missing :)
Here's the HTML
<div class="container">
<div class="wrapper">
<div class="image-wrapper">
<img class="viewer-img" src="https://cdn.pixabay.com/photo/2020/06/08/17/54/rain-5275506_960_720.jpg" draggable="false" />
</div>
</div>
</div>
Here's the css that i'm using for the component:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
transition: all .1s;
position: relative;
}
.image-wrapper {
position: absolute;
}
.wrapper img {
position: absolute;
transform-origin: top left;
}
And here's the script that calculates the position and scale:
let wrapper = document.querySelector(".wrapper");
let image = wrapper.querySelector(".image-wrapper");
let scale = 1;
image.querySelector("img").addEventListener("wheel", (e) => {
if (e.deltaY < 0) {
scale = Number((scale * 1.2).toFixed(2));
let scaledX = e.offsetX * scale;
let scaledY = e.offsetY * scale;
imageOffsetX = e.offsetX - scaledX;
imageOffsetY = e.offsetY - scaledY;
e.target.style.transform = `scale3d(${scale}, ${scale}, ${scale})`;
image.style.transform = `translate(${imageOffsetX.toFixed(2)}px, ${imageOffsetY.toFixed(2)}px)`;
} else {
scale = Number((scale / 1.2).toFixed(2));
let scaledX = e.offsetX * scale;
let scaledY = e.offsetY * scale;
imageOffsetX = e.offsetX - scaledX;
imageOffsetY = e.offsetY - scaledY;
e.target.style.transform = `scale3d(${scale}, ${scale}, ${scale})`;
image.style.transform = `translate(${imageOffsetX}px, ${imageOffsetY}px)`;
}
});
Thinking a little, I understood where the algorithm failed. Your calculation is focused on the information of offsetx and offsety of the image, the problem is that you were dealing with scale and with scale the data like offsetx and offsety are not updated, they saw constants. So I stopped using scale to enlarge the image using the "width" method. It was also necessary to create two variables 'accx' and 'accy' to receive the accumulated value of the translations
let wrapper = document.querySelector(".wrapper");
let image = wrapper.querySelector(".image-wrapper");
let img = document.querySelector('img')
let scale = 1;
let accx = 0, accy = 0
image.querySelector("img").addEventListener("wheel", (e) => {
if (e.deltaY < 0) {
scale = Number((scale * 1.2));
accx += Number(e.offsetX * scale/1.2 - e.offsetX * scale)
accy += Number(e.offsetY * scale/1.2 - e.offsetY * scale)
} else {
scale = Number((scale / 1.2));
accx += Number(e.offsetX * scale * 1.2 - e.offsetX * scale)
accy += Number(e.offsetY * scale * 1.2 - e.offsetY * scale)
}
e.target.style.transform = `scale3D(${scale}, ${scale}, ${scale})`
image.style.transform = `translate(${accx}px, ${accy}px)`;
});
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
transition: all 0.1s;
position: relative;
}
.image-wrapper {
position: absolute;
}
.wrapper img {
position: absolute;
transform-origin: top left;
}
.point {
width: 4px;
height: 4px;
background: #f00;
position: absolute;
}
<div class="container">
<div class="wrapper">
<div class="image-wrapper">
<img class="viewer-img" src="https://cdn.pixabay.com/photo/2020/06/08/17/54/rain-5275506_960_720.jpg" draggable="false" />
</div>
</div>
</div>
Preview the effect here: JsFiddle
You're missing to calculate the difference in the transform points after an element scales.
I would suggest to use transform-origin set to center, that way you can center initially your canvas using CSS flex.
Create an offset {x:0, y:0} that is relative to the canvas transform-origin's center
const elViewport = document.querySelector(".viewport");
const elCanvas = elViewport.querySelector(".canvas");
let scale = 1;
const scaleFactor = 0.2;
const offset = {
x: 0,
y: 0
}; // Canvas translate offset
elViewport.addEventListener("wheel", (ev) => {
ev.preventDefault();
const delta = Math.sign(-ev.deltaY); // +1 on wheelUp, -1 on wheelDown
const scaleOld = scale; // Remember the old scale
scale *= Math.exp(delta * scaleFactor); // Change scale
// Get pointer origin from canvas center
const vptRect = elViewport.getBoundingClientRect();
const cvsW = elCanvas.offsetWidth * scaleOld;
const cvsH = elCanvas.offsetHeight * scaleOld;
const cvsX = (elViewport.offsetWidth - cvsW) / 2 + offset.x;
const cvsY = (elViewport.offsetHeight - cvsH) / 2 + offset.y;
const originX = ev.x - vptRect.x - cvsX - cvsW / 2;
const originY = ev.y - vptRect.y - cvsY - cvsH / 2;
const xOrg = originX / scaleOld;
const yOrg = originY / scaleOld;
// Calculate the scaled XY
const xNew = xOrg * scale;
const yNew = yOrg * scale;
// Retrieve the XY difference to be used as the change in offset
const xDiff = originX - xNew;
const yDiff = originY - yNew;
// Update offset
offset.x += xDiff;
offset.y += yDiff;
// Apply transforms
elCanvas.style.scale = scale;
elCanvas.style.translate = `${offset.x}px ${offset.y}px`;
});
* {
margin: 0;
box-sizing: border-box;
}
.viewport {
margin: 20px;
position: relative;
overflow: hidden;
height: 200px;
transition: all .1s;
outline: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.canvas {
flex: none;
}
<div class="viewport">
<div class="canvas">
<img src="https://cdn.pixabay.com/photo/2020/06/08/17/54/rain-5275506_960_720.jpg" draggable="false" />
</div>
</div>
For more info head to this answer: zoom pan mouse wheel with scrollbars
I was playing around with JavaScript/canvas and I want my objects color to depend on the distance to its center from current mouse position.This is my current function that gets color every mousemove event:
function getColorFromDistance(node1,node2){
var dist = getDist(node1,node2); //Getting distance;
var cl = (Math.round(255/dist*255)).toString(16); //this needs to be a propper formula
return "#" + cl + cl + cl; //converting to hex
}
Currently I get a blink effect when the distance gets 255.
I need a way to get the colors strength be depended on the distance, so that the further mouse is away from object the more its darken and when mouse is on the objects center its fully white.Well you get the idea.I just need the formula
The formula would be calculate the distance between the two points and get a percentage based on the maximum value (width of canvas/window)
//this would need to be recalulated on resize, but not doing it for demo
var targetElem = document.querySelector("div.x span");
box = targetElem.getBoundingClientRect(),
x = box.left + box.width/2,
y = box.top + box.height/2,
winBox = document.body.getBoundingClientRect(),
maxD = Math.sqrt(Math.pow(winBox.width/2, 2) + Math.pow(winBox.height/2, 2));
document.body.addEventListener("mousemove", function (evt) {
var diffX = Math.abs(evt.pageX-x),
diffY = Math.abs(evt.pageY-y),
distC = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2)),
strength = Math.ceil(255 - (distC/maxD*255)).toString(16),
color = "#" + strength + strength + strength;
targetElem.style.backgroundColor = color;
});
html, body { height: 100%; }
div.x { position: absolute; top: 50%; left:50%; }
span { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid black; overflow: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Test</p>
<div class="x"><span> </span></div>
I implement this resize and crop tool on my website : http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/
I changed some codes to have what I want, like a final crop picture with a size of 390px * 390px.
It works fine, but my site is responsive, and on a mobile device, the website width is 320px.
How can I changed my code to, on mobile version, have a smallest crop zone, but a final picture of 390px * 390px ?
Thanks.
Javascript code :
var resizeableImage = function(image_target) {
// Some variable and settings
var $container,
orig_src = new Image(),
image_target = $(image_target).get(0),
event_state = {},
constrain = false,
min_width = 100, // Change as required
min_height = 100,
max_width = 900, // Change as required
max_height = 900,
resize_canvas = document.createElement('canvas');
init = function(){
// When resizing, we will always use this copy of the original as the base
orig_src.src=image_target.src;
// Wrap the image with the container and add resize handles
$(image_target).wrap('<div class="resize-container"></div>')
.before('<span class="resize-handle resize-handle-nw"></span>')
.before('<span class="resize-handle resize-handle-ne"></span>')
.after('<span class="resize-handle resize-handle-se"></span>')
.after('<span class="resize-handle resize-handle-sw"></span>');
// Assign the container to a variable
$container = $(image_target).parent('.resize-container');
// Add events
$container.on('mousedown touchstart', '.resize-handle', startResize);
$container.on('mousedown touchstart', 'img', startMoving);
$('.js-crop').on('click', crop);
};
startResize = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove', resizing);
$(document).on('mouseup touchend', endResize);
};
endResize = function(e){
e.preventDefault();
$(document).off('mouseup touchend', endResize);
$(document).off('mousemove touchmove', resizing);
};
saveEventState = function(e){
// Save the initial event details and container state
event_state.container_width = $container.width();
event_state.container_height = $container.height();
event_state.container_left = $container.offset().left;
event_state.container_top = $container.offset().top;
event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// This is a fix for mobile safari
// For some reason it does not allow a direct copy of the touches property
if(typeof e.originalEvent.touches !== 'undefined'){
event_state.touches = [];
$.each(e.originalEvent.touches, function(i, ob){
event_state.touches[i] = {};
event_state.touches[i].clientX = 0+ob.clientX;
event_state.touches[i].clientY = 0+ob.clientY;
});
}
event_state.evnt = e;
};
resizing = function(e){
var mouse={},width,height,left,top,offset=$container.offset();
mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// Position image differently depending on the corner dragged and constraints
if( $(event_state.evnt.target).hasClass('resize-handle-se') ){
width = mouse.x - event_state.container_left;
height = mouse.y - event_state.container_top;
left = event_state.container_left;
top = event_state.container_top;
} else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = mouse.y - event_state.container_top;
left = mouse.x;
top = event_state.container_top;
} else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = event_state.container_height - (mouse.y - event_state.container_top);
left = mouse.x;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
} else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){
width = mouse.x - event_state.container_left;
height = event_state.container_height - (mouse.y - event_state.container_top);
left = event_state.container_left;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
}
// Optionally maintain aspect ratio
if(constrain || e.shiftKey){
height = width / orig_src.width * orig_src.height;
}
/*if(width > min_width && height > min_height && width < max_width && height < max_height){
// To improve performance you might limit how often resizeImage() is called
resizeImage(width, height);
// Without this Firefox will not re-calculate the the image dimensions until drag end
$container.offset({'left': left, 'top': top});
}*/
if(width > min_width && height > min_height /*&& width < max_width && height < max_height*/){
// To improve performance you might limit how often resizeImage() is called
resizeImage(width, height);
// Without this Firefox will not re-calculate the the image dimensions until drag end
$container.offset({'left': left, 'top': top});
}
}
resizeImage = function(width, height){
resize_canvas.width = width;
resize_canvas.height = height;
resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
$(image_target).attr('src', resize_canvas.toDataURL("image/png"));
};
startMoving = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove', moving);
$(document).on('mouseup touchend', endMoving);
};
endMoving = function(e){
e.preventDefault();
$(document).off('mouseup touchend', endMoving);
$(document).off('mousemove touchmove', moving);
};
moving = function(e){
var mouse={}, touches;
e.preventDefault();
e.stopPropagation();
touches = e.originalEvent.touches;
mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
$container.offset({
'left': mouse.x - ( event_state.mouse_x - event_state.container_left ),
'top': mouse.y - ( event_state.mouse_y - event_state.container_top )
});
// Watch for pinch zoom gesture while moving
if(event_state.touches && event_state.touches.length > 1 && touches.length > 1){
var width = event_state.container_width, height = event_state.container_height;
var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
a = a * a;
var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
b = b * b;
var dist1 = Math.sqrt( a + b );
a = e.originalEvent.touches[0].clientX - touches[1].clientX;
a = a * a;
b = e.originalEvent.touches[0].clientY - touches[1].clientY;
b = b * b;
var dist2 = Math.sqrt( a + b );
var ratio = dist2 /dist1;
width = width * ratio;
height = height * ratio;
// To improve performance you might limit how often resizeImage() is called
resizeImage(width, height);
}
};
crop = function(){
//Find the part of the image that is inside the crop box
var crop_canvas,
left = $('.overlay').offset().left - $container.offset().left,
top = $('.overlay').offset().top - $container.offset().top,
width = $('.overlay').width(),
height = $('.overlay').height();
crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
//window.open(crop_canvas.toDataURL("image/png"));
var canvasData = crop_canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'upload_picture.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData)
}
init();
};
HTML code :
<div id="crop_canvas">
<div class="overlay">
<div class="overlay-inner"></div>
</div>
<img class="resize-image" src="mypicture.jpg" />
</div>
<button class="btn-crop js-crop">Découper</button>
CSS code :
.resize-container {
position: relative;
display: inline-block;
cursor: move;
margin: 0 auto;
}
.resize-container img {
display: block
}
.resize-container:hover img,
.resize-container:active img {
outline: 2px dashed rgba(222,60,80,.9);
}
.resize-handle-ne,
.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
position: absolute;
display: block;
width: 10px;
height: 10px;
background: rgba(222,60,80,.9);
z-index: 999;
}
.resize-handle-nw {
top: -5px;
left: -5px;
cursor: nw-resize;
}
.resize-handle-sw {
bottom: -5px;
left: -5px;
cursor: sw-resize;
}
.resize-handle-ne {
top: -5px;
right: -5px;
cursor: ne-resize;
}
.resize-handle-se {
bottom: -5px;
right: -5px;
cursor: se-resize;
}
.overlay {
position: absolute;
left:40%;
top:31%;
margin-left: -100px;
margin-top: -100px;
z-index: 999;
width:390px;
height:390px;
border: solid 2px #f8b028;
box-sizing: content-box;
pointer-events: none;
}
.overlay:after,
.overlay:before {
content: '';
position: absolute;
display: block;
width: 394px;
height: 40px;
border-left: dashed 2px #f8b028;
border-right: dashed 2px #f8b028;
}
.overlay:before {
top: 0;
margin-left: -2px;
margin-top: -40px;
}
.overlay:after {
bottom: 0;
margin-left: -2px;
margin-bottom: -40px;
}
.overlay-inner:after,
.overlay-inner:before {
content: '';
position: absolute;
display: block;
width: 40px;
height: 394px;
border-top: dashed 2px #f8b028;
border-bottom: dashed 2px #f8b028;
}
.overlay-inner:before {
left: 0;
margin-left: -40px;
margin-top: -2px;
}
.overlay-inner:after {
right: 0;
margin-right: -40px;
margin-top: -2px;
}
.btn-crop {
position: absolute;
vertical-align: bottom;
right:20px;
bottom:13px;
padding: 6px 10px;
z-index: 999;
background-color:#f8b028;
border: none;
border-radius:0 0 5px 5px;
color: #FFF;
font-weight:700;
text-transform:uppercase;
}
#crop_modal .modal-dialog{width:980px;}
#crop_modal .modal-content{
background:#0082c6;
border-radius:0;
padding:10px 20px;
}
#crop_modal .modal-content p{
color:#fff;
font-size:12px;
}
#crop_canvas{
background:#fff;
border:3px solid #f8b028;
height:600px;
overflow:hidden;
margin-bottom:35px;
position:relative;
width:100%;
}
You can find a demo here : http://darkcid.olympe.in/