Как установить максимальную ширину холста по размеру экрана при сохранении соотношения сторон?
Я использую холст для загрузки изображения 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.info("Image: ", image);
Я использую это в приложении ionic-cordova.
Ответы 1
Вам нужно будет установить максимальную ширину, например: 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), для пересчета высоты холста, иначе сохраните размер холста = размер изображения.
Вы меняли drawImage с ctx.drawImage(image, 0, 0); на ctx.drawImage(image, 0, 0, nativeCanvas.width, nativeCanvas.height);?
Это помогло, но у меня проблема, когда изображение на самом деле не масштабируется, а обрезается только его часть.