用node生成svg图片

最近有个需求需要后台调统计数据,直接生成图片吐到前端,本来以为比较简单的,结果中间还是遇到了很多问题:

 环境:

windows:python 2.6+,visual stdio 2008 express开发包

linux:gcc,python 2.6+

node版本:v0.10.35

node组件:[email protected] [email protected] [email protected]

本来想把node升到最新版本,在安装jsdom的时候报错,只能回退

[email protected]支持node,更高版本只支持iojs

[email protected] 在Red Hat 4.4.7上安装报错,[email protected]安装成功

请求数据:

发httppost请求接口数据:

配置请求的header中Content-Length参数注意等于post数据的长度,原来没注意导致请求超时

注意header中Accept-Encoding参数是否配置了gzip,如果配置了gzip,返回时需要用zlib解压

highchart生成svg:

最大的问题是在浏览器可以生成svg,搬到node后不能生成,经过google,参数不断的排除,发现在highchart配置一定要增加下面几个:

chart: {    margin: [50, 30, 70, 50],//不加这个显示不出来    width: 1000,    forExport: true//不加这个会报错}

hightchart的版本使用的是v2.3.3,后台生成svg如果在图形上有标注,会显示不正常,使用最新版本会有改善。在本项目中发现使用rsvg转换png时,线宽异常,怀疑是rsvg版本太低导致的,在这个需求一定要使用rsvg转换,所以只能放弃使用最新版本的highchart

hightchart中datetime类型数据,需要加8个小时,保证显示正常,需要调整yAxis的x、y值,不然y坐标显示异常。

总结:node中模块开源,但是不同模块的版本兼容比较麻烦。后端node的模拟浏览器的的复杂展现中间可能有各种问题,碰到最麻烦的是不能调试,难以找到原因。

对于这个项目来说,可以考虑使用phantomjs解决

				
时间: 2024-10-29 12:11:30

用node生成svg图片的相关文章

NodeJs生成SVG图形验证码

背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑要在服务端进行,不然很容易被绕过 解决方法:使用svg-captcha插件在node.js中生成svg格式的验证码. 1.安装 npm install --save svg-captcha 2.使用方法 var svgCaptcha = require('svg-captcha'); var dat

canvas生成遮罩图片

首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就可以使用,这样就可以通过图片合成一张带有形状的合成图了,不需要直接使用PS处理了.CSS遮罩——如何在CSS中使用遮罩,这篇文章已经详细说明了遮罩如何使用了,我这里就不赘述了.今天我这里想要说明的是,如何通过这个完成生成一个合成图片的逻辑. 它通过两种方式:前端JS+canvas,后端nodejs+canvas,完成基本思

使用SVG图片格式

SVG格式, 适应屏幕, 图片较小, 还有很多优点, 参考. 本文讲解如何使用SVG格式. SVG: Scalable Vector Graphics, 可缩放矢量图形. IRI: Internationalized Resource Identifiers, 国际化资源标识符. 下载SVG格式的图片. 新建项目, 空白项目显示图片. Android Studio 2.0 路径: File -> New -> Vector Asset -> Local SVG file 勾选重置图片大小

Android应用性能优化系列视图篇——SVG图片版本兼容及性能优化解决方案

SVG矢量图在图片表现力方面远远优于PNG位图,同时在可维护性和修改性方面也比位图要方便很多.尽管Android在5.0版本就引入了SVG图片的解决方案:Vector.然而,兼容性和性能方面却是差强人意,以至于至今都未能广泛使用. 本篇博客给大家带来一套较为不错的解决方案:SVG-Android(作者是本人...),相比于Vector,其在兼容性方面能够兼容到2.3以上,同时在性能方面,也有了质的提升. 开源库地址:https://github.com/MegatronKing/SVG-Andr

简单生成svg文件

this.fileSaveSync = function (file, data) { var fs = require('fs-extra'); fs.writeFileSync(file, data) }; 以上为node.js 的写文件方法 具体文件个操作代码不做介绍 下面生成svg文件 var svgns = '<?xml version="1.0" standalone="no"?>'; svgns += svgHtml; var fileNa

RoundedBitmapDrawable生成圆角图片

Bitmap src = BitmapFactory.decodeResource(getResources(), imageId); //获取Bitmap图片 RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), src); //创建RoundedBitmapDrawable对象 roundedBitmapDrawable.setCornerRadius

javaweb学习总结(九)—— 通过Servlet生成验证码图片

一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下: 创建一个DrawImage Servlet,用来生成验证码图片 1 package gacl.response.study; 2 import java.awt.Color; 3 import java.awt.Font; 4 import java.awt.Graphics; 5 import java.awt.Graphics2D; 6 import java.awt.image.Buff

python生成测试图片

直接代码 1 import cv2.cv as cv 2 saveImagePath = 'E:/ScreenTestImages/' 3 4 colorRed = [0,0,255] 5 colorGreen = [0,255,0] 6 colorBlue = [255,0,0] 7 colorWhite = [255,255,255] 8 colorBlack = [0,0,0] 9 colorAqua = [255,255,0] 10 colorFuchsia = [255,0,255]

用python生成验证码图片

除了配置好的python环境外,还需要配有python中的PIL库,这是python中专门用来处理图片的库.用传统的pip install 方法或者下载源码 python setup.py install 方法安装该库,很可能会报错(视运行环境不同).可以采用以下方法: 1.下载安装包URL:http://www.pythonware.com/products/pil/index.htm,要下载支持全平台的. 2.解压缩: tar –zxv –f Imaging-1.1.7.tar.gz 3.进