แม้ว่าข้อมูลโค้ดบางส่วนจะสั้นและใช้งานได้ แต่ก็ไม่สำคัญที่จะติดตามและทำความเข้าใจ
เนื่องจากฉันไม่ใช่แฟนของ "copy-paste" จาก stack-overflow ฉันจึงอยากให้นักพัฒนาเข้าใจโค้ดที่พวกเขาถูกผลักเข้าไปในซอฟต์แวร์หวังว่าคุณจะพบว่าด้านล่างมีประโยชน์
DEMO : การปรับขนาดภาพด้วย JS และ HTML Canvas Demo fiddler
คุณอาจพบวิธีการปรับขนาดได้ 3 วิธีซึ่งจะช่วยให้คุณเข้าใจว่าโค้ดทำงานอย่างไรและทำไม
https://jsfiddle.net/1b68eLdr/93089/
โค้ดทั้งหมดของทั้งการสาธิตและเมธอด TypeScript ที่คุณอาจต้องการใช้ในโค้ดของคุณสามารถพบได้ในโครงการ GitHub
https://github.com/eyalc4/ts-image-resizer
นี่คือรหัสสุดท้าย:
export class ImageTools {
base64ResizedImage: string = null;
constructor() {
}
ResizeImage(base64image: string, width: number = 1080, height: number = 1080) {
let img = new Image();
img.src = base64image;
img.onload = () => {
if(img.height <= height && img.width <= width) {
this.base64ResizedImage = base64image;
}
else {
if(img.height > img.width) {
width = Math.floor(height * (img.width / img.height));
}
else {
height = Math.floor(width * (img.height / img.width));
}
let resizingCanvas: HTMLCanvasElement = document.createElement('canvas');
let resizingCanvasContext = resizingCanvas.getContext("2d");
resizingCanvas.width = img.width;
resizingCanvas.height = img.height;
resizingCanvasContext.drawImage(img, 0, 0, resizingCanvas.width, resizingCanvas.height);
let curImageDimensions = {
width: Math.floor(img.width),
height: Math.floor(img.height)
};
let halfImageDimensions = {
width: null,
height: null
};
while (curImageDimensions.width * 0.5 > width) {
halfImageDimensions.width = Math.floor(curImageDimensions.width * 0.5);
halfImageDimensions.height = Math.floor(curImageDimensions.height * 0.5);
resizingCanvasContext.drawImage(resizingCanvas, 0, 0, curImageDimensions.width, curImageDimensions.height,
0, 0, halfImageDimensions.width, halfImageDimensions.height);
curImageDimensions.width = halfImageDimensions.width;
curImageDimensions.height = halfImageDimensions.height;
}
let outputCanvas: HTMLCanvasElement = document.createElement('canvas');
let outputCanvasContext = outputCanvas.getContext("2d");
outputCanvas.width = width;
outputCanvas.height = height;
outputCanvasContext.drawImage(resizingCanvas, 0, 0, curImageDimensions.width, curImageDimensions.height,
0, 0, width, height);
this.base64ResizedImage = outputCanvas.toDataURL('image/jpeg', 0.85);
}
};
}}