精华内容
下载资源
问答
  • 踩了很长时间的坑,总算是...在服务端渲染图表,绕不开的一个问题就是,没有DOM怎么绘图?这个主要有两种解决方案,一个是用那些headless的浏览器去渲染,然后进行截图;另一个就是在Node环境下模拟DOM元素,比如我...

    踩了很长时间的坑,总算是能跑起来了。但是如果要我给echarts的SSR一个评价,那就是不好用……可能是我太菜了。而且,因为我是Windows用户,这个过程对Windows极其不友好。友情提示:入坑请慎重。


    在服务端渲染图表,绕不开的一个问题就是,没有DOM怎么绘图?这个主要有两种解决方案,一个是用那些headless的浏览器去渲染,然后进行截图;另一个就是在Node环境下模拟DOM元素,比如我在这里想用canvas,就得装个node-canvas;如果想用SVG,就得用JSDOM一类的库。我这里主要是用的canvas,所以就用node-canvas了。

    首先,需要安装node-canvas和echarts。echarts不用多说,但是有一点,不建议使用官方推荐的node-echarts,版本陈旧,而且依赖的库新版本的Node(12.x)不支持。

    node-canvas安装请参考官方文档,因为安装流程比较复杂,尤其是Windows用户:https://github.com/Automattic/node-canvas/wiki/Installation:-Windows。

    当然,因为众所周知的原因,最后一步用npm install安装node-canvas是个问题,因为它预编译的安装包好像是在AWS上,大概率会卡在这里:

    node-pre-gyp WARN Using request for node-pre-gyp https download
    

    或者,还有可能卡在这里:

    node-pre-gyp info install unpacking Release/
    node-pre-gyp info install unpacking Release/canvas.exp
    node-pre-gyp info install unpacking Release/canvas.ilk
    

    然后还有可能直接报错。解决方案就是,加个–build-from-source,不用他编译好的,而是在我们本机进行编译:

    npm install canvas --verbose --build-from-source
    

    在这个过程中,还有可能报错,比较常见的有这些:

    1. 找不到node-gyp。

      解决办法npm install -g node-gyp,装一个就是了。不过一般来说会自带才对……

    2. fatal error C1083: 无法打开包括文件: “cairo.h”: No such file or directory。
      

      解决方法:参考官方文档安装GTK 2,并放在合适的路径。

    3. fatal error C1083: 无法打开包括文件: “jpeglib.h”: No such file or directory
      

      解决方法:参考官方文档安装libjpeg-turbo,并放在合适的路径。

      注意,对于Windows用户,一定要安装for VC++的版本,不要装成for gcc的版本。

    4. Error: Cannot find module '../build/Release/canvas.node'
      

      解决方法:进入node_modules/canvas目录,然后使用node-gyp configure build手动编译。

    5. gyp: binding.gyp not found 
      

      解决方法:同4。还有一种可能是缺少windows-build-tools,这个在第7点中说。

    6. node.lib已损坏。
      

      解决方法:升级Node版本,或者尝试Node安装包的repair功能。大概率是Node没装好,或者你使用了canvas-prebuilt这个已经废弃的库。实测升级到最新版本12.16.1可以修复。

    7. 与windows-build-tools相关的一系列错误。

      解决方法:npm install --global --production windows-build-tools

      但是在此过程中可能会出现一系列问题。可能会卡在这里:

      Python 2.7.16 is already installed, not installing again.
      

      也有可能卡在这里:

      Successfully installed Python 2.7
      

      或者提示安装完了,但一直没有退出,请往下看。

      第一次卡住的时候,尝试重复一遍install,如果解决了那自然最好,如果没解决,甚至报错:

      Error: EBUSY: resource busy or locked
      

      那么我们可能是遇到了同样的问题。网上有两种方案,我放在这里做个参考,虽然对我来说都没用就是了:

      1. 先安装一个旧版本npm install --global --production windows-build-tools@4.0.0,然后重新npm install -g --production windows-build-tools,就可以了。

      2. 针对resource busy or locked的报错,先在任务管理器里kill掉BuildTolls_Full.exe这个进程,然后去C:\Users\<你的用户名>\.windows-build-tools里找到build-tools-log.txt,在这个文件的最后增加一行:

        Variable: IsInstalled = 1
        

        保存后重新install。

      但是这两种对我来说都没用。后来,我无意中看到一个方法,死马当活马医,居然成了……说起来也很迷幻,加个–verbose就好了:

      npm install --global --production --verbose windows-build-tools
      

    到了这里,基本上就可以开始了。其实方法并不神秘,主要就是这么一个方法:

    const path = require('path')
    const { createCanvas } = require('canvas')
    const echarts = require('echarts')
    
    function generateImage(options) {
      const canvas = createCanvas(600, 600) // 600 * 600的canvas
      const ctx = canvas.getContext('2d')
      ctx.font = '12px'
      echarts.setCanvasCreator(() => canvas) // 使用node-canvas
      const chart = echarts.init(canvas)
      options.animation = false
      options.textStyle = {
        fontSize: 12
      }
      chart.setOption(options) // 就是echarts的options
      return chart.getDom().toBuffer() // 返回buffer
    }
    

    这里也可以用fs.writeFileSync来进行文件读写,不过我更倾向于返回buffer流,个人爱好而已。不过,返回buffer流的话,前端需要一些处理,以axios为例,需要设置responseType为blob,然后用createObjectURL来处理blob,然后把url放到img里去:

    const { data } = await axios.get('/api/chart', {
        responseType: 'blob'
    })
    
    URL.createObjectURL(data) // 放进img.src的url
    

    最终效果差不多是这样:
    在这里插入图片描述
    同时,服务端渲染还面临着服务端不支持中文导致乱码,图片不清晰等问题,这些我还没有特别好的处理办法,只能看情况进行处理。我只说说我试过有用的办法:

    1. 针对乱码问题,node-canvas 2.x提供了一个导入字体的方法registerFont(),可以指定中文字体。但是我并不喜欢这个方法,平白无故增加静态资源的数量。

      据说在服务器上装好中文字体可以解决,但在我这里没用。

    2. 图片不清晰,可以在init的时候增大像素比:

      echarts.init(canvas, null, {devicePixelRatio: 2});
      

      但是这又有一个问题,这么弄出来的图片大小会翻倍。本来我用SSR就是希望提高性能,为了清晰度还得牺牲性能,就有点本末倒置了。

    总的来说,目前我还没有发现对echarts进行SSR的好处,可能用那些更轻量的图表库配合SVG效果会比较好,比如D3。可能有用的场景就是显示那些对清晰度要求不太高的图表,比如图表的动态缩略图,因为有时候可能会有这样的需求,虽然是缩略图或者是示意图,也希望能够动态更新,因为前后数据变化可能比较大。

    参考资料

    https://github.com/Automattic/node-canvas/issues/1468#issuecomment-522961098

    https://github.com/mapbox/node-pre-gyp/issues/477#issuecomment-534231739

    展开全文
  • ../lib/polyfill/node-canvas'); const {Scene, Sprite} = require('../lib'); const container = new Container(512, 512); const scene = new Scene({container}); const fglayer = ...
  • <div><p>里面应该用了Window 对象,然后就是报错 未定义</p><p>该提问来源于开源项目:ZYSzys/vue-canvas-nest</p></div>
  • canvas 使用客户端渲染

    2020-12-09 05:37:35
    <div><h2>服务端渲染的劣势 <ul><li>兼容性问题太多,维护成本高</li></ul>该提问来源于开源项目:macacajs/NoSmoke</p></div>
  • node-canvas模块使用

    万次阅读 2017-05-03 13:01:58
    node-canvas模块是在node中实现canvas渲染的一种方式。可结合Echarts等应用于服务端生成图片流,进行图片处理等,如导出word或pdf时根据数据动态生成图片并嵌入文档中。下面将以Echarts为例,由服务端生成图片。1. ...

    node-canvas模块是在node中实现canvas渲染的一种方式。可结合Echarts等应用于服务端生成图片流,进行图片处理等,如导出word或pdf时根据数据动态生成图片并嵌入文档中。下面将以Echarts为例,由服务端生成图片。

    1. node-canvas安装

    安装方式与npm包一致:

    npm install canvas // or yarn add canvas

    但是,node-canvas包依赖于Cairo等,需要先在系统中安装相关依赖。

    OS Command
    OS X brew install pkg-config cairo libpng jpeg giflib
    Ubuntu sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
    Fedora sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel
    Solaris pkgin install cairo pkg-config xproto renderproto kbproto xextproto

    对于El Capitan用户而言,在安装相关依赖时可能会出错,还需要执行xcode-select --install。同时,使用brew安装时,会提示/usr/local/var无权限创建的问题,可以通过如下命令解决:

    mkdir /usr/local/var
    sudo chmod -R 777 /usr/local/var

    Linux下安装时可能会出现由于gcc、g++版本过低而无法编译node-canvas的问题,此时需要升级gcc、g++,升级办法详见此处。GCC中国镜像可以使用中科院镜像

    2. Echarts生成图片

    首先,需要安装Echarts包:

    npm install echarts // or yarn add echarts

    由于node-canvas默认不支持中文字体,所以需要导入中文字体文件,以华文仿宋为例,下载对应的ttf文件至项目目录,以便后续导入canvas。

    由于项目后台使用Egg.js框架,所以通过extend的方式扩展application,相应代码如下:

    // app/extend/application.js
    'use strict';
    
    const path = require('path');
    const Canvas = require('canvas');
    const echarts = require('echarts');
    const fs = require('fs');
    
    module.exports = {
      generateImage (options, savePath, size) {
        return new Promise((resolve, reject) => {
          const canvas = new Canvas(parseInt(size.width,10), parseInt(size.height,10));
          const font = new Canvas.Font('华文仿宋', path.join(__dirname, '华文仿宋.ttf'));
          const ctx = canvas.getContext('2d');
          ctx.addFont(font);
          ctx.font = '12px 华文仿宋';
    
          echarts.setCanvasCreator(function () {
            return canvas;
          });
          const chart = echarts.init(canvas);
          options.animation = false;
          options.textStyle = {
            fontFamily: '华文仿宋',
            fontSize: 12,
          };
          chart.setOption(options);
          try {
            fs.writeFileSync(savePath, chart.getDom().toBuffer());
            console.log("Create Img:" + savePath);
          } catch (err){
            console.error("Error: Write File failed" + err.message);
          }
          resolve();
        })
      }
    }

    通过此种方式即可在savePath目录生成相应的图片文件。对于图片流(base64编码)而言,则只需要将chart.getDom().toBuffer()改成chart.getDom().toBuffer().toString('base64'),并直接resolve即可。

    展开全文
  • 由于微信小程序本身框架的限制,很...前一种方案已经有非常多类似服务可选,比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务,并且有一定的网络开销。那么,如何利用 canvas 组件,在小...
    611cddfab9101a65e26987071dbad5eb.png

    由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:

    1. 服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片;
    2. 利用微信小程序 API 中提供的 canvas 组件支持,自行绘制图表。

    前一种方案已经有非常多类似服务可选,比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务,并且有一定的网络开销。

    那么,如何利用 canvas 组件,在小程序中绘制图表呢?下面,我们就来看尝试一下。

    API

    首先,我们在模板文件中使用 声明一个 canvas 组件,再使用 wx.createContext() 获取绘图上下文 context。

    接下来,我们调用 wx.drawCanvas() 进行绘制:

    2941805f67d196c559d2099a733ed7be.png

    开始图表的绘制

    绘制折线图

    39f5d0c74d3a078ec25f2473cce61a9b.png

    需要注意的是,moveTo() 方法不会记录到路径中。

    我们来看看效果图:

    92de051a297bae9cc5ca9a1066ec4620.png

    好像没有想象中难,看上去效果还不错。

    绘制每个数据点的标识图案

    43cfcebc110428240baca0cada2bebc4.png

    效果图:

    250180d0611e6baddbb787f978faab21.png

    为了避免之前绘制的折线路径影响到标识图案的路径,这一部分包裹在了 beginPath()closePath() 之间。

    绘制横坐标

    我们规定的参数格式是这样的:

    9788d1eec4118c461af4775b22592ce9.png

    我们根据参数中的 categories 来绘制横坐标。先稍微整理下思路:

    1. 根据 categories 数均分画布宽度;
    2. 计算出横坐标中每个分类的起始点;
    3. 绘制文案(这儿会多一些代码,后面会具体提到)。
    187a25981afe8d81fc9d4348713a2070.png

    效果图:

    996df467d419fbfd283b0de0a9928f38.png

    效果不错,除了文字没有居中.......

    查阅微信小程序官方提供的文档,小程序并没有提供 HTML 5 canvas 中的 mesureText(获取文案宽度)的方法。

    下面是我们自己简单的实现,并不是绝对精确,但误差基本可以忽略。

    13af26e27246743064baad87470ad77e.png

    这里分别处理了字母、数字、点(.)、横线(-)以及汉字这几个常用字符。

    上面的代码稍微修改下:

    2d4c5bb1969db386d0578f5a8da691a4.png
    481d976ae16d9138c8a165066d406726.png

    大功告成!

    如何在折线上绘制出每个数据点的数值文案呢?大家可以自己动手,尝试一下。

    展开全文
  • canvas获取base64图片并上传php服务器

    千次阅读 2017-06-05 17:19:48
    将图片渲染canvas 使用canvas的toDataUrl()方法获取bse64文件数据 将数据和文件名发送到服务端 服务端收到数据去掉”’,”前面的文件头信息 使用base64_decode()解码 使用file_put_contents()保存文件 前端var ...

    思路

    1. 将图片渲染到canvas
    2. 使用canvas的toDataUrl()方法获取bse64文件数据
    3. 将数据和文件名发送到服务端
    4. 服务端收到数据去掉”’,”前面的文件头信息
    5. 使用base64_decode()解码
    6. 使用file_put_contents()保存文件

    前端

    var canvas = $("canvas");
    var cxt = canvas[0].getContext('2d');
    var img = new Image();
    img.src = "xxxxxx";
    cxt.drawImage(img,0,0,300,300);
    //获取base64数据并上传
    var base64Img = canvas[0].toDataUrl();
    //只能使用post,get会报错,数据太长
    $.post('upload.php',{data:base64Img:name:xxx},function(res){
        console.log(res);
    });

    后台

    $file = "./upload/{$_POST['name']}.jpg";//文件报错路径
    $img = str_replace('data:image/jpeg;base64,', '', $_POST['data']);//将逗号签名的都匹配掉
    $img = str_replace(' ', '+', $img);
    $res = file_put_contents( $file , base64_decode($img) );//注意base640decode()方法不要怕忘记写了,必须要解码才能保存
    if($res){
        die(1);
    }

    如果不能保存文件请先检查该目录是否有写权限,我因为权限搞了一下午

    展开全文
  • 微信小程序中图表现状由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案:1、服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片,比如highcharts提供了服务端渲染的...
  • 做这个项目的初衷是希望能够开发一款不依赖服务端而纯通过客户端渲染为图片添加滤镜的小程序。但是由于微信小程序中的 canvas 组件与 DOM Canvas 元素有较大差异,因此传统的 Canvas 处...
  • 究其原因,发现我们绘画好的画布的确没错,只是此时DOM还没有渲染出来你的canvas标签元素,故提示此错误信息。解决方法: 1,将绘画方法放在文档的最后(script标签放在body标签后面), 2,如果是用vue开发,就...
  • 服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片,比如Highcharts提供了服务端渲染的能力hightcharts server render,这种方式需要后台有一套渲染服务,并且有一定的网络开销。 微信小程序API中提供...
  • 2021前端性能优化手段总结

    千次阅读 2021-02-02 09:32:54
    合并请求 压缩资源 资源精简 资源前置加载 ... SSR 服务端渲染 离线缓存 升级浏览器内核 Web Worker 异常检测404,白屏检测 容灾节点建设 虚拟列表 想浏览器内核提交优化建议或者代码 ...
  • Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中。 Jquery.Qrcode主要包括以下...
  • 30.express路由及服务端渲染 31.KOA-.better-body 32.Transaction 33.koa-ejs 34.爬虫及开发者工具 35.webpack 36.TypeScript 37.Vue.js基础 38.Vue 修饰符、循坏 40.Vue 41.Vuex+数据交互 42.Vue收尾 43.Vue动画、...

空空如也

空空如也

1 2 3
收藏数 60
精华内容 24
关键字:

服务端渲染canvas