• windows下的node-canvas历程


    背景:由于在前期开发的过程中,对前端的小图片采用了css-sprite,开始的时候都是在http://spritegen.website-performance.org/站点上合成图片及样式的,但是某天该站点突然不能访问,开始还怀疑是运维把站点给屏蔽了,后来才知道这个站点真的挂了,顿时觉得使用web站点上的工具太没有安全感了,所以决定在本地搭建一个css-sprite的工具环境。

    所以接下来就是nodejs的css-sprite之旅了。nodejs处理图片需要使用到node-canvas这个图像模块,在windows环境下搭建整个环境还是需要几个步骤:

    1.安装Python 2.7版本,3.0以上不支持;下载地址:https://www.python.org/downloads/

    2.安装node-gyp模块,使用命令行:npm install -g node-gyp;

    3.安装Visual C++ 2010 Express,编译时需要使用,下载地址:http://www.visualstudio.com/zh-cn/downloads/download-visual-studio-vs#DownloadFamilies_4

    4.下载GTK包并解压在C:GTK目录下并添加C:GTKin到系统path路径中;

       (GTK+, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off tools to complete application suites.)

       win64下载地址(推荐):http://ftp.gnome.org/pub/gnome/binaries/win64/gtk+/2.22/gtk+-bundle_2.22.1-20101229_win64.zip

    5.安装node-canvas模块,使用命令行:npm install -g node-canvas;

       编译成功后,在全局模块目录下会存在npm ode_modulescanvasuildReleasecanvas.node文件,在此目录下使用node命令行执行var c = require('canvas');如果输出undefine则编译成功;

    到此,不知道你已经踩过几个坑了,反正我踩好些个。

    1.由于我之前安装了Python 3.0以上版本,故在node-canvas编译时报错,此错误在错误提示信息中很明显,直接下载个Python 2.7版本并改写path路径即可解决。

    2.开始时我是在http://www.gtk.org/download/win64.php下载all-in-one bundle(即GTK+的所有编译文件),这个已是当前最新版本gtk+-bundle_3.6.4-20131201_win64,

       但是在使用该版本编译时会提示C:GTKliblibpng.lib未找到的错误,这是一个图片处理的核心库文件,不知道包提供者为什么没有把libpng给编译成lib文件。这个问题编译出来也很明显,所以就在GTK+站点上下载了libpng模块,提取其中的libpng.lib文件,libpng1.5版本没有提供libpng.lib文件,libpng1.4版本中有提供,所以我就使用了1.4版本中的libpng.lib文件,编译成功后执行var c = require('canvas');提示模块缺失,就使用了depends检查Release目录下canvas.node的dll依赖,发现存在几个dll缺失的情况,从系统system32中查找相应的dll并拷贝到C:GTKin目录下,运行var c = require('canvas');输出为undefined。正确。

    depends下载地址:http://www.dependencywalker.com/

    3.运行npm install spritegen下载spritegen模块,该模块调用canvas做了些css-sprite的功能,运行其中的test,执行失败,提示libpng的1.4与1.5版本使用冲突,具体是C:GTKincludelibpng15使用了libpng 1.5版本但是在问题2解决的过程中我使用了1.4版本中的lib文件,由于站点上下载的libpng1.5版本未能提供.lib文件,所以我尝试使用vc++ 2010版本编译,但是未能成功,由于受限于公司开发环境也不想在vs版本上做过多纠缠,所以就想在web上download一个libpng.lib文件,但是所download的文件均未能正常编译。最后放弃了GTK+的最新版本使用了gtk+-bundle_2.22.1-20101229_win64版本,node-canvas正常编译,且执行spritegen test成功,即canvas模块能正常使用了。

    一切问题解决完就是在spritegen代码的基础上增加自己的功能了,保证和spritegen.website-performance.org站点生成出来的格式一致,这样也就不用去改以前写好的css样式了,而且也可以添加自己想要的功能,最最重要的是在本地生成,安全便捷可重用^_^。

    参考:

    https://github.com/Ancestry/spritegen

    http://delarre.net/posts/installing-node-canvas-for-windows/

    https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows#installing-python-for-windows

    http://www.gtk.org/download/win64.php

  • 相关阅读:
    VS2005调试网站时不显示Flash元素
    js中使用弹出窗体
    Ipod Touch/Iphone歌词同步软件整理
    Chrome Dev 4.0.*增加flash支持
    字符串数组排序(qsort参数 比较函数)
    查找两个已经排好序的数组的第k大的元素
    求用1,2,5这三个数不同个数组合的和为100的组合个数
    Hadoop分布式环境下的数据抽样(转)
    Reservoir Sampling
    欧拉回路
  • 原文地址:https://www.cnblogs.com/virtual/p/3661592.html
Copyright © 2020-2023  润新知