在AWS Lambda中使用FabricJS缩放时图像被截断的问题

问题重现步骤 #

无法确定问题根源是FabricJS、AWS Lambda、node-canvas还是Lambda配置错误。

• 在Lambda函数上安装lambda-layer-canvas-nodejs层
• 使用缩放功能调整Canvas内的图像
• 图像高度被截断，详见下方示例
• 尝试过两种缩放方式：直接编辑JSON并使用loadFromJSON，以及通过fabric.Image.fromURL加载后调用scaleToWidth(1000)。该操作在浏览器及Node.js示例中均可正常运行，但在Lambda中图像会被截断；若保持原始缩放值0.09则可正常加载。

Lambda示例代码 #

import { fabric } from 'fabric';
export const handler = async(event, context, callback) => {
    var data = '{"version":"3.6.2","objects":[{"type":"image","version":"3.6.2","originX":"left","originY":"top","left":0,"top":0,"width":5400,"height":5400,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.18,"scaleY":0.18,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://printtech-builder.s3.amazonaws.com/tmp/27afaa61-5c7e-4307-8620-7faf14a3789d.jpeg","filters":[]},{"type":"text","version":"3.6.2","originX":"left","originY":"top","left":123,"top":125,"width":150,"height":45,"fill":"#000000","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Some text goes here","fontSize":26.21919234397663,"fontWeight":"normal","fontFamily":"aguafina_script-regular","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"styles":{}}]}';
    var canvas = new fabric.StaticCanvas(null, { width: 1000, height: 1000 });
    const resultsOf = await new Promise((resolve, reject) => {
        canvas.loadFromJSON(data, function() {
            canvas.renderAll();
            resolve('done');
        });
    });
    const response = {
        statusCode: 200,
        body: JSON.stringify(canvas.toDataURL()),
    };
    return response;
};

效果对比 #

• 生成的截断图像：
  
• 预期正确图像：
  

内容的提问来源于stack exchange，提问作者user2053040