Как установить максимальную ширину холста по размеру экрана при сохранении соотношения сторон? - PullRequest
Новая
       12

Как установить максимальную ширину холста по размеру экрана при сохранении соотношения сторон?

0 голосов
/ 17 декабря 2018

Я использую Canvas для загрузки изображения base64.В настоящее время у меня есть, так что это будет полный размер загруженного изображения.Я хочу, чтобы холст сохранял соотношение сторон изображения, но при этом использовал максимальную ширину экрана iphone, на котором я его использую.Прямо сейчас он исчезает с экрана при загрузке.

Ниже приведен мой холст-код: 

// imageData is a base64 encoded string
this.base64Image = "data:image/jpeg;base64," + imageData;

// Load image on canvas
const nativeCanvas: HTMLCanvasElement = this.cameraCanvas
    .nativeElement;
const ctx = nativeCanvas.getContext("2d");

var image = new Image();
image.onload = function() {
    nativeCanvas.height = image.height;
    nativeCanvas.width = image.width;
    ctx.drawImage(image, 0, 0);
};
image.src = this.base64Image;
console.log("Image: ", image);

Я использую его в приложении ionic-cordova.

1 Ответ

0 голосов
/ 17 декабря 2018

Вам нужно будет установить максимальную ширину, например: let maxW = 500.Это может быть ширина вашего iPhone.Затем вы можете рассчитать новую новую высоту изображения.Я надеюсь, что это то, что вы спрашивали. 

image.onload = function() {
    nativeCanvas.width = maxW;
    nativeCanvas.height = (img.height * maxW)/img.width;
    ctx.drawImage(image, 0, 0, nativeCanvas.width, nativeCanvas.height);
};

Также вы можете использовать условное выражение, например if(img.width > maxW), пересчитать высоту холста, иначе оставьте размер холста = размер изображения.

...