I use Pixi.js and I want to down-size a big JPEG but the quality of the picture is affected.
I load the picture like this:
this.App = new PIXI.Application({ background: 'black', resizeTo: window, antialias: true })
this.ironing = await PIXI.Assets.load('/ironing.jpg')
this.Container = new PIXI.Container()
this.Painting = PIXI.Sprite.from(this.ironing)
this.App.stage.addChild(this.Container)
this.Container.addChild(this.Painting)
await gsap.to(this.Container, {
width: 2577,
height: 3200,
x: -930,
y: -650,
duration: 0.6
})
In the picture I downloaded, the painting on the left is the pixi rendering with bad quality and on the right there is the preview on a normal image preview app.
You can test my code here: https://virages.io
What's wrong ?
I tried the following:
antialias: true, resolution: window.devicePixelRatio || 1
[results][1], on this pictures bottom are high density screens and top are normal screens, right are normal resolution & right are device pixel ratio resolution + autodensity.
Thanks to this videos & repos : https://www.youtube.com/@CJGammon/search?query=pixi https://github.com/diving-in/pixijs here's my code :
const renderer = new PIXI.Renderer({
resolution: window.devicePixelRatio,
autoDensity: true
})
For normal screens, the rendering is little bit aliased even with the antialias option but for hight density pixel screens that do the trick !