原效果图
代码
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Fabric.js 修改文字颜色</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.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="color" id="color" name="color" onchange="changeColor(value)"/>
</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(
'奇葩呀',
{
fontSize: 20,
fontFamily: 'Comic Sans',
left: 10,
top: 10,
fill: 'blue'
}
);
canvas.add(text_1).setActiveObject(text_1);
text_1.enterEditing();
// 使用 IText,可编辑文本
var text_2 = new fabric.IText(
'www.qipa250.com',
{
fontSize: 25,
fontFamily: 'Comic Sans',
left: 10,
top: 50,
fill: 'red'
}
);
canvas.add(text_2);
text_2.enterEditing();
function changeColor(value) {
console.log('changeColor--value=', value);
let activeTxt = canvas.getActiveObject();
if (!activeTxt) return;
if (activeTxt.isEditing) {
console.log('选中,修改单个文字的颜色');
// 编辑状态
activeTxt.setSelectionStyles({'fill': value});
} else {
console.log('选中整体,修改所有文字的颜色');
activeTxt.fill = value;
let s = activeTxt.styles;
for (let i in s) {
for (let j in s[i]) {
s[i][j].fill = value;
}
}
}
canvas.renderAll();
}
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';
}
修改颜色后,可以看到控制台打印的内容
最终保存到本地