DarkroomJS 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00170/article/details/141844941

DarkroomJS 使用教程

darkroomjsExtensible image editing tool in your browser项目地址:https://gitcode.com/gh_mirrors/da/darkroomjs

1、项目介绍

DarkroomJS 是一个基于 HTML5 canvas 的 JavaScript 库，提供了基本的图像编辑工具，如旋转和裁剪。它利用了 FabricJS 库来处理 HTML5 canvas 中的图像。然而，需要注意的是，该项目已经不再维护，官方推荐使用 Pintura Image Editor 作为替代方案。

2、项目快速启动

安装

首先，通过 npm 安装 DarkroomJS：

npm install darkroomjs

快速启动示例

以下是一个简单的示例，展示如何在网页中使用 DarkroomJS 进行图像编辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DarkroomJS 示例</title>
    <link rel="stylesheet" href="node_modules/darkroomjs/build/darkroom.css">
</head>
<body>
    <img src="path/to/your/image.jpg" id="target" alt="Sample Image">

    <script src="node_modules/fabric/dist/fabric.js"></script>
    <script src="node_modules/darkroomjs/build/darkroom.js"></script>
    <script>
        var image = document.getElementById('target');
        var darkroom = new Darkroom(image, {
            // 配置选项
            plugins: {
                save: {
                    callback: function() {
                        console.log('保存图像');
                    }
                }
            }
        });
    </script>
</body>
</html>