学习整理Fabric.js如何在画布中添加文字、图片和使用按钮和键盘delete键删除功能
原图
代码
index.html
DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Fabric.js 添加文字、删除文字title>
<script src="../fabric5.2.1.js">script>
<style>
div#container {
padding: 30px;
font-family: 'verdana', lucida;
}
input {
background-color: #ccc;
padding: 0;
width: 300px;
color: #777;
}
a {
color: #777;
display: block;
background-color: #ccc;
width: 300px;
padding: 0;
margin-top: 2px;
text-decoration: none;
}
style>
head>
<body>
<div id="container">
<p>
<input type="text" id="default_text" name="default_text" value="我是要添加的文字内容">
p>
<p>
<button onclick="add_text()">添加button>
p>
<p>
<input type="file" id="imageLoader" name="imageLoader"/>
p>
<p>
<button onclick="deleteob()">删除button>
p>
<canvas id="imageCanvas" width="300" height="300">canvas>
<a id="lnkDownload" href="#">点我保存图片a>
div>
<script src="script.js">script>
body>
html>
script.js
var canvas = new fabric.Canvas('imageCanvas', {
backgroundColor: 'rgb(240,240,240)',
includeDefaultValues: false,// 指示toObject/toDatalessObject是否应该包含默认值，如果设置为false，则优先于对象值
perPixelTargetFind: true, //这一句说明选中的时候以图形的实际大小来选择而不是以边框来选择
hasBorders: false,
});
canvas.setWidth(500);
canvas.setHeight(500);
// 使用 IText，可编辑文本
var text_1 = new fabric.IText(
'《天净沙·秋思》\n枯藤老树昏鸦，\n小桥流水人家，\n古道西风瘦马。\n夕阳西下，\n断肠人在天涯。',
{
width: 300,
fontSize: 14,
fontFamily: 'Comic Sans',
left: 50,
top: 100,
fill: 'blue',
splitByGrapheme: true, // 自动换行
}
);
canvas.add(text_1);
function add_text() {
var default_text = document.getElementById('default_text');
let str = default_text.value;
let text_new = new fabric.Textbox(
str,
{
width: 300,
fontSize: 14,
fontFamily: 'Comic Sans',
left: 10,
top: 10,
fill: 'blue',
splitByGrapheme: true, // 自动换行
}
);
//禁止下拉，防止字体变形
text_new.setControlVisible('mt', false);
text_new.setControlVisible('mb', false);
canvas.add(text_new);
}
//添加图片元素
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
console.log('handleImage.e==', e);
var reader = new FileReader();
reader.onload = function (event) {
// 转换成base64格式
var base64Img = reader.result;
console.log('canvas.width==', canvas.width);
console.log('canvas.height==', canvas.height);
//加一张图片
fabric.Image.fromURL(base64Img, function (img) {
img.scale(0.2);//缩小0.4倍
canvas.add(img);
}, {
left: 100, // 图片相对画布的左侧距离
top: 100, // 图片相对画布的顶部距离
angle: 30, // 图片旋转角度
opacity: 0.85, // 图片透明度
// 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
scaleX: 0.5,
scaleY: 0.5
});
}
reader.readAsDataURL(e.target.files[0]);
}
function deleteob() {
canvas.remove(canvas.getActiveObject());
canvas.renderAll();
}
//得到按键的信息
function showkey() {
key = event.keyCode;
switch (key) {
case 37://"按了←键！"
alert("按了←键！");
break;
case 38://"按了↑键！"
alert("按了↑键！");
break;
case 39://"按了→键！"
alert("按了→键！");
break;
case 40://"按了↓键！"
alert("按了↓键！");
break;
case 46://"按了delete键！"
alert("按了delete键！");
canvas.remove(canvas.getActiveObject());
break;
}
}
document.onkeydown = showkey;
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
function saveImage(e) {
console.log('toJSON==', canvas.toJSON());
console.log('toObject==', canvas.toObject()); // 输出序列化的内容
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'canvas.png';
}
效果图
