support cropping or resizing images before uploading to the server #929

New Issue

2017-11-22T13:43:52Z

rsaf commented

2017-11-22 13:43:52 +00:00

(Migrated from github.com)

Support cropping or resizing images before uploading to the server

joelpierre commented

2018-01-01 20:59:28 +00:00

(Migrated from github.com)

You can do this simply in JS. Here I just ensure an image is never bigger than X and Y. But you can change it to suit your purpose.

Something I tend to do is this. Take out what you do not need of course.

`
processCoverImage() {
const imgFile = 'the file input src value'
const maxWidth = 1280;
const maxHeight = 700;
let ratio = 0;
let width;
let height;
let ctx;

width = imgFile.naturalWidth;
height = imgFile.naturalHeight;

if (width > maxWidth) {
  ratio = maxWidth / width;
  width = width * ratio;
  height = height * ratio;
}

if (height > maxHeight) {
  ratio = maxHeight / height;
  width = width * ratio;
  height = height * ratio;
}

canvas.width = width;
canvas.height = height;

ctx = canvas.getContext('2d');

ctx.drawImage(imgPreview, 0, 0, width, height);

...

}
`

You can do this simply in JS. Here I just ensure an image is never bigger than X and Y. But you can change it to suit your purpose. Something I tend to do is this. Take out what you do not need of course. ` processCoverImage() { const imgFile = 'the file input src value' const maxWidth = 1280; const maxHeight = 700; let ratio = 0; let width; let height; let ctx; width = imgFile.naturalWidth; height = imgFile.naturalHeight; if (width > maxWidth) { ratio = maxWidth / width; width = width * ratio; height = height * ratio; } if (height > maxHeight) { ratio = maxHeight / height; width = width * ratio; height = height * ratio; } canvas.width = width; canvas.height = height; ctx = canvas.getContext('2d'); ctx.drawImage(imgPreview, 0, 0, width, height); ... } `

👍 1 🚀 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#929