How can I control the size of parsed Image? about apng-js HOT 12 CLOSED

Ok, you should not set the width/height of canvas other than width/height of image. Frames renders in 1:1 scale so it's natural that if you change that, the picture will be cropped. But the width/height attributes don't determine rigidly the physical dimensions of element. You can set any size for canvas by CSS, regardless of the width and height attributes values.

from apng-js.

I just opened the demo page, added a canvas { width: 300px; } style via Chrome inspector and loaded APNG file. The file was animated normally and the width of the element on the page was 300px. So it works the way it should.

from apng-js.

You can use a regular CSS width/height to contol size of canvas element.

from apng-js.

Yes. It can't show the image when reducing the canvas element. Because the image which parsed APNG image size from canvas still remains the original size.

from apng-js.

I think It needs to control since parseAPNG(buffer) method was called. But, I don't know how to control the size of the parsed image dynamically for each image in your method. How can I do for that, @davidmz . Thanks

from apng-js.

I'm afraid I don't understand your problem. This library does not create canvas elements. You can create canvas yourself, assign it the right size via CSS, and start playing APNG in it.

It may be easier if you show the problem code on codesandbox, for example.

from apng-js.

I was testing in your demo project.

-I have the image(APNG) to upload , width : 1920px, height: 1080px
-But for example : I want to show that image only width 300px , height 300px
-So I change css style of apng-ani div and canvas element , then the image can't show.

from apng-js.

I changed only width 300px from the original 480px. Then, It does not show the entire image. You can check the image by https://apng.onevcat.com/assets/elephant.png

from apng-js.

Please send a link to a live demonstration of the problem.

from apng-js.

Hi davidmz, could you see https://estates-officer-elephant-63118.netlify.com/ for resizing issue. I made
canvas.width = 300;
canvas.height = 400;

from apng-js.

OMG! It work like a charm 👍

from apng-js.

Thanks @davidmz . It works for me.

from apng-js.