Pixi.js: Only PNGs passed back when using pixi.renderer.extract.image

Created on 12 Apr 2018 · 7Comments · Source: pixijs/pixi.js

This is an FYI for anyone using pixi.renderer.extract.image under Canvas renderer. Who might run into this issue.

Our application takes a user image, renders it to the Pixi canvas while adding some effects. This final image is then shared on Twitter and Facebook.

We were was using pixi.renderer.extract.image to create a screenshot to post on Twitter's API using the 'https://upload.twitter.com/1.1/media/upload.json' endpoint.

However, by default, pixi.renderer.extract.image would return a high fidelity PNG image which would sometimes create a "413 Request Entity Too Large" error on a POST action to the Twitter API.

pixi.renderer.extract.image call this function.

CanvasExtract.prototype.base64 = function base64(target) { return this.canvas(target).toDataURL(); };

Our fix was to modifying the lib to give back JPEGs at 0.8

CanvasExtract.prototype.base64 = function base64(target) { return this.canvas(target).toDataURL('image/jpeg', 0.8); };

Environment

pixi.js version: 4.7.3
Browser: All
Device: All

Stale 📢 Accepting PRs 🙏 Feature Request

Source

Komsomol

👍1

Most helpful comment

Hello,
For hot fix in V4, I wrote an override code like this:

import * as PIXI from 'pixi.js'
PIXI.extract.webgl.prototype.base64 = function base64(target, format, quality) {
    return this.canvas(target).toDataURL(format, quality)
}

PIXI.extract.canvas.prototype.base64 = function base64(target, format, quality) {
    return this.canvas(target).toDataURL(format, quality)
}

Then, you can extract image from canvas like this:

let base64 = renderer.plugins.extract.base64(stage, 'image/jpeg', 1.0)

lcd11001 on 3 Jan 2019

❤2

All 7 comments

One option would be to turn this method:

base64(target)

into this:

base64(target, type, encoderOptions)

Where type and encoderOptions are optional.

Anyone want to make a PR for this?

bigtimebuddy on 12 Apr 2018

i think we need to add options in it in v5. Dont fiddle with it in v4, i had huge PR for it that went wrong.

ivanpopelyshev on 12 Apr 2018

I agree @ivanpopelyshev, option for v5 only

bigtimebuddy on 12 Apr 2018

@ivanpopelyshev @bigtimebuddy

Thanks. I agree that this can be an addition for v5. Just wanted to document this here for anyone who comes across the same issue.

Komsomol on 12 Apr 2018

👍1

Hello,
For hot fix in V4, I wrote an override code like this:

import * as PIXI from 'pixi.js'
PIXI.extract.webgl.prototype.base64 = function base64(target, format, quality) {
    return this.canvas(target).toDataURL(format, quality)
}

PIXI.extract.canvas.prototype.base64 = function base64(target, format, quality) {
    return this.canvas(target).toDataURL(format, quality)
}

Then, you can extract image from canvas like this:

let base64 = renderer.plugins.extract.base64(stage, 'image/jpeg', 1.0)

lcd11001 on 3 Jan 2019

❤2

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.