Fabric.js - 详细使用教程2（插入图片）

2020-02-29 发布：hangge 阅读：2821

二、插入图片

1，插入页面中的图片

（1）下面代码将页面上 img 标签中的图片插入到画布中，并设置图片的位置、大小、透明度等。

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        window.onload = function() {
            var canvas = new fabric.Canvas('canvas');

            var imgElement = document.getElementById('img');//声明我们的图片
            var imgInstance = new fabric.Image(imgElement,{
                left: 100, //设置图片位置
                top: 20, //设置图片位置
                angle: 30,//设置图形顺时针旋转角度
                opacity: 0.5, //设置透明度
                scaleX: 0.5, //设置缩放比例
                scaleY: 0.5 //设置缩放比例
            });

            canvas.add(imgInstance);//加入到canvas中，并设置缩放比例
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200"></canvas>
    <img id="img" src="xcode.png">
</body>
</html>

（2）运行效果如下：

2，通过 URL 加载图片

（1）下面代码通过 URL 地址加载一个图片，并插入到画布中：

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        window.onload = function() {
            var canvas = new fabric.Canvas('canvas');

            fabric.Image.fromURL('xcode.png', function(oImg) {
                oImg.scale(0.5);//图片缩小一半
                canvas.add(oImg);
            });
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>

（2）运行效果如下：