Bagaimana saya bisa mendapatkan gambar resolusi tinggi dari kanvas yang lebih kecil?

Saya menggunakan satu kanvas di aplikasi web saya dan tinggi dan lebar sebenarnya adalah 500px. Saya menampilkan kanvas ini di layar sebagai persegi 500px tetapi saya ingin gambar diekspor dari kanvas ini sebagai persegi 1600px. Saya telah mencoba kode di bawah ini tetapi tidak berhasil.

canvas.width = 1600;
canvas.style.width = 500;

Bantuan apa pun akan dihargai.


javascript canvas html html5-canvas
person Nikunj Sardhara    schedule 15.02.2017    source sumber

Jawaban (3)


arrow_upward
3
arrow_downward

Anda dapat memiliki tampilan kanvas pada 500px namun tetap memiliki resolusi 1600px. Ukuran dan resolusi layar bersifat independen. Untuk resolusi Anda mengatur properti lebar dan tinggi kanvas. Untuk ukuran tampilan, Anda menyetel properti lebar dan tinggi gaya kanvas.

// 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");

Agar rendering sesuai dengan ukuran tampilan, Anda perlu meningkatkan semua rendering. Anda dapat melakukan ini dengan mengatur skala transformasi ke resolusi kanvas dibagi dengan ukuran tampilan

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

Sekarang ketika Anda merender ke kanvas, Anda menggunakan koordinat ukuran layar.

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();

Saat Anda menyimpan kanvas, metode apa pun yang Anda gunakan selama itu bukan tangkapan layar, kanvas yang disimpan akan berukuran 1600 kali 1600 dan semua rendering akan diposisikan dengan benar dan proporsional

person Blindman67    schedule 15.02.2017
comment
Ini berhasil di POC saya. Saya akan menyiapkan seluruh solusi saya. - person Nikunj Sardhara; 15.02.2017

arrow_upward
2
arrow_downward

HTML

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

CSS

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

Gunakan transform:scale() untuk menyesuaikan ukuran kanvas Anda

Sekarang 1600 * 1600 akan menjadi ukuran sebenarnya kanvas Anda, sehingga Anda dapat langsung mengekspor gambar dari kanvas Anda

Namun dalam tampilannya ditampilkan sebagai 500px * 500px karena diperkecil, hal ini tidak mempengaruhi kualitas gambar saat mengekspor

person Sajan    schedule 15.02.2017
comment
Tidak, bukan itu yang saya inginkan, saya pikir Anda salah paham. - person Nikunj Sardhara; 15.02.2017
comment
Saya ingin kanvas saya terlihat lebih kecil di layar (500x500) tetapi ketika saya mengekspor gambar dari kanvas itu harus lebih besar (1600x1600), itulah yang saya inginkan, kanvas sudah terlihat kecil di layar saya tidak ingin menskalakannya. - person Nikunj Sardhara; 15.02.2017
comment
saya menambahkan beberapa detail silakan periksa sekarang, Sebenarnya ukuran kanvas masih tetap 1600*1600 dan diperkecil menjadi 500*500 dalam tampilan .. - person Sajan; 15.02.2017

arrow_upward
1
arrow_downward

Jawaban jujur: Anda tidak bisa.

Jika ya, maka Anda akan menemukan cara untuk mengompresi data secara lossless dengan ukuran kurang dari 1/9 dari ukuran aslinya, dan tanpa pengkodean apa pun, yang tentunya tidak mungkin dilakukan.

Yang dapat Anda lakukan adalah memperbesarnya sedemikian rupa sehingga setidaknya tidak menjadi buram. Untuk melakukannya, Anda memerlukan gambar akhir berupa kelipatan bilangan bulat dari kanvas sebelumnya, sehingga browser tidak akan menerapkan anti-aliasing. Atau jika Anda ingin menggunakan rumus penyalinan Anda sendiri dengan putImageData yang akan menghilangkan anti-aliasing, Anda masih akan mendapatkan berbagai ketidaksesuaian dan itu akan sangat lambat

Dalam kasus Anda, nilai terdekat yang bisa Anda dapatkan adalah 1500x1500 ( 3*500x3*500 ). Jika tujuan Anda adalah memproses gambar, Anda kurang beruntung, namun jika Anda hanya ingin menampilkan sesuatu yang cukup bagus, Anda dapat menggunakan berbagai trik lain seperti memusatkan kanvas dan menggunakan properti seperti box-shadow untuk memperjelas bahwa itu benar. terpisah dari bagian layar lainnya

person towc    schedule 15.02.2017