我的Web应用程序需要包含将SVG文件保存到数据库的功能,以便可以在浏览器中提取和呈现这些文件,并能够使用CSS基于解析XML的样式来对图像的某些部分进行样式设置。存储为base64并不能完成这项工作,因为然后将其呈现到DOM而不使XML可用于解析和操作。
在orientjs中使用二进制文件的文档非常薄,我在那里找不到任何合适的示例,所以我很受困。
任何帮助将不胜感激。
答案 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
您几乎有两个选择:
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
仅包含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样式。
我希望能回答您的问题。