如何使用 OrientJS 在 OrientDB 中存储 SVG

Question

我的网络应用程序需要包含将 SVG 文件保存到数据库的功能，以便可以在浏览器中获取和呈现它们，并能够利用 CSS 根据正在解析 XML。存储为 base64 并不能完成这项工作，因为它会呈现给 DOM 而不会使 XML 可用于解析和操作。

关于在 orientjs 中处理二进制文件的文档非常薄，我找不到任何合适的例子，所以我几乎被困住了。

如有任何帮助，我们将不胜感激。

Answer 1

svg 只不过是一串 XML 语法。

例如考虑以下 svg：

var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red" /></svg>`

你几乎有两个选择：

将 svg 存储为简单的 String
将 svg 存储为 base64 编码的 String

如果您的 svg 只包含 ASCII 字符，方法 1 应该没问题。否则你需要使用方法2。 注意：方法2可以用来存储任何类型的文件！！！

OrientJS中两种方法的示例：

// First npm install the following packages
npm install orientjs
npm install await-to-js

然后创建一个文件app.js和运行它：

const OrientDBClient = require("orientjs").OrientDBClient;
const to = require('await-to-js').default;

// SVG EXAMPLE IMAGE
var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red" /></svg>`

connect().then(async function(db) {

    // Add class to database
    [err, result] = await to(
        db.session.class.create('Example', 'V')
    );
    if (err) { console.error(err); };

    // Add property image to class
    [err, result] = await to(
        db.session.command('CREATE PROPERTY Example.image STRING').all()
    );
    if (err) { console.error(err); };

    // Add property name to class
    [err, result] = await to(
        db.session.command('CREATE PROPERTY Example.type STRING').all()
    );
    if (err) { console.error(err); };

    // *****************************************************************
    // ********************** USING PLAIN STRING ***********************
    // *****************************************************************

    // Add node to class with image stored as plain string (just use var [svg])
    [err, result] = await to(
        db.session.insert().into('Example').set({image: svg, type: 'string'}).one()
    );
    if (err) { console.error(err); };

    // Retrieve simple string from database
    [err, result] = await to(
        db.session.select('image').from('Example').where({type: 'string'}).one()
    );
    if (err) { console.error(err); };
    // Output svg XML to the console
    console.log(result.image);

    // *****************************************************************
    // ********************* USING BASE64 ENCODING *********************
    // *****************************************************************

    // Convert to base64
    var buf = Buffer.from(svg, 'utf-8').toString("base64");

    // Add node to class with image encoded as base64
    [err, result] = await to(
        db.session.insert().into('Example').set({image: buf, type: 'base64'}).one()
    );
    if (err) { console.error(err); };

    // Retrieve base64 encoded svg from database
    [err, result] = await to(
        db.session.select('image').from('Example').where({type: 'base64'}).one()
    );
    if (err) { console.error(err); };

    // Output svg XML to the console
    var output = Buffer.from(result.image, 'base64');
    console.log(output.toString('ascii'));
})

async function connect() {
    // Connect to Server
    [err,client] = await to(OrientDBClient.connect({
        host:   'localhost',    // Specify your host here
        port:   '2424'          // Make sure you call the HTTP port
    }));
    if (err) {
        console.log("Cannot reach OrientDB. Server is offline");
        return false;
    }

    // Connect to Database.
    [err,session] = await to(client.session({ 
        name:       'demodb',   // Name of your database
        username:   'admin',    // Username of your database
        password:   'admin'     // Password of your database
    }));
    if (err) {
        console.log("Database doesn't exist.");
        return false;
    }

    // Add handler
    session.on('beginQuery', (obj) => {
        console.log(obj);
    });

    // Check if session opens
    console.log("Successfully connected to database.");
    var graph = {client, session};
    return graph;
}

此代码将创建一个具有属性 image 和 type 的 class Example，然后将创建两个顶点：一个 svg 是另存为字符串，其中 svg 另存为 base64 编码字符串。它还展示了如何将两个图像再次检索到 javascript.

检索文件后，您可以将它们传递到前端并在 DOM 上呈现它们，此时 CSS 上定义的任何样式 DOM 也将被应用。

我希望这能回答你的问题。

如何使用 OrientJS 在 OrientDB 中存储 SVG

How to store SVGs in OrientDB using OrientJS

javascript

database

orientdb

orientjs