支持上传背景图片
关键代码
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
// 转换成base64格式
let base64Img = reader.result;
// 将base64图片设置成背景
canvas.setBackgroundImage(
base64Img,
canvas.renderAll.bind(canvas) // 刷新画布
);
}
reader.readAsDataURL(e.target.files[0]);
}
保存到本地
关键代码
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';
}
所有代码
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">
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas" width="300" height="300"></canvas>
<a id="lnkDownload" href="#">Save image</a>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
var canvas = new fabric.Canvas('imageCanvas', {
backgroundColor: 'rgb(240,240,240)'
});
canvas.setWidth(300);
canvas.setHeight(300);
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var objects = canvas.getObjects();
for (var i in objects) {
objects[i].remove();
}
var reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.onload = function () {
var imgInstance = new fabric.Image(img, {
selectable: 1
})
canvas.add(imgInstance);
canvas.deactivateAll().renderAll();
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
function saveImage(e) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'canvas.png'
}
点击保存图片