CocoRoboLabs
/
CocoRoboDesktop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!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>画板</title>
    <style>
        .canvas {
            border: 1px solid rgb(170, 170, 170);
            cursor: pointer;
        }

        .mgTop {
            margin-top: 30px;
            text-align: center;
        }
    </style>
    <script src="https://cdn.bootcss.com/fabric.js/2.2.3/fabric.min.js"></script>
</head>

<body style="padding-left: 10px;text-align:center;">

    <h1>图片加载</h1>

    <div class="mgTop">
        <canvas id="freeCanvas" class="canvas"></canvas>
    </div>

    <script>
        var canvas = new fabric.Canvas("freeCanvas", {
            isDrawingMode: false,
            selection: false,
            width: 1000,
            height: 600
        });

        fabric.Image.fromURL('../image/tools-28.png', function (img) {
            img.scaleToHeight(224 / 2, false);  //缩放图片高度
            img.scaleToWidth(168 / 2, false);   //缩放图片宽度
            canvas.add(img);
        });

    </script>
</body>

</html>