Automattic / Automattic/node-canvas

fabricjs scale cuts off image when using aws lambda

Open
#2,210 1 comment 0 reactions 0 assignees View on GitHub
Bug
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

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](https://user-images.githubusercontent.com/3507007/224349409-500fa94e-a35a-4163-a6e1-8e34bfcd7f44.png)
image should look like:
![exampleCorrect](https://user-images.githubusercontent.com/3507007/224349469-51fc93cc-cde4-486e-895e-aac2306e7135.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.