ฉันจะรับภาพความละเอียดสูงจากผืนผ้าใบขนาดเล็กได้อย่างไร

คุณสามารถแสดงแคนวาสที่ 500px ในขณะที่ยังคงมีความละเอียด 1600px ขนาดและความละเอียดของจอแสดงผลมีความเป็นอิสระ สำหรับความละเอียด คุณตั้งค่าคุณสมบัติความกว้างและความสูงของผืนผ้าใบ สำหรับขนาดการแสดงผล คุณตั้งค่าคุณสมบัติความกว้างและความสูงของผ้าใบ สไตล์

// create a canvas or get it from the page
var canvas = document.createElement("canvas");
// set the resolution (number of pixels)
canvas.width = canvas.height = 1600;
// set the display size
canvas.style.width = canvas.style.height = "500px";
// get the rendering context
var ctx = canvas.getContext("2d");

เพื่อให้การเรนเดอร์ตรงกับขนาดจอแสดงผล คุณต้องขยายขนาดการเรนเดอร์ทั้งหมด คุณสามารถทำได้โดยการตั้งค่ามาตราส่วนการแปลงเป็นความละเอียดแคนวาสหารด้วยขนาดการแสดงผล

var scale = 1600 / 500; // get the scale that matches display size 
ctx.setTransform(scale,0,0,scale,0,0);

ตอนนี้เมื่อคุณเรนเดอร์บนผืนผ้าใบ คุณจะใช้พิกัดขนาดหน้าจอ

ctx.fillRect(0,0,500,500); // fill all of the canvas.
ctx.fillStyle = "red";  // draw a red circle 100 display pixels in size.
ctx.beginPath();
ctx.arc(250,250,100,0,Math.PI * 2);
ctx.fill();

เมื่อคุณบันทึกผืนผ้าใบ วิธีใดก็ตามที่คุณใช้ตราบใดที่ไม่ได้จับภาพหน้าจอ ผืนผ้าใบที่บันทึกไว้จะเป็น 1600 x 1600 และการเรนเดอร์ทั้งหมดจะอยู่ในตำแหน่งที่ถูกต้องและเป็นสัดส่วน

HTML

<canvas width="1600px" height="1600px" > </canvas>

ซีเอสเอส

canvas{
   position :absolute;
   transform:scale(0.3125);
   left:-500px; //adjust
   top:-350px; //adjust
}

ใช้การ Transformer:scale() เพื่อปรับขนาดผืนผ้าใบของคุณ

ตอนนี้ 1600 * 1600 จะเป็นขนาดจริงของผืนผ้าใบของคุณ ดังนั้นคุณจึงสามารถส่งออกรูปภาพจากผืนผ้าใบของคุณได้โดยตรง

แต่ในมุมมองมันจะแสดงเป็น 500px * 500px เนื่องจากถูกลดขนาดลง จึงไม่ส่งผลต่อคุณภาพของภาพขณะส่งออก

คำตอบที่ซื่อสัตย์: คุณไม่สามารถ

หากคุณทำเช่นนั้น คุณจะพบวิธีในการบีบอัดข้อมูลโดยไม่สูญเสียคุณภาพโดยมีขนาดน้อยกว่า 1/9 ของขนาดดั้งเดิม และไม่มีการเข้ารหัสใดๆ ซึ่งเป็นไปไม่ได้อย่างไม่อาจโต้แย้งได้

สิ่งที่คุณสามารถทำได้คือขยายขนาดในลักษณะที่อย่างน้อยที่สุดก็ไม่เบลอ ในการทำเช่นนั้น คุณต้องใช้รูปภาพสุดท้ายเป็นจำนวนเต็มทวีคูณของผืนผ้าใบก่อนหน้า ดังนั้นเบราว์เซอร์จะไม่ใช้การป้องกันนามแฝง หรือถ้าคุณต้องการใช้สูตรการคัดลอกของคุณเองด้วย putImageData ที่จะกำจัด anti-aliasing คุณจะยังคงได้รับความไม่ลงรอยกันต่างๆ และมันจะช้ามาก

ในกรณีของคุณ ค่าที่ใกล้เคียงที่สุดที่คุณจะได้คือ 1500x1500 ( 3*500x3*500 ) หากประเด็นของคุณคือการประมวลผลภาพ คุณโชคไม่ดี แต่ถ้าคุณเพียงต้องการแสดงสิ่งที่ดีเพียงพอ คุณสามารถหันไปใช้เทคนิคอื่นๆ เช่น การจัดกึ่งกลางผืนผ้าใบ และใช้คุณสมบัติเช่น box-shadow เพื่อให้ชัดเจนว่า แยกจากส่วนที่เหลือของหน้าจอ