I am uploading multiple image one by one in canvas. But problem is that, image not draggable. I seen one to drag option link, But i don't known how to use this one. https://jqueryui.com/draggable/
I will show you one screen shot:
I want to every image draggable by mouse in canvas. Code:
<html>
<head>
<meta charset="utf-8">
<title>Canvas Background through CSS</title>
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
</style>
</head>
<body>
<input type='file' id="fileUpload" />
<canvas id="canvas" width="900" height="600" style="background-color:#ffffff;"></canvas>
</body>
<script>
console.log("step 1");
function el(id){return document.getElementById(id);} // Get elem by ID
console.log("step 2");
var canvas = el("canvas");
console.log("step 3");
var context = canvas.getContext("2d");
console.log("step 4");
function readImage() {
console.log("step 5");
if ( this.files && this.files[0] ) {
console.log("step 6");
var FR= new FileReader();
FR.onload = function(e) {
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
};
var b = img.src = e.target.result;
console.log("step 7");
};
FR.readAsDataURL( this.files[0] );
}
}
console.log("step 8");
el("fileUpload").addEventListener("change", readImage, false);
</script>
</html>
I seen another link, but i cant able to understand. http://jsfiddle.net/m1erickson/qm9Eb/
Because in this example box already in canvas.
Till now i have no idea about this problem. But something done by me, I'll show you code:
<style>
body{ background-color: ivory; padding:10px;}
#canvas{border:1px solid red;}
</style>
<p>Resize the image using the 4 draggable corner anchors</p>
<p>You can also drag the image</p>
<input type="file" id="input"/>
<canvas id="canvas" width=750 height=550></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log("ctx " + ctx);
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var startX;
var startY;
var isDown = false;
var pi2 = Math.PI * 2;
var resizerRadius = 8;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {x: 0, y: 0};
var imageX = 50;
var imageY = 50;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var startX;
var startY;
var img = new Image();
img.onload = function () {
imageWidth = img.width;
imageHeight = img.height;
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight
draw(true, false);
}
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
console.log("img.src " + img.src);
img.onload = function () {
ctx.drawImage(img, 20, 20);
}
}
img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg";
function draw(withAnchors, withBorders) {
// clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the image
ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);
// optionally draw the draggable anchors
if (withAnchors) {
drawDragAnchor(imageX, imageY);
drawDragAnchor(imageRight, imageY);
drawDragAnchor(imageRight, imageBottom);
drawDragAnchor(imageX, imageBottom);
}
// optionally draw the connecting anchor lines
if (withBorders) {
ctx.beginPath();
ctx.moveTo(imageX, imageY);
ctx.lineTo(imageRight, imageY);
ctx.lineTo(imageRight, imageBottom);
ctx.lineTo(imageX, imageBottom);
ctx.closePath();
ctx.stroke();
}
}
function drawDragAnchor(x, y) {
ctx.beginPath();
ctx.arc(x, y, resizerRadius, 0, pi2, false);
ctx.closePath();
ctx.fill();
}
function anchorHitTest(x, y) {
var dx, dy;
// top-left
dx = x - imageX;
dy = y - imageY;
if (dx * dx + dy * dy <= rr) {
return(0);
}
// top-right
dx = x - imageRight;
dy = y - imageY;
if (dx * dx + dy * dy <= rr) {
return(1);
}
// bottom-right
dx = x - imageRight;
dy = y - imageBottom;
if (dx * dx + dy * dy <= rr) {
return(2);
}
// bottom-left
dx = x - imageX;
dy = y - imageBottom;
if (dx * dx + dy * dy <= rr) {
return(3);
}
return(-1);
}
function hitImage(x, y) {
return(x > imageX && x < imageX + imageWidth && y > imageY && y < imageY + imageHeight);
}
function handleMouseDown(e) {
startX = parseInt(e.clientX - offsetX);
startY = parseInt(e.clientY - offsetY);
draggingResizer = anchorHitTest(startX, startY);
draggingImage = draggingResizer < 0 && hitImage(startX, startY);
}
function handleMouseUp(e) {
draggingResizer = -1;
draggingImage = false;
draw(true, false);
}
function handleMouseOut(e) {
handleMouseUp(e);
}
function handleMouseMove(e) {
if (draggingResizer > -1) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// resize the image
switch (draggingResizer) {
case 0: //top-left
imageX = mouseX;
imageWidth = imageRight - mouseX;
imageY = mouseY;
imageHeight = imageBottom - mouseY;
break;
case 1: //top-right
imageY = mouseY;
imageWidth = mouseX - imageX;
imageHeight = imageBottom - mouseY;
break;
case 2: //bottom-right
imageWidth = mouseX - imageX;
imageHeight = mouseY - imageY;
break;
case 3: //bottom-left
imageX = mouseX;
imageWidth = imageRight - mouseX;
imageHeight = mouseY - imageY;
break;
}
// enforce minimum dimensions of 25x25
if (imageWidth < 25) {
imageWidth = 25;
}
if (imageHeight < 25) {
imageHeight = 25;
}
// set the image right and bottom
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight;
// redraw the image with resizing anchors
draw(true, true);
} else if (draggingImage) {
imageClick = false;
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
// move the image by the amount of the latest drag
var dx = mouseX - startX;
var dy = mouseY - startY;
imageX += dx;
imageY += dy;
imageRight += dx;
imageBottom += dy;
// reset the startXY for next time
startX = mouseX;
startY = mouseY;
// redraw the image with border
draw(false, true);
}
}
$("#canvas").mousedown(function (e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
handleMouseOut(e);
});
}); // end $(function(){});
</script>
Boy image is fix and car image is draggable because i am fetch direct in html canvas not uploading by user.( img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg";).
First boy image is upload by use. This is not draggable.
Please give me some idea to this problem.
