背景简介

全民K歌专辑发布新玩法，传统宣传专辑战绩的流程，从获取数据，到制作海报，到传播，周期长运营成本高，如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题。

产品：能不能在专辑大事件触发时，自动生成一个大事件长图，供粉丝分享传播？

开发：理论上没问题，尝试下吧…

浏览器端实现方案

开发：大事件长图和专辑详情页大事件tab的视觉效果基本一致，如果能复用可以减少开发时间。

开发：怎么复用呢？

于是便有了下面在浏览器端尝试dom转图片的两种方案：

html2canvas

html2canvas一个在浏览器端通过JS对整个或部分页面进行“截屏”的库。

html2canvas使用方法简单，截屏的核心代码如下：

let imgBase64;

html2canvas(htm,{

   onrendered : function(canvas){

    //生成base64图片数据

    imgBase64 = canvas.toDataURL();

});

使用简单，但是坑不少，遇到的坑及解决方案：

1.截图模糊

主要解决思路：

1）将canvas的width和height属性放大为2倍。

2）将canvas的CSS样式width和height设置为原先1倍的大小。

<canvas width="200" height="100" style="width:100px;height:50px;"></canvas>

2.截图不全

源码获取dom高度不准确，修改源码，获取高度后手动传，修改方式如下：

源码：

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {

        if (typeof(options.onrendered) === "function") {

            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");

            options.onrendered(canvas);

        }

        return canvas;

});

修改后

//添加自定义高度宽度

    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;

    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;

    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {

        if (typeof(options.onrendered) === "function") {

            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");

            options.onrendered(canvas);

        }

        return canvas;

    });

3.截图慢

截图慢得从html2canvas的原理说起，html2canvas并不是真正的截图，而是遍历加载的页面DOM，收集所有元素的信息，然后基于从DOM读取的属性使用canvas来绘制。

基于这个截图原理，慢的问题优化空间不大，而且html2canvas还有些CSS的限制，它只能正确地呈现它支持的CSS属性，完整的CSS属性支持列表，可以在官网查看。

关于慢，最简单的解决方案是在用户操作前提前生成截图。

4.crash

html2canvas截图后，将图片的base64传到客户端的分享组件，当base64超过500k可能导致客户端卡死或crash，如果慢的问题还能忍，那这个问题是真的没法接受的。

svg

除了html2canvas网上也有更轻量更快的库，这些库是基于svg的，尝试了下确实比html2canvas快很多。

svg方案的尝试：

//要转成图片的dom

let htm = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="auto"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><div>这里是页面内容...</div></div></foreignObject></svg>';

let DOMURL = window.URL || window.webkitURL || window;

let canvas = document.createElement('canvas');

let ctx = canvas.getContext('2d');

let img = new Image();

let svg = new Blob([htm], {type: 'image/svg+xml;charset=utf-8'});

let url = DOMURL.createObjectURL(svg);

let imgBase64;

img.onload = function () {

  ctx.drawImage(img, 0, 0);

  imgBase64 = canvas.toDataURL();

}

img.src = url;

svg方案没法绕过的坑：

1.ios下不支持跨域图片

由于安全限制，ios下跨域图片加crossOrigin属性也没法绕过跨域问题。

2.crash

和html2canvas一样，svg转图片后最终也是转base64传分享组件，base64超过500K可能导致的卡死和crash问题也存在。

服务器端实现方案

开发：浏览器端的方案crash问题不能忍，不如在服务器端生成图片，传图片URL到分享组件？

本着最大限度复用代码的初衷，首选了无头浏览器phantomjs截图的方案。

PhantomJS

PhantomJS是基于WebKit内核的无头浏览器，提供浏览器环境的命令行接口，我们可以进行网页截图、抓取网页数据等操作，更多详情可以去PhantomJS官网查看。

安装PhantomJS时，注意安装以下依赖：

sudo yum -y install gcc gcc-c++ make flex bison gperf ruby openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel libpng-devel libjpeg-devel

服务器端方案选择的是phantomjs-node库，实现截图的核心代码如下：

var sitepage = null;

var phInstance = null;

phantom.create()

    .then(instance => {

        phInstance = instance;

        return instance.createPage();

    })

    .then(page => {

        let htm = [

            '<!DOCTYPE html>',

            '<html lang="zh-cn">',

            '<head>',

                '<meta charset="utf-8">',

            '</head>',

            '<body style="background:#fff">',

                '<div>'+ new Date() +'</div>',

            '</body>',

            '</html>'

        ].join("");

        page.property('content',htm);

        page.render('./test.png').then((err) => {

            phInstance.exit()

        }).catch(err => {

            phInstance.exit();

        })

    })

    .catch(error => {

        phInstance.exit();

    });

PhantomJS遇到的坑也不少，主要是环境问题：

1.没截图生成

开发：在mac上和windows上生成截图正常，部署到测试环境后不能生成截图，打印PhantomJS日志，没有明确的报错信息。linux下权限问题？

查看PhantomJS和目录权限，PhantomJS没有写权限，修复权限问题，图片仍然不能生成。

开发：字母命名的截图正常生成，不支持图片文件名包含数字？

一番验证，截图名包含数字phantomjs-node不能正常生成图片文件。

2.截图空白

开发：颜色和图案均能够渲染到截图中，只有文字不能渲染，字体有问题？

确认测试机中字体目录为空，更新字体，文字终于能正常渲染到截图中。

3.截图模糊

又是模糊问题…

css使用相对rem单位,PhantomJS截图是设置缩放参数：

//css

html{font-size: 100px;}

.owner_avatar{width:.30rem;height: .30rem;border-radius: .30rem;margin-right: .10rem;}

.events_img{width: .50rem;height:.50rem;}

//phantomjs缩放处理

page.property('viewportSize',{width:828,height:736});

page.property('zoomFactor',2)

page.property('content',htm);

4.截图加载慢

模糊问题设置2倍图后，图片大小暴涨到6M+，导致加载慢，设置截图质量：

page.render(fileName,{quality:85}).then((err) => {

    phInstance.exit();

})

5.截图慢

PhantomJS生成一个最简单的截图，耗时2S左右，这个速度显然是不能接受的，暂时没找到比较好的优化方式。

node canvas

node canvas扩展了canvas API以提供与节点的接口,例如流式传输PNG数据,转换为Buffer实例等，更多介绍可以去node canvas官网查看。

node canvas的环境搭建比较麻烦，依赖库与PhantomJS类似，这里就不列举了。

绘制图片的核心代码：

const { createCanvas, loadImage } = require('canvas');

const canvas = createCanvas(200, 200);

const ctx = canvas.getContext('2d');

ctx.font = '30px';

ctx.fillText('test', 50, 100);

loadImage('test.jpg').then((image) => {

  ctx.drawImage(image, 0, 0, 70, 70);

})

node canvas与下面imagemagick的方案对比，imagemagick的性能更好，node canvas没再深入只实现了简单demo，踩坑不多。

ImageMagick 与 GraphicsMagick

ImageMagick是一套功能强大、稳定而且免费的工具集和开发包，可以用来读、写和处理超过90种的图片文件，包括流行的TIFF、JPEG、GIF、 PNG、PDF以及PhotoCD等格式。

ImageMagick可以根据web应用程序的需要动态生成图片, 还可以对一个（或一组）图片进行改变大小、旋转、锐化、减色或增加特效等操作，并将操作的结果以相同格式或其它格式保存，对图片的操作，即可以通过命令行进行，也可以用C/C++、Perl、Java、PHP、Python或Ruby编程来完成。更多详情可在ImageMagick官网查看。

GraphicsMagick是从 ImageMagick 5.5.2 分支出来的，据说它变得更稳定和优秀，更多详情可在GraphicsMagick官网查看。

看起来GraphicsMagick是更好的选择，但是由于node gm这个库没有实现GraphicsMagick的半透明和圆角支持，而且针对专辑的大事件长图做了一些性能对比两者差异不大，所以选择使用ImageMagick。

node gm切换ImageMagick的方式非常简单，只要加以下设置：

var gm = require('gm');

var imageMagick = gm.subClass({ imageMagick: true });

不可避免的，使用ImageMagick也遇到一些坑：

1.半透明遮罩

设计：专辑封面背景使用白透明遮罩，遮罩的颜色根据封面图来定，深色封面图用白色文字，浅色封面图用黑色文字。

开发：OK，先canvas获取封面图颜色信息，再判断颜色深浅

//RGB与YUV互转，Y>=128 为浅色

Y'= 0.299*R' + 0.587*G' + 0.114*B'

U'= -0.147*R' - 0.289*G' + 0.436*B' = 0.492*(B'- Y')

V'= 0.615*R' - 0.515*G' - 0.100*B' = 0.877*(R'- Y')

R' = Y' + 1.140*V'

G' = Y' - 0.394*U' - 0.581*V'

B' = Y' + 2.032*U'

//ImageMagick设置透明色

.fill("rgba(0,0,0,.5)")

2.头像圆角

设计：这些头像要用圆角哦。

开发：OK（还好ImageMagick支持圆角）

.fill("avatar.jpg")

.drawCircle(80,120,30,120)

ImageMagick圆角图片实现方式与canvas类似，画一个圆，然后用头像图片去填充来实现头像圆角。

3.昵称emoji表情

ImageMagick绘制昵称中的表情图比较麻烦，使用支持emoji的字体，尝试过Twitter的彩色emoji字体，但是ImageMagick有BUG，不能还原为彩色的。

最终解决方案：

1）使用等宽字体，方便计算精确的emoji位置

2）ImageMagick绘制昵称中的表情图片

.draw("image Over " + size + " " + url)

ImageMagick性能优化：

优化前：

优化后：

ImageMagick生成单张图片耗时100ms左右，但是并发请求多了平均耗时就暴涨到3S+，这个速度显然是不能接受的，经过一番优化后将平均耗时降到1S左右，主要优化点如下：

1.gm代码拼接，VM中执行

多次调用gm多次操作图片，严重影响性能，将图片操作代码拼接成字符串，在VM中执行，只调用一次gm，核心代码如下：

let sandbox = {

    gm : imageMagick,

    start : Date.now()

}

//计算图片高度

let offset = getOffset();

let qrcodeStr = getQrcodeStr();

let titleStr = (function(){

    return [

        '.fontSize(24)',

        '.fill("gray")',

        '.drawText(164,152,"我是标题")'

    ];

})();

let str = 'gm(828,'+ offset.height +',"#fff").font("'+ FONTS +'",48)'+ titleStr + qrcodeStr +'.quality(90).write("test.jpg",function(err){console.log(err || Date.now() - start)})';

let script = new vm.Script(str);

let context = vm.createContext(sandbox);

script.runInContext(context);

2.mpc格式

mpc是ImageMagick提供的一种持久高速缓存格式，减少对图像格式进行解码和编码像素的开销。

mpc生成两个文件：

1）一个扩展名.mpc保留了与图像或图像序列相关的所有属性（例如宽度，高度，色彩空间等）。

2）一个扩展名.cache，是本地原始格式的像素缓存。

读取mpc图像文件时，ImageMagick读取图像属性，并将内存映射到磁盘上的像素缓存，无需解码图像像素，不过mpc的文件大小比其他图像格式大。

mpc图像文件适用于一次写入，多次读取模式，使用mpc将图像直接映射到内存，而不是每次重新读取和解压源图像。

3.Q8版本

ImageMagick Q16版本允许在不缩放的情况下读写16位图像，但像素缓存消耗的资源是Q8版本的两倍，Q8版本的执行速度通常比Q16版本要快。

像素缓存消耗 = 宽度*高度*位深度/ 8 *通道

Q8位深 = 8 

Q16位深 = 16

通道 = 红 + 绿 + 蓝 + 阿尔法强度

更详细的性能优化信息可在ImageMagick Architecture查看。

总结

web端实现实时图片生成采坑挺多，目前ImageMagick的方案还有些性能瓶颈，持续优化中。换个思路，如果传递页面URL，由客户端渲染页面，实现截图，或许是更优的方案，目前还没尝试，值得一试…

web实时长图实践--摘抄的更多相关文章

Python——截取web网页长图
# -*- coding: utf8 -*-import timeimport xlrdfrom selenium import webdriver def read_excel(filename): ...
常见的Web实时消息交互方式和SignalR
标签: WebSocket SignalR 前言 1. Web消息交互技术 1.1 常见技术 1.2 WebSocket介绍 1.3 WebSocket示例 2. Signal 2.1 SignalR ...
【转】常见的Web实时消息交互方式和SignalR
https://www.cnblogs.com/Wddpct/p/5650015.html 前言 1. Web消息交互技术1.1 常见技术1.2 WebSocket介绍1.3 WebSocket示例 ...
【转】优化Web程序的最佳实践
自动排版有点乱,看着蛋疼,建议下载中文PDF版阅读或阅读英文原文. Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各 ...
Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
Web前端开发最佳实践（2）：前端代码重构
前言代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
关于nagios系统下使用shell脚本自定义监控插件的编写以及没有实时监控图的问题
关于nagios系统下shell自定义监控插件的编写.脚本规范以及没有实时监控图的问题的解决办法在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主 ...
Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果编译 Web优化Google雅虎P ...
WEB 实时推送技术的总结
前言随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控.Web 在线通讯.即时报价系统.在线游戏等,都需要将后台发生的变化主动地.实时地传送到浏览器端,而不需要用 ...

随机推荐

mutt+msmtp做linux邮件客户端
mutt+msmtp做linux邮件客户端 1. 安装配置msmtp l 安装 wget https://sourceforge.net/projects/msmtp/files/msmtp/1.4 ...
GCD之dispatch queue
GCD之dispatch queue iOS中多线程编程工具主要有: NSThread NSOperation GCD 这三种方法都简单易用,各有千秋.但无疑GCD是最有诱惑力的,因为其本身是appl ...
APP上线碰到的问题：Non-public API usage
①.Non-public API usage:The app references non-public symbols in XXXX: _UICreateCGImageFromIOSurface ...
51nod——2502最多分成多少块
数据范围好小... 题目中没说要升序降序,不过样例解释里可以看出是要升序. #include <bits/stdc++.h> using namespace std; ],b[],visi ...
2018 noip 提高组初赛参考答案
这里有pdf文件:戳这儿
如何使用jmeter做关联
1.适用场景从上一个接口的返回值中获取值传递给下一个接口使用 2.添加JSON Extractor 在需求提取的参数上添加--后置处理器--JSON Extractor 从登录接口的返回值中取use ...
14-15.Yii2.0模型的创建/读取数据使用,框架防止sql注入
目录创建数据库表article 配置 db.php 连接数据库创建控制器 HomeController.php 创建models 创建数据库表article 1.创建库表 CREATE TAB ...
CUB reduce errorinvalid configuration argument
解决CUB reduce errorinvalid configuration argument问题在写TensorFlow代码时遇到报错 CUB reduce errorinvalid confi ...
cf 1017C
C. The Phone Number time limit per test 1 second memory limit per test 256 megabytes input standard ...
HDU 2242 双连通分量考研路茫茫——空调教室
思路就是求边双连通分量,然后缩点,再用树形DP搞一下. 代码和求强连通很类似,有点神奇,=_=,慢慢消化吧 #include <cstdio> #include <cstring&g ...

web实时长图实践--摘抄