如何使用OrientJS将SVG存储在OrientDB中

时间:2019-07-17 06:46:34

标签: javascript database orientdb orientjs

我的Web应用程序需要包含将SVG文件保存到数据库的功能,以便可以在浏览器中提取和呈现这些文件,并能够使用CSS基于解析XML的样式来对图像的某些部分进行样式设置。存储为base64并不能完成这项工作,因为然后将其呈现到DOM而不使XML可用于解析和操作。

在orientjs中使用二进制文件的文档非常薄,我在那里找不到任何合适的示例,所以我很受困。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

LOAD DATA INFILE MY_TABLE.csv "STR '|\n'" INTO TABLE MY_TABLE APPEND FIELDS TERMINATED BY ';' OPTIONALLY ENCLOSED BY '"' TRAILING NULLCOLS ( "NORMAL_COLUMN1" CHAR(40) , "NORMAL_COLUMN2" CHAR(250) , "NORMAL_COLUMN3" CHAR(250) , "Nvl(XML_COLUMN, '<empty />')" CHAR(16000) ) 只是XML语法字符串。

例如考虑以下svg:

svg

您几乎有两个选择:

  1. 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
  2. String存储为svg编码的base64

如果您的String仅包含ASCII字符,则方法1应该没问题。否则,您需要使用方法2。 注意:方法2可用于存储任何类型的文件!

svg中两种方法的示例:

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编码字符串的位置。它还显示了如何将两个图像再次检索到javascript中。

检索文件后,您可以将它们传递到前端并在DOM上呈现它们,这时还将应用DOM上定义的所有CSS样式。

我希望能回答您的问题。