精华内容
下载资源
问答
  • web实时长图实践

    2018-11-12 17:26:30
    全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题。 产品:能不能在专辑...

    背景简介

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

    bb

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

    开发:理论上没问题,尝试下吧…

    浏览器端实现方案

    开发:大事件长图和专辑详情页大事件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>',             '<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.半透明遮罩

    bb

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

    开发: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.头像圆角

    bb

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

    开发:OK(还好ImageMagick支持圆角)

    
    .fill("avatar.jpg")
    .drawCircle(80,120,30,120)
    

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

    3.昵称emoji表情

    bb

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

    最终解决方案:

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

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

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

    ImageMagick性能优化:

    优化前:

    bb

    优化后:

    bb

    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,由客户端渲染页面,实现截图,或许是更优的方案,目前还没尝试,值得一试…

    来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31557897/viewspace-2219669/,如需转载,请注明出处,否则将追究法律责任。

    转载于:http://blog.itpub.net/31557897/viewspace-2219669/

    展开全文
  • 全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题。 产品:能不能在专辑大事件触发时,自动生成...

    背景简介

    全民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,由客户端渲染页面,实现截图,或许是更优的方案,目前还没尝试,值得一试…

    转载于:https://www.cnblogs.com/liuhao-web/p/8422249.html

    展开全文
  • 第1章 怎样才能制作出优秀的幻灯片 1.1 这些细节你注意了吗 1.2 这些问题你碰到过吗 1.2.1 文字过多的幻灯片 1.2.2 文本中应用过多效果的幻灯片 1.2.3 滥用渐变效果的幻灯片 1.2.4 画面比较混乱的幻灯片 1.2.5 只...
  • 青少年图形化编程 Scratch编程 儿童编程 消灭新冠病毒 新冠病毒,这个词语在去年年底俨然而生,在今年上...我们今天这个案例的主要目的是给小朋友们宣传如何防范新冠疫苗;并结合我们所学的Scratch知识完成案例的制作
  • 本地的使用者群组(user group),或者你所用的 Linux 发行版本也许正在宣传他们的网页论坛或 IRC 频道,并提供新手帮助(在一些非英语国家,新手论坛很可能还是邮件列表), 这些地方是开始提问的好首选,特别是当...
  • 本书围绕Flash在商业广告方面的应用,全面讲解了商业宣传广告、网站片头动画及全Flash网站等的制作方法。 第1章Flash基础知识和动画原理 1.1FlashMX2004基础知识 初始界面与新建文档 界面布局和自定义界面 首选参数...
  • 本书围绕Flash在商业广告方面的应用,全面讲解了商业宣传广告、网站片头动画及全Flash网站等的制作方法。 第1章Flash基础知识和动画原理 1.1FlashMX2004基础知识 初始界面与新建文档 界面布局和自定义界面 首选参数...
  • 本书围绕Flash在商业广告方面的应用,全面讲解了商业宣传广告、网站片头动画及全Flash网站等的制作方法。 第1章Flash基础知识和动画原理 1.1FlashMX2004基础知识 初始界面与新建文档 界面布局和自定义界面 首选参数...
  • Seaborn是在Matplotlib的基础上进行了更高级的API封装,从而使得作图更加容易,在大多数情况下使用seaborn能做出很具有吸引力的,而使用matplotlib就能制作具有更多特色的。安装Seaborn库步骤参考项目部署。 ...
  • 实例029 自动运行的多媒体宣传光盘 1.8 多媒体触摸屏程序应用实例 实例030 采购中心多媒体触摸屏程序 实例031 为触摸屏程序添加虚拟键盘 1.9 窗体位置应用实例 实例032 不可移动的窗体 实例033 始终在最上面...
  •  cc实例029 自动运行的多媒体宣传光盘   1.8 多媒体触摸屏程序应用实例   cc实例030 采购中心多媒体触摸屏程序   cc实例031 为触摸屏程序添加虚拟键盘   1.9 窗体位置应用实例   cc实例032 不可...
  • Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须 全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 ...实例342 利用神龙卡制作练歌房...
  • 实例029 自动运行的多媒体宣传光盘 1.8 多媒体触摸屏程序应用实例 实例030 采购中心多媒体触摸屏程序 实例031 为触摸屏程序添加虚拟键盘 1.9 窗体位置应用实例 实例032 不可移动的窗体 实例033 始终在最上面...
  • 实例029 自动运行的多媒体宣传光盘 1.8 多媒体触摸屏程序应用实例 实例030 采购中心多媒体触摸屏程序 实例031 为触摸屏程序添加虚拟键盘 1.9 窗体位置应用实例 实例032 不可移动的窗体 实例033 始终在最上面...
  • 明日科技出版的Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单...实例342 利用神龙卡制作...
  • 实例029 自动运行的多媒体宣传光盘 1.8 多媒体触摸屏程序应用实例 实例030 采购中心多媒体触摸屏程序 实例031 为触摸屏程序添加虚拟键盘 1.9 窗体位置应用实例 实例032 不可移动的窗体 实例033 始终在最上面...
  • 实例029 自动运行的多媒体宣传光盘 1.8 多媒体触摸屏程序应用实例 实例030 采购中心多媒体触摸屏程序 实例031 为触摸屏程序添加虚拟键盘 1.9 窗体位置应用实例 实例032 不可移动的窗体 实例033 始终在最上面...
  • 实例029 自动运行的多媒体宣传光盘 1.8 多媒体触摸屏程序应用实例 实例030 采购中心多媒体触摸屏程序 实例031 为触摸屏程序添加虚拟键盘 1.9 窗体位置应用实例 实例032 不可移动的窗体 实例033 始终在最上面...
  •  cc实例029 自动运行的多媒体宣传光盘   1.8 多媒体触摸屏程序应用实例   cc实例030 采购中心多媒体触摸屏程序   cc实例031 为触摸屏程序添加虚拟键盘   1.9 窗体位置应用实例   cc实例032 不可...
  •  cc实例029 自动运行的多媒体宣传光盘   1.8 多媒体触摸屏程序应用实例   cc实例030 采购中心多媒体触摸屏程序   cc实例031 为触摸屏程序添加虚拟键盘   1.9 窗体位置应用实例   cc实例032 不可...
  •  cc实例029 自动运行的多媒体宣传光盘   1.8 多媒体触摸屏程序应用实例   cc实例030 采购中心多媒体触摸屏程序   cc实例031 为触摸屏程序添加虚拟键盘   1.9 窗体位置应用实例   cc实例032 不可...
  •  cc实例029 自动运行的多媒体宣传光盘   1.8 多媒体触摸屏程序应用实例   cc实例030 采购中心多媒体触摸屏程序   cc实例031 为触摸屏程序添加虚拟键盘   1.9 窗体位置应用实例   cc实例032 不可...
  • 119 利用Image控件制作小动画 cc实例120 透明的Flash动画 cc实例121 播放GIF动画 cc实例122 播放AVI动画 cc实例123 播放VCD 4.2 制作与播放音频 cc实例124 可以选择播放曲目的CD播放器 cc实例125 MP3...
  • 119 利用Image控件制作小动画 cc实例120 透明的Flash动画 cc实例121 播放GIF动画 cc实例122 播放AVI动画 cc实例123 播放VCD 4.2 制作与播放音频 cc实例124 可以选择播放曲目的CD播放器 cc实例125 MP3...
  • 实例205 利用MSHFlexGrid控件的合并功能制作 特色报表 366 实例206 动态增加行 367 4.12 二进制数据处理技术 369 实例207 使用存取文件路径的方法存取图片 369 实例208 使用AppendChunk方法将二进制文件 存入...
  • 实例205 利用MSHFlexGrid控件的合并功能制作 特色报表 366 实例206 动态增加行 367 4.12 二进制数据处理技术 369 实例207 使用存取文件路径的方法存取图片 369 实例208 使用AppendChunk方法将二进制文件 存入...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

如何制作宣传长图