agentejo / cockpit

Add content management functionality to any site - plug & play / headless / api-first CMS
http://getcockpit.com
MIT License
5.4k stars 524 forks source link

Image endpoint fails or returns incompele images #1449

Closed BlindDespair closed 3 years ago

BlindDespair commented 3 years ago

Since I updated to the latest cockpit image images around my site started being shown distorted or simply not show up at all. I use the image?src=/storage/uploads/img.jpg&w=1280&o=1&q=80 endpoint quite extensively and so far been very happy with it. For some images it returns cropped version of image, but for some it fails with the following error:

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 24576 bytes) in /var/www/html/lib/vendor/claviska/simpleimage/src/claviska/SimpleImage.php on line 805

I downgraded my cockpit to 0.11.2 and it is working well again.

MarcoDaniels commented 3 years ago

In the latest cockpit version you should pass the parameter m=... to the /api/cockpit/image API.

If you're using the width property (w=...) passing ..&m=fitToWidth should do you a fix for most images, something like: image?src=/storage/uploads/img.jpg&w=1280&o=1&q=80&m=fitToWidth

You can check the docs and values here: https://getcockpit.com/documentation/api/cockpit

fetch('/api/cockpit/image?token=xxtokenxx', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        src: imagePath || asset._id,
        m: ('thumbnail' | 'bestFit' | 'resize' | 'fitToWidth' | 'fitToHeight'),
        f: (array),         // filter name(s), one or more of: 'blur' | 'brighten' | 'colorize' | 'contrast' | 'darken' | 'desaturate' | 'edge detect' | 'emboss' | 'flip' | 'invert' | 'opacity' | 'pixelate' | 'sepia' | 'sharpen' | 'sketch'
        w: (int),           // width
        h: (int),           // height
        q: (int),           // quality
        d: (boolean)        // include full domain path
        b64: (boolean)      // return base64 encoded image string
    })
})
.then(url => url.text())
.then(url => console.log(url));
BlindDespair commented 3 years ago

@MarcoDaniels thank you for a quick reply, I will try it. Although it would be great to know what each of the possible values of m means. Do I need to use 'resize' or 'fitToWidth'? It's unclear.

BlindDespair commented 3 years ago

I checked and it seems to work. 'fitToWidth' seems to suit my needs. Thanks!