将Fabric js画布自定义上传背景图片，并支持另存为PC上的图像的处理方法

原创已于 2022-10-10 11:36:16 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #fabric #前端

于 2022-10-09 10:32:36 首次发布

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

Fabric.js

17 篇文章

订阅专栏

本文介绍如何使用 Fabric.js 实现图片上传功能，并通过浏览器 API 将上传的图片显示在 Canvas 上。此外，还提供了将 Canvas 中的内容保存为 PNG 图片的方法。此示例包含完整的 HTML 和 JavaScript 代码。

支持上传背景图片

在这里插入图片描述

关键代码


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

在这里插入图片描述
点击保存图片