在画布中上传的图像可以在html5中拖动，触摸和旋转 [英] Uploaded image in canvas drag, touchable and rotatable in html5
本文介绍了在画布中上传的图像可以在html5中拖动，触摸和旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Html5的新手。我正在上传一张图片，但它没有在画布中显示，如果我提供图像的直接来源，那么它将会正常工作。我从这个链接中获取帮助
在此屏幕截图中，图像可以调整大小（img.src =https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg）。但我想用户在画布上上传这个图片。当我用户上传图片时，它将无法正常工作。
我会再给你一个屏幕截图。
我在现有代码中改变了一些想法。现在用户上传图片。
< style>
body {
padding：0px;
}
#canvas {
border：1px solid red;
}
< / style>
< div id =bg>
< canvas id =canvasstyle =margin-top：32px; margin-left：65px; width = 700 height = 350>< / canvas>
< / div>
< br>单击并拖动图像或拖动点以调整大小。
< br>
<！ - < br>文字：
< input type =textareaid =wordsvalue =/> - >
< input type =fileid =inputname =imageLoader/>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< script>
var canvas = document.getElementById（'canvas'）;
var ctx = canvas.getContext（'2d'）;
// var输入= document.getElementById（'words'）;
var x = 10;
var y = 30;
ctx.font =粗体20px sans-serif;
ctx.fillStyle =black;
// $（'＃words'）。keyup（function（）{
// ctx.fillText（$（＃words）。val（），x，y）;
//}）;
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 = 3;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {
x：0，
y：0
};
var imageX = 39;
var imageY = 15;
var imageWidth，imageHeight，imageRight，imageBottom;
var draggingImage = false;
var startX;
var startY;
var img = new Image（）;
img.onload = function（）{
imageWidth = 165;
imageHeight = 125;
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight
draw（true，false）;
}
var b;
var input = document.getElementById（'input'）;
input.addEventListener（'change'，handleFiles）;
函数handleFiles（e）{
var ctx = document.getElementById（'canvas'）。getContext（'2d'）;
var img = new Image;
img.src = URL.createObjectURL（e.target.files [0]）;
console.log（jkfdhgjkdfhgjkdf+ b）;
img.onload = function draw（withAnchors，withBorders）{
//清除画布
ctx.clearRect（0,0，canvas.width，canvas.height）;
//绘制图像
ctx.drawImage（img，0,0，img.width，img.height，imageX，imageY，imageWidth，imageHeight）;
//可选择绘制可拖动锚点
if（withAnchors）{
drawDragAnchor（imageX，imageY）;
drawDragAnchor（imageRight，imageY）;
drawDragAnchor（imageRight，imageBottom）;
drawDragAnchor（imageX，imageBottom）;
}
//可选择绘制连接锚线
if（withBorders）{
ctx.beginPath（）;
ctx.moveTo（imageX，imageY）;
ctx.lineTo（imageRight，imageY）;
ctx.lineTo（imageRight，imageBottom）;
ctx.lineTo（imageX，imageBottom）;
ctx.closePath（）;
ctx.stroke（）;
}
}
函数drawDragAnchor（x，y）{
ctx.beginPath（）;
ctx.arc（x，y，resizerRadius，0，pi2，false）;
ctx.closePath（）;
ctx.fill（）;
}
函数anchorHitTest（x，y）{
var dx，dy;
//左上角
dx = x - imageX;
dy = y - imageY;
if（dx * dx + dy * dy< = rr）{
return（0）;
}
//右上角
dx = x - imageRight;
dy = y - imageY;
if（dx * dx + dy * dy< = rr）{
return（1）;
}
//右下角
dx = x - imageRight;
dy = y - imageBottom;
if（dx * dx + dy * dy< = rr）{
return（2）;
}
//左下角
dx = x - imageX;
dy = y - imageBottom;
if（dx * dx + dy * dy< = rr）{
return（3）;
}
return（-1）;
}
函数hitImage（x，y）{
return（x> imageX&& x< imageX + imageWidth& ;& y> imageY&& y< imageY + imageHeight）;
}
函数handleMouseDown（e）{
startX = parseInt（e.clientX - offsetX）;
startY = parseInt（e.clientY - offsetY）;
draggingResizer = anchorHitTest（startX，startY）;
draggingImage = draggingResizer< 0&& hitImage（startX，startY）;
}
函数handleMouseUp（e）{
draggingResizer = -1;
draggingImage = false;
draw（true，false）;
}
函数handleMouseOut（e）{
handleMouseUp（e）;
}
函数handleMouseMove（e）{
if（draggingResizer> -1）{
mouseX = parseInt（e.clientX - offsetX）;
mouseY = parseInt（e.clientY - offsetY）;
//调整图像大小
switch（draggingResizer）{
case 0：
// top-left
imageX = mouseX;
imageWidth = imageRight - mouseX;
imageY = mouseY;
imageHeight = imageBottom - mouseY;
休息;
case 1：
// top-right
imageY = mouseY;
imageWidth = mouseX - imageX;
imageHeight = imageBottom - mouseY;
休息;
case 2：
// bottom-right
imageWidth = mouseX - imageX;
imageHeight = mouseY - imageY;
休息;
案例3：
//左下角
imageX = mouseX;
imageWidth = imageRight - mouseX;
imageHeight = mouseY - imageY;
休息;
}
if（imageWidth< 25）{
imageWidth = 25;
}
if（imageHeight< 25）{
imageHeight = 25;
}
//将图像设置为右下角
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight;
//使用调整大小锚点重绘图像
draw（true，true）;
}否则if（draggingImage）{
imageClick = false;
mouseX = parseInt（e.clientX - offsetX）;
mouseY = parseInt（e.clientY - offsetY）;
//按最新拖动量移动图像
var dx = mouseX - startX;
var dy = mouseY - startY;
imageX + = dx;
imageY + = dy;
imageRight + = dx;
imageBottom + = dy;
//下次重置startXY
startX = mouseX;
startY = mouseY;
//用边框重绘图像
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）;
}）;
img.src =https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg ;
< / script>
直到现在图像不能旋转和拖动。
请告诉我如何在画布中拖动和移动此图片。
请分享您的想法。因为这对我来说非常重要。在此先感谢。
解决方案
var canvas = new fabric.Canvas（'canvas'）; document.getElementById（'file'）。addEventListener（change，function（e）{var file = e.target.files [0]; var reader = new FileReader（ ）; reader.onload = function（f）{var data = f.target.result; fabric.Image.fromURL（data，function（img）{var oImg = img.set（{left：0，top：0，angle ：00，width：100，height：100}）。scale（0.9）; canvas.add（oImg）.renderAll（）; var a = canvas.setActiveObject（oImg）; var dataURL = canvas.toDataURL（{format：' png'，quality：0.8}）;}）;}; reader.readAsDataURL（file）;}）;
canvas {border：1px solid black;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> ;< / script>< script src =https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js>< / script>< input type =file id =file>< br />< canvas id =canvaswidth =450height =450>< / canvas>
I am new in Html5. I am uploading a image but it is not showing in canvas, If i am giving direct source of image then it will working. I taking help from this link javascript: upload image file and draw it into a canvas I'll show you my code.
<style>
body {
padding:0px;
}
#canvas {
border:1px solid red;
}
</style>
<div id="bg">
<canvas id="canvas" style="margin-top:32px;margin-left:65px;" width=700 height=350></canvas>
</div>
<br>Click and drag the image or drag the dots to resize.
<br>
<!-- <br>Text:
<input type="textarea" id="words" value="" />-->
<input type="file" id="input" name="imageLoader" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// var Input = document.getElementById('words');
var x = 10;
var y = 30;
ctx.font = "bold 20px sans-serif";
ctx.fillStyle = "black";
// $('#words').keyup(function () {
// ctx.fillText($("#words").val(), x, y);
// });
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 = 3;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {
x: 0,
y: 0
};
var imageX = 39;
var imageY = 15;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var startX;
var startY;
var img = new Image();
img.onload = function () {
imageWidth = 165;
imageHeight = 125;
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight
draw(true, false);
}
var b;
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image;
b = URL.createObjectURL(e.target.files[0]);
console.log("jkfdhgjkdfhgjkdf " + b);
img.onload = function () {
ctx.drawImage(img, 60, 60);
}
}
img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.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;
}
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);
});
</script>
In this screen shot image is resizable with (img.src="https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg"). But i want this image upload in canvas by user. When i am upload image by user then it will not working.
I will give you one more screen shot.
I was changed some think in existing code. Right now image upload by user.
<style>
body {
padding:0px;
}
#canvas {
border:1px solid red;
}
</style>
<div id="bg">
<canvas id="canvas" style="margin-top:32px;margin-left:65px;" width=700 height=350></canvas>
</div>
<br>Click and drag the image or drag the dots to resize.
<br>
<!-- <br>Text:
<input type="textarea" id="words" value="" />-->
<input type="file" id="input" name="imageLoader" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// var Input = document.getElementById('words');
var x = 10;
var y = 30;
ctx.font = "bold 20px sans-serif";
ctx.fillStyle = "black";
// $('#words').keyup(function () {
// ctx.fillText($("#words").val(), x, y);
// });
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 = 3;
var rr = resizerRadius * resizerRadius;
var draggingResizer = {
x: 0,
y: 0
};
var imageX = 39;
var imageY = 15;
var imageWidth, imageHeight, imageRight, imageBottom;
var draggingImage = false;
var startX;
var startY;
var img = new Image();
img.onload = function () {
imageWidth = 165;
imageHeight = 125;
imageRight = imageX + imageWidth;
imageBottom = imageY + imageHeight
draw(true, false);
}
var b;
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("jkfdhgjkdfhgjkdf " + b);
img.onload = 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;
}
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);
});
img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.11.0/img/new-city-home/bang-img/cake3.jpg";
</script>
Till now image not rotate and draggable.
Please tell me how to drag and move this image in canvas.
please share your ideas. Because it is very important for me. Thanks in advance.
解决方案
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
这篇关于在画布中上传的图像可以在html5中拖动，触摸和旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
