小编Jul*_*0sS的帖子
如何使用html5 canvas/javascript/jquery将svg转换为png并保存在服务器上
好吧,我需要一些关于将.svg文件/图像转换为.png文件/图像的帮助......
我的页面上显示了.svg图像.它保存在我的服务器上(作为.png文件).我需要根据需要将其转换为.png文件(单击按钮)并将.png文件保存在服务器上(我将使用.ajax请求执行此操作).
但问题是转换.
我读了很多关于html5 Canvas的东西,这可能有助于做我现在需要做的事情,但是我找不到任何明确的解决方案来解决我的问题,而且,tbh,我不明白我发现的一切......所以我需要一些明确的建议/帮助我必须这样做.
这是"html idea"模板:
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
和一些js:
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
然后,我需要将svg绘制到Canvas中,获取base64数据,并将其保存在我的服务器上的.png文件中......但是......怎么样？我读到了很多不同的解决方案,我实际上......迷失了...我正在研究jsfiddle,但我实际上......无处可寻...... http://jsfiddle.net/xfh7nctk/6 / ...感谢您的阅读/帮助
推荐指数
解决办法
查看次数
使用AngularJS的某种俄罗斯玩偶容器的动态编辑表单
这是问题所在,
我实际上必须管理可以包含db中定义的其他对象的对象.所以,例如,我有5种盒子.一个红色的盒子,一个绿色的盒子,一个蓝色的盒子,一个黄色的盒子和一个黑盒子.
每个框可以包含一个框,也可以包含一个框,依此类推.
我收到的是这种对象:
{
"id":1,
"type":"black",
"box":
{
"id":8,
"type":"red",
"box":
{
"id":15,
"type":"green",
"box":null
}
}
}
所以这个例子是:一个黑盒子,包含一个红色的盒子,里面有一个空的绿色盒子.(黑色 - >红色 - >绿色 - >空)
有条件:
- 黑匣子只能包含蓝色,绿色和红色,
- 红色框只能包含绿色和黄色,
- 黄色的盒子什么都没有,
- 其他框(绿色和蓝色)可以包含任何内容
我需要做的是某种"盒子集编辑器",我收到一个盒子对象,这是一个复杂与否(意味着它只能有一个盒子级别,或几个).我必须在选择框的列表中表示它,因此,对于我写的示例,它将显示:
<select name="LEVEL_1">
<option value="0">NONE</option>
<option selected value="1">black</option>
<option value="8">red</option>
<option value="15">green</option>
<option value="3">blue</option>
<option value="10">yellow</option>
</select>
<br/>
<select name="LEVEL_2">
<option value="0">NONE</option>
<option selected value="8">red</option>
<option value="15">green</option>
<option value="3">blue</option>
</select>
<br/>
<select name="LEVEL_3">
<option value="0">NONE</option>
<option selected value="15">green</option>
<option value="10">yellow</option>
</select>
<br/>
<select name="LEVEL_4">
<option selected value="0">NONE</option>
<option value="15">green</option> …推荐指数
解决办法
查看次数
PostgreSQL：ST_GeomFromText（未知）不存在
问题就在这里，
我现在刚刚安装了 PostgreSQL 并尝试构建一个 geoloc 数据库。为此，我安装了 PostGIS 扩展和 PostGIS_Topology。
在我的 pgAdmin UI 中，我可以看到我的模型，我的架构是“Geo”，我可以在下面的函数列表中看到可用的 postGis 函数（大约 1000 个，请参见屏幕截图）
问题是，当我尝试在数据库中插入新记录时，示例：
INSERT INTO "Geo".points(point, lat, lng) VALUES (ST_GeomFromText('POINT(42.555 32.222)'),'42.555','32.222');
我收到此错误：
ERROR : function st_geomfromtext(unknown) does not exist
SQL state : 42883
Character : 51
认为问题来自扩展可能未启用，但看起来没问题，函数列表在数据库模型信息中可见......
还尝试从数据库名称调用该函数，但不起作用......
..."Geo".ST_GeomFromText('...')...
另一个奇怪的事情是，当我尝试这个命令时：
SELECT "Geo".ST_GeomFromText('POINT(42.222 32.555)')
有用...
这是一个屏幕截图：
我是 PostgreSQL 的新手，所以也许这是一个愚蠢的问题...但我查看了堆栈和文档，没有找到任何与我的问题相匹配的内容...
感谢您的阅读/帮助
[编辑]
测试你的解决方案后@mlinth我仍然面临同样的问题......
当尝试时
INSERT INTO "Geo".points(point, lat, lng)
SELECT "Geo".ST_GeomFromText('POINT(32.222 42.555)'),'42.555','32.222';
or
INSERT INTO "Geo".points(point, lat, lng)
SELECT "Geo".ST_point(32.222,42.555 ),'42.555','32.222';
我遇到错误，SQL状态：42804字符51（“Geo”有下划线）删除“Geo”会导致类似“函数ST_GeomFromText（或ST_POINT）（未知）不存在”的错误...
[编辑2]
这个功能似乎有效：
SELECT "Geo".ST_GeomFromText('POINT(42.222 35.555)') …推荐指数
解决办法
查看次数
使用 mariaDb、mySQL 获取半径（以公里为单位）内的所有空间类型点
问题就在这里，
已经对此进行了多项研究，但没有找到任何明确且解释良好的解决方案。有些人正在谈论类似st_distance或 之类的函数st_within，它们引用 mysql/mariadb 版本，但这些函数似乎没有真正的文档，并且似乎不适合我的问题。
所以我想做的是：
获取(lat,ln)在 中定义半径的圆内的所有空间点KILOMETRES。
用户将给出一个范围在 1 到 100 公里之间的半径，并将收到该半径内的所有数据库记录。
“ points”表看起来像这样：
ID -- POINT -- SOMETEXT
点是使用的空间类型点mySql(>5.6) / mariaDb(5.5.40) (lat,lng)
所以，查询应该如下所示：
"SELECT * FROM points WHERE (function... to get distance) <= definedDistance"
感谢帮助
推荐指数
解决办法
查看次数
Https Nginx NodeJS SocketIO和CORS请求失败
这是我的问题,
背景:
我有一台NGinx服务器正在运行.NGinx使用证书启用HTTPS.没问题.
我有一个NodeJS服务器工作,它应该使用socketIO来处理websockets.
我正在测试Mozilla Firefox(这可能不是最好的......)
应用程序首先在HTTP上,一切正常.现在所有人都切换到了HTTPS,我面临着一个"跨领域"的问题.
我已经尝试了几种解决方案,但它们都没有为我工作......我会解释我在帖子末尾尝试的内容.
首先,让我向您展示有关的文件,nodeJS的server.js,NGinx服务器的nginx.conf,以及应该连接websocket的"客户端脚本".
server.js - NodeJS
var app = require('express')();
var fs = require('fs');
var https = require('https');
var _ = require('underscore');
var socketio = require('socket.io');
var options = {
key: fs.readFileSync('/ssl/file.key'),
cert: fs.readFileSync('/ssl/file.crt')
};
var server = https.createServer(options).listen(9001,function(){
console.log("SERVER LISTENING");
});
io = socketio.listen(server,{origins:'*:*'});
var connectedSockets = {};
_.each(io.nsps, function(nsp){
nsp.on('connect', function(socket){
if (!socket.auth) {
delete nsp.connected[socket.id];
}
});
});
function checkAuthToken(token,callback){
callback(null,true);
}
io.on('connection',function(socket){
socket.broadcast.emit('hi');
socket.on('disconnect',function(){
console.log('a user disconnected');
});
socket.on('chat message',function(msg){ …推荐指数
解决办法
查看次数
three.js SpotLight方向(方向)问题
嗯,这是问题所在,
实际上我试图实现的是在一些基本的三个例子中放置一些聚光灯.
以下是我尝试设置聚光灯目标位置的方法:
var light = new THREE.SpotLight(0xFFFFFF);
light.position.set(0,130,0);
light.target.position.set(200,-130,400);
scene.add(light);
聚光灯(灯光)一直照亮点(0,0,0),即使在我调试target.log时,target.position.(x,y,z)它给了我正确的值......
这是我用完整的例子做的一个快速小提琴.
推荐指数
解决办法
查看次数
具有属性的一对多对一表格与Symfony 3/Doctrine
这是问题所在:
我有一个有3个班级的模型
- 人
- person_job
- 工作
一个人可以有多个工作,任何工作人员关系都可以有"date_start"属性,"date_end"和"comment".所以我用一个包含这些属性的jointable(person_job)构建了这个模型,并在2个manyToOne属性上创建了一个名为person和job的关系(用doctrine注释生成)
人物属性如下:
/**
* @var string
* @ORM\Column(name="name",type="string",length=255,nullable=false)
*/
private $name;
/**
* @var string
* @ORM\Column(name="firstname",type="string",length=255,nullable=true)
*/
private $firstname;
/**
* @var bool
* @ORM\Column(name="active", type="boolean")
*/
private $active;
作业属性如下所示:
/**
* @var string
* @ORM\Column(name="name",type="string",length=255,nullable=false)
*/
private $name;
person_job看起来像这样:
/**
* @ORM\ManyToOne(targetEntity="...\Person")
* @ORM\JoinColumn(nullable=false)
*/
private $person;
/**
* @ORM\ManyToOne(targetEntity="...\Job")
* @ORM\JoinColumn(nullable=false)
*/
private $job;
/**
* @var string
* @ORM\Column(name="comment",type="string",length=255,nullable=true)
*/
private $comment;
/**
* @var \DateTime
* @ORM\Column(name="startdate",type="datetime")
*/
private $datestart; …推荐指数
解决办法
查看次数
图像加载不适用于 img 和 Blob
问题就在这里，
我需要使用 .svg 文件创建图像文件。我有一个应该绘制 svg 的函数，然后，我从画布中获取它以将其保存为图像文件。
我的绘图函数是：
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
var domURL = self.URL || self.webkitURL || self;
var url = domURL.createObjectURL(svg);
var img = new Image();
img.src = url;
console.log("URL : "+url);
img.onLoad = function () {
console.log("image onload");
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
}
ctx 是画布 2d 上下文，rawSVG 是 svg 内容控制台给出这样的 url：
blob:http://myWebsite.net/521a72ea-3156-4290-ae16-025a8f8275bc
但 img ONLOAD 永远不会触发...所以我没有回调并且函数停止。我不在本地工作，所以问题不是来自获取本地文件......
感谢帮助！
推荐指数
解决办法
查看次数
将页脚粘贴到包装器底部,并获取页面以适应导航和页脚之间的整个空间
这是问题所在,
我正在使用bootstrap,我遇到了这个问题:
我有一个网页,包含一个分为3个不同项目的包装.第一项是bootstrap导航.第二项是div(类col-lg-12 - > bootstrap).第三项是div(类col-lg-12 - > bootstrap).
导航栏始终位于页面顶部,非常完美.
问题是页脚必须始终位于页面的底部,我考虑绝对定位但不适合,包装器具有页脚应该尊重的一些样式属性.AND,#page元素必须适合导航和页脚之间的整个空间(高度).我的意思是,即使#page元素中只有一个文本行,#page height也必须适合所有可用空间.
还考虑到#page div可以包含许多数据,因此,它的高度可以大于窗口高度(此时,包装器仍包含所有,因为它具有最小高度100%attr,并且页脚仍然应该在#page元素......)
<body>
<div id="wrapper">
<nav></nav> <!--bootstrap item-->
<div id="page" class="col-lg-12"></div> <!--bootstrap class-->
<div id="footer" class="col-lg-12"></div> <!--bootstrap class-->
</div>
</body>
实际上,样式看起来像这样:
<style>
body,html{
height:100%;
}
#wrapper{
min-height:100%;
border:2px solid red;
}
#page{
border:2px solid blue;
}
#footer{
border:2px solid green;
position:relative;
bottom:0;
margin-top:20px;
margin-bottom:15px;
height:120px;
}
</style>
我认为这个问题来自于自定义css和bootstrap类的混合...但是找不到任何修复它的解决方案......已经在堆栈上经历了很多问题但是没有工作......
这是实际的小提琴:
http://jsfiddle.net/0eepqj4m/18/
谢谢!
推荐指数
解决办法
查看次数
在谷歌地图上添加自定义svg图层(api v3)
这是问题所在,
我尝试在谷歌地图上添加自定义图层(svg).我选择的图层非常简单,它只是一个"矩形",但迟早这些路径会变得复杂得多......但实际上这不是问题.
我终于可以在地图上添加svg并使其可见,但是,由于svg不像图像标签,我找不到用谷歌地图缩放/调整svg的方法,就像简单的图像一样......
这是一个谷歌示例,当您缩放(鼠标滚动)地图时,自定义叠加层大小也会发生变化:
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
而且,这是我试图在地图上添加的svg,您会注意到div(容器)位于特定点(lat/lng),并且在地图上使用鼠标滚轮正确缩放.但是,我尝试添加到它的svg图层,根本没有进入它,并且,不会在鼠标滚轮上缩放...这个svg图层的唯一一点就是它正在使用地图拖动......
svg层应该包含在定义的div中(带有边界...).Svg是一个简单的层:
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="svg-editor">
<g>
<rect id="svg_5" height="181" width="311" y="95.25" x="47.75" stroke-width="5" fill="#FF0000"/>
</g>
</svg>
这是小提琴:
http://jsfiddle.net/7b3byzrf/27/
感谢帮助!
推荐指数
解决办法
查看次数
删除内容存储库已删除,周期 - 周期太长
这是问题所在,
我正在使用Alfresco社区版本4.2.0,内容存储已删除在服务器上停留大约15天才被真正删除...
应用程序需要大量空间,因此,磁盘在15天到期之前几乎已满.所以服务器终于崩溃了......
是否可以将其配置为将文件保留几天,或者根本不存在......以及如何？经过一些研究,我没有找到任何有用的信息.
推荐指数
解决办法
查看次数
CORS 问题 - Angular / PHP / Apache
我认为互联网上有很多类似的主题，但我只花了 1 小时搜索，仍然无法解决这个问题。
我无法使用 Angular 在我的服务器（Apache 和 PHP）上使用 POST 发出请求。
我在节点 10、apache 2.4 和 php 7.1 中使用 angular/cli v.6.2.1
这是来自 Http 调用的简单代码（HttpClient 和 HttpHeaders 都来自@angular/common/http）：
constructor(private http: HttpClient){}
this.http.post('http://localhost/distributor.php', ['prop1':'value1', 'prop2':'value2'], {headers: new HttpHeaders().set('Access-Control-Allow-Origin','*')}).subscribe(
data => {
console.log(data);
},
err => {
console.log('error');
});
}
我只是尝试以这种方式从 PHP 发回一些东西：
<?php
$data = $_POST;
echo json_encode($data);
我已经允许 apache 配置文件中的所有来源。Firefox 和 Chrome 在“选项”预检后都让我失望，并且不做任何其他事情，也没有从 PHP 文件中返回。
这是 FireFox 向我展示的内容：
我可以在网络选项卡中看到这一点：
响应选项卡显示一个完全空的框。
我可以从我的 http.post 中删除自定义标头的部分，它没有任何改变。
对我来说似乎很奇怪的是，我可以单击 FireFox 编辑和重新发送按钮，而无需更改任何内容，然后出现正确的结果...
感谢阅读/帮助
推荐指数
解决办法
查看次数
标签 统计
javascript ×7
css ×3
html ×3
canvas ×2
cors ×2
php ×2
postgresql ×2
svg ×2
3d ×1
alfresco ×1
angular ×1
angularjs ×1
blob ×1
doctrine-orm ×1
footer ×1
function ×1
geolocation ×1
geometry ×1
google-maps ×1
https ×1
image ×1
loops ×1
mariadb ×1
mysql ×1
nginx ×1
node.js ×1
onload ×1
png ×1
points ×1
postgis ×1
radius ×1
space ×1
sql ×1
symfony ×1
three.js ×1