学习整理Fabric.js如何在画布中添加文字、图片和使用按钮和键盘delete键删除功能

原创已于 2022-10-11 11:08:11 修改 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #fabric

于 2022-10-10 17:40:40 首次发布

Javascript 同时被 3 个专栏收录

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

Fabric.js

17 篇文章

订阅专栏

本文介绍如何使用Fabric.js在HTML5 Canvas上添加和删除文字及图片。通过示例代码演示了创建可编辑文本、响应键盘事件、图片上传处理等功能，并提供了完整的HTML和JavaScript实现。

原图

在这里插入图片描述

代码

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';

}

效果图

在这里插入图片描述