Mengajari Anda cara menggunakan Canvas untuk memproses gambar

Canvas, diterjemahkan sebagai kanvas dalam bahasa Cina, memiliki elemen <canvas> baru di HTML5, yang dapat dikombinasikan dengan JavaScript untuk menggambar grafik di kanvas secara dinamis.

Hari ini kita tidak akan berbicara tentang menggambar grafis di Canvas, tetapi bagaimana cara mengolah gambar.

Prosesnya mungkin sangat sederhana dan dibagi menjadi tiga langkah berikut:

Ya, semudah memasukkan gajah ke dalam kulkas, haha.

Canvas API utama yang digunakan dalam keseluruhan proses adalah:

1. Menggambar gambar: drawImage()
2. Dapatkan data gambar: getImageData()
3. Tulis ulang data gambar: putImageData()
4. Ekspor gambar: toDataURL()

Seperti namanya, metode ini digunakan untuk menggambar gambar di kanvas Canvas. Ada tiga kegunaan khusus:

① Posisikan gambar pada kanvas: konteks.drawImage(img,x,y)

② Posisikan gambar pada kanvas dan tentukan lebar dan tinggi gambar: konteks.drawImage(img,x,y,width,height)

③ Potong gambar dan posisikan bagian yang dipotong pada kanvas: konteks.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

Nilai parameter di atas dijelaskan pada tabel berikut:

Cara ini digunakan untuk mendapatkan data gambar dari kanvas Canvas. Penggunaan spesifiknya adalah sebagai berikut:

Dapatkan data piksel dalam rentang persegi panjang kanvas yang ditentukan: var ImageData = konteks.getImageData(x,y,width,height)

Nilai parameter di atas dijelaskan pada tabel berikut:

Metode ini akan mengembalikan objek ImageData, yang memiliki tiga properti: lebar, tinggi, dan data. Array data yang terutama kami gunakan adalah ini, karena menyimpan data setiap piksel dalam gambar. Setelah memiliki data tersebut, kita dapat mengolahnya, dan akhirnya menulis ulang ke dalam kanvas Canvas, sehingga mewujudkan pemrosesan dan konversi gambar. Untuk penggunaan spesifik dari data array, kita dapat melihatnya pada contoh berikut.

Cara ini sangat sederhana dan digunakan untuk menulis ulang data gambar ke dalam kanvas Canvas. Penggunaan spesifiknya adalah sebagai berikut:

 konteks.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

Nilai parameter di atas dijelaskan pada tabel berikut:

Cara ini berbeda dengan ketiga cara di atas, yaitu cara pada objek Canvas. Cara ini mengembalikan string yang berisi data URI. String ini dapat langsung digunakan sebagai alamat jalur gambar untuk mengisi atribut src dari <img > tag. Secara khusus, Penggunaannya adalah sebagai berikut:

 var dataURL = kanvas.toDataURL(tipe, encoderOptions);

Nilai parameter di atas dijelaskan pada tabel berikut:

Contoh ini akan memperkenalkan secara singkat cara mengolah gambar berwarna menjadi gambar hitam putih melalui kode.

 <!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=memproses gambar/><input id=membuat type=button value=menghasilkan gambar /><div id=hasil></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //Dapatkan objek kanvas Canvas konteks = canvas.getContext('2d'); //Dapatkan objek konteks 2D, sebagian besar Canvas API Metode objek ini var image = new Image(); //Definisikan objek gambar image.src = 'imgs/img.jpg'; image.onload = function(){ //Anda harus memperhatikannya di sini! Semua operasi selanjutnya harus dilakukan setelah gambar berhasil dimuat, jika tidak, gambar akan diproses dalam konteks yang tidak valid.drawImage(image,0,0); //Mulai menggambar gambar dari sudut kiri atas (0,0) Kanvas kanvas. Ukuran defaultnya adalah Ukuran sebenarnya dari gambar var handle = document.getElementById(handle); var create = document.getElementById(create handle.onclick = function(){ // Klik tombol pemrosesan gambar untuk memproses gambar var imgData = konteks.getImageData(0,0,canvas.width,canvas.height); //Dapatkan objek data gambar var data = imgData.data; //Dapatkan array data gambar. Mewakili nilai merah, hijau, biru dan transparansi masing-masing var rata-rata = 0; untuk (var i = 0; i < data.length; i+=4) { rata-rata = Math.floor((data[i]+data[i+1]+data[i+2])/3); //Rata-ratakan nilai merah, hijau, dan biru untuk mendapatkan nilai skala abu-abu data[i] = data[i+1] = data[i+2] = rata-rata; Tulis ulang nilai warna setiap piksel} imgData.data = data; //Tulis ulang data gambar yang telah diproses ke kanvas Canvas, dan gambar di dalam kanvas menjadi hitam putih}; create.onclick = function(){ // Klik tombol Generate Image untuk mengekspor gambar var imgSrc = canvas.toDataURL( ); //Dapatkan DataURL dari gambar var newImg = new Image(); var result = document.getElementById(result); hasil.innerHTML = ''; hasil.appendChild(newImg);

Mungkin kode di atas kurang ditulis dengan baik, dan sepertinya tidak mudah untuk dipahami. Sebaiknya tulis sendiri saja, agar Anda bisa memahaminya lebih dalam.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.