Fabric.js - 详细使用教程2（插入图片）
作者：hangge | 2020-02-29 08:10
二、插入图片
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）运行效果如下：
全部评论（0）