学习整理fabric.js实现上传图片并替换已有图片元素、更换背景图片的方法

最新推荐文章于 2024-08-08 11:56:55 发布

徊忆羽菲

最新推荐文章于 2024-08-08 11:56:55 发布

阅读量1.3k

点赞数 2

分类专栏： Html Fabric.js 文章标签： fabric javascript

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/127268487

版权

Html 同时被 2 个专栏收录

254 篇文章 9 订阅

订阅专栏

Fabric.js

17 篇文章 6 订阅

订阅专栏

学习整理fabric.js实现上传图片并替换已有图片元素、更换背景图片的方法

原图

在这里插入图片描述

效果图

在这里插入图片描述

实现代码

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">

    <title>Fabric.js 上传图片并替换已有图片元素、更换背景图片</title>

    <script src="../fabric5.2.1.js"></script>
    <script src="../jquery-2.1.4.min.js"></script>

    <style>
        div#container {
            padding: 30px;
            font-family: 'verdana', lucida;
        }

        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 id="change_img" style="display:none" class="aload" type='button' value='换图' onClick="upImg('hiddenFile')"/>
    <input id='hiddenFile' type='file' style="display:none"/>

    <input class="aload" type='button' value='换背景' onClick="upImg('imageLoader')"/>
    <input type="file" id="imageLoader" name="imageLoader" style="display:none"/>

    <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)',
    includeDefaultValues: false,// 指示toObject/toDatalessObject是否应该包含默认值，如果设置为false，则优先于对象值
    perPixelTargetFind: true, //这一句说明选中的时候以图形的实际大小来选择而不是以边框来选择
    hasBorders: false,
});

canvas.setWidth(500);
canvas.setHeight(500);


// 矩形
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'orange',
    width: 100,
    height: 100
});

// 给矩形添加一个选中事件
rect.on('selected', options => {
    console.log('选中矩形啦');

    addClickEvent();
});
canvas.add(rect);

// 圆角矩形
var rect2 = new fabric.Rect({
    left: 300,
    top: 100,
    fill: 'yellowgreen',
    width: 100,
    height: 100,
    rx: 20,
    ry: 20
});
canvas.add(rect2);

fabric.Image.fromURL('../img/qipa250.jpeg', function (img) {
    img.scale(0.2);//缩小0.4倍

    // 给矩形添加一个选中事件
    img.on('selected', options => {
        console.log('选中图片啦', options);

        //添加画布点击事件
        addClickEvent();

    });


    canvas.add(img);
}, {
    left: 100,
    top: 200,
});


// 使用 IText，可编辑文本
var text = new fabric.IText(
    '奇葩呀，www.qipa250.com',
    {
        fontFamily: 'Comic Sans'
    }
)
canvas.add(text);


function upImg(file_id) {
    $("#" + file_id).click();
}


var hiddenFile = document.getElementById('hiddenFile');
hiddenFile.addEventListener('change', handleImage, false);


var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleBgImage, false);

function handleImage(e) {

    console.log('handleImage.e==', e);

// 获取图片对象 canvas.getActiveObject()
    let img = canvas.getActiveObject();
    if (!img) {
        alert('请选择要替换的图片');
        return false;
    }

    let reader = new FileReader();
    reader.onload = function (event) {
        // 转换成base64格式
        var base64Img = reader.result;

        console.log('canvas.width==', canvas.width);
        console.log('canvas.height==', canvas.height);

        //将当前选中的图片替换


        // 使用 setSrc 方法更改图片，第二个参数是回调函数，在回调函数里刷新一下 canvas 即可
        img.setSrc(base64Img, () => {
            canvas.renderAll();
        });

    }
    reader.readAsDataURL(e.target.files[0]);
}


function handleBgImage(e) {

    console.log('handleImage.e==', e);
    let reader = new FileReader();
    reader.onload = function (event) {
        // 转换成base64格式
        var base64Img = reader.result;

        console.log('canvas.width==', canvas.width);
        console.log('canvas.height==', canvas.height);


        // 将base64图片设置成背景
        canvas.setBackgroundImage(
            base64Img,
            canvas.renderAll.bind(canvas), // 刷新画布 //保证背景图1:1铺满容器
            {
                scaleX: 1,
                scaleY: 1,
            });
    }
    reader.readAsDataURL(e.target.files[0]);
}

// 移除画布点击事件
function removeClickEvent() {
    canvas.off('mouse:down');
}

// 添加画布点击事件
function addClickEvent() {

    //得到所选中元素的类型
    let ob_type = canvas.getActiveObject().get('type');

    alert('ob_type===' + ob_type);

    removeClickEvent(); // 在添加事件之前先把该事件清除掉，以免重复添加

    //展示更换图片的按钮

    if (ob_type != 'image') {
        $("#change_img").attr('style', 'display:none');
    } else {
        $("#change_img").attr('style', 'display:block');
    }


}


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

}