1

我的 web 应用程序需要包含将 SVG 文件保存到数据库的功能，以便可以在浏览器中获取和呈现它们，并能够利用 CSS 来基于解析 XML 来设置图像部分的样式。存储为 base64 并不能完成这项工作，因为它会被呈现到 DOM 上，而不会使 XML 可用于解析和操作。

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

任何帮助，将不胜感激。

4

1 回答 1

0

Ansvg只不过是一串 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>`

你几乎有两个选择：

  1. 存储svg为一个简单的String
  2. 存储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;
}

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

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

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

于 2019-10-17T12:27:57.410 回答