charoitel / lambda-layer-canvas-nodejs

Cairo backed Mozilla Web Canvas API implementation layer for AWS Lambda
https://serverlessrepo.aws.amazon.com/applications/arn:aws:serverlessrepo:us-east-1:990551184979:applications~lambda-layer-canvas-nodejs
MIT License
87 stars 22 forks source link

fabricjs scale cuts off image when using aws lambda #15

Closed chrismeats closed 1 year ago

chrismeats commented 1 year ago

Steps To Reproduce I am not sure if this is an issue with fabricjs, aws lambda, node-canvas, or I am not setting this up correctly on lambda.

  1. Install lambda-layer-canvas-nodejs layer on lambda function
  2. Utilize scaling to adjust image inside of canvas
  3. height of image is then cut off, see below
  4. I have tried using scaling by directly editing json and using loadfromjson as well as using fabric.Image.fromURL and then using scaleToWidth(1000); to scale image. This works correctly in browser, and in nodejs example on codesandbox.io https://codesandbox.io/s/boring-minsky-j3jxi1?file=/src/index.js However, in lambda the image is cut off. If I leave the scaling at the original setting of .09 then it loads correctly

Example of code from 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;
};

Generated Image: example cut off image should look like: exampleCorrect

charoitel commented 1 year ago

@chrismeats , is the issue still there? please try and see if increasing memory may help, thank you~

chrismeats commented 1 year ago

No, and its been long enough now I honestly dont remember what I did to fix it.

charoitel commented 1 year ago

@chrismeats , my apologies for my late response. Good to hear that it was fixed already. Hope you enjoyed using the layer. Thank you~