Question

我是Html5的新手。我正在上传一张图片，但它没有在画布上显示，如果我提供直接的图像来源，那么它将会正常工作。我从这个链接javascript: upload image file and draw it into a canvas获取帮助我会告诉你我的代码。

<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>

在此屏幕截图中可以使用（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="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>

直到现在图像不能旋转和拖动。

请告诉我如何在画布中拖动和移动此图像请分享您的想法。因为这对我来说非常重要。提前谢谢。

Answer 1

＆＃13;

mvc = MockMvcBuilders.standaloneSetup(controller).setCustomArgumentResolvers(new GoogleOAuthUserResolver()).build();

＆＃13;

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);
});

＆＃13;

canvas{
  border: 1px solid black;
}

＆＃13;

在画布中上传的图像可以在html5中拖动，触摸和旋转

1 个答案: