镜像内置canvas依赖、浏览器、字体包。最近正在提供节点截图服务，包括echart配置项和浏览器截图。本地环境开发好后，部署容器，发现如下问题。puppeteer运行报错无法安装canvas包，没有中文字体包。接下来，一步步解决问题。我们是docker部署。首先，我们需要选择镜像并编写Dockerfile（或管道构建编辑器）。DockerfileFROM自己创建的镜像：versionWORKDIR/appADD。.ENVPUPPETEER_SKIP_CHROMIUM_DOWNLOAD=trueENVPUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browserRUNnpmi--registry=https://registry.npmmirror.comEXPOSE3030CMD["sh","-c","NODE_ENV=$NODE_ENV节点。/app.js"]镜像由于Ubuntu、CentOS等系统漏洞太多，公司不允许通过安全扫描。您只能使用他们提供的基本图像。基本映像中没有任何需要安装的东西。根据canvas文档的描述，找不到前置依赖文档，导致安装出错。经过摸索，需要的依赖如下：#安装图形软件和canvas依赖的编译器apkadd--update--no-cachemakeg++jpeg-devcairo-devgiflib-devpango-devlibtoolautoconfautomake#安装浏览器节点npmapkadd--update--no-cachechromiumnodejsnpm一共安装了238个包，用了10多分钟才安装完成。截图显示没有中文字体包，下一步就是将字体包复制到容器中。在另一个控制台输入如下命令#mac字体地址/System/Library/Fonts其他自行搜索#图片字体库地址/usr/share/fonts/不要自己搜索#查看正在运行的图片dockerps找到需要的CONTAINERIDdockercp/System/Library/Fonts/b0cda85d36:/usr/share/fonts/然后查看图片运行cd/usr/share/fonts/lsmkfontscalemkfontdirfc-cache然后运行??fc-list:lang=zh查看字体包，这样就可以了，测试浏览器截图的时候出现错误。需要查看浏览器所在位置找到cd/usr/binls然后修改js代码executablePath指定地址或者在Dockerfile中设置环境变量puppeteer.launch({args:['--no-sandbox','--disable-setuid-sandbox'],executablePath:'/usr/bin/chromium-browser',})下一步新建文件testcd/tmpnpmicanvaspuppeteertouchcanvas.jstouchpuppeteer.jsvicanvas.jsvipuppeteer.jscanvas.jsconstfs=require('fs')const{createCanvas,loadImage}=require('canvas')constcanvas=createCanvas(1200,500)constcontext=canvas.getContext('2d')const。fillStyle='#000'context.fillRect(0,0,1200,500)const.font='bold70ptMenlo'context.textAlign='center'context.textBaseline='top'context.fillStyle='#3574d4'consttext='你好，我！你好世界'consttextWidth=consttextWidth=context.measureText(text).widthcontext.fillRect(600-textWidth/2-10,170-5,textWidth+20,120)context.fillStyle='#fff'context.fillText(text,600,170)constbuffer=canvas.toBuffer('image/png')fs.writeFileSync('./canvas.png',buffer)puppeteer.jsconstpuppeteer=require("puppeteer");puppeteer.launch({args:['--no-sandbox','--disable-setuid-sandbox'],executablePath:'/usr/bin/chromium-browser',}).then(asyncbrowser=>{constpage=awaitbrowser.newPage();awaitpage.goto("https://www.baidu.com");awaitpage.screenshot({path:"puppeteer.png"});awaitbrowser.close();});接下来就是运行测试nodecanvas.jsnodepuppeteer.jsls最后看这两张图。正常吗？把测试的东西删掉，做个镜像。交流
