Contoh gambar kompresi kanvas dan metode produksi kartu

Saat membuat beberapa halaman aktivitas, sering kali ada kebutuhan untuk mengunggah gambar, dan gambar, teks, dan stiker yang dihasilkan juga perlu dibuat menjadi kartu yang dapat ditekan lama oleh pengguna untuk menyimpannya. Persyaratan ini telah diselesaikan satu kali sebelumnya, dan baru-baru ini dipenuhi lagi. Semuanya diimplementasikan menggunakan kanvas. Baru saja membuat blog. Jika ada metode penerapan yang lebih baik, silakan berdiskusi bersama.

Saat menggunakan tag masukan tulis dalam html dan jenisnya adalah file, Anda dapat memanggil album foto ponsel Anda untuk memilih foto, dan Anda juga dapat mendukung kamera untuk mengambil foto. Dalam skenario ini, ukuran gambar mungkin lebih besar dan mungkin melebihi rentang maksimum yang didukung oleh backend, sehingga menyebabkan kegagalan pengunggahan.

 <masukan id=tipe file=file>

1. Pertama dapatkan file gambarnya

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (acara) { file = acara.target.files[0]; console.log(file) // File yang dipilih adalah gambar if (file.type.indexOf(image) == 0) { reader.readAsDataURL(file);

2. Sekarang Anda sudah mendapatkan file gambarnya, Anda harus memahami penggunaan objek FileReader di js.

Objek FileReader memungkinkan aplikasi web membaca konten file (atau buffer data mentah) secara asinkron yang disimpan di komputer pengguna

metode:

• readAsText: Metode ini memiliki dua parameter, parameter kedua adalah metode pengkodean teks, dan nilai defaultnya adalah UTF-8. Cara ini sangat mudah dipahami. File dibaca dalam mode teks, dan hasil pembacaannya adalah isi file teks tersebut.
• readAsBinaryString: Metode ini membaca file sebagai string biner. Biasanya kami mentransfernya ke backend, dan backend dapat menyimpan file melalui string ini.
• readAsDataURL: Ini adalah metode yang digunakan dalam program contoh. Metode ini membaca file sebagai string yang dimulai dengan data: Inti dari string ini adalah URL Data. URL Data adalah cara untuk menyematkan file kecil langsung ke dalam dokumen. rencana. File kecil disini biasanya mengacu pada file dengan format seperti gambar dan html. (Metode base64 diperoleh dari ini.)

Lanjutkan operasi di atas. Setelah mendapatkan gambar, Anda perlu memproses dan mengonversi file saat ini

 var reader = new FileReader(); //Baca file ke dalam halaman dalam bentuk Data URL reader.readAsDataURL(file reader.onload=function(e) { console.log(reader) }

Sekarang gambar telah diambil dan dikonversi, sekarang dapat dikompresi.

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // File yang dipilih adalah gambar if (file.type.indexOf(image) == 0) { var reader = new FileReader(); // Ubah file menjadi Data Baca halaman dalam bentuk URL reader.readAsDataURL(file); reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); this.result ) canvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL dikompresi dengan kanvas] * @params path Format gambar base64* @params targetWidth Lebar gambar yang dikompres* @params quality Semakin kecil nilai kualitas gambar, semakin buram gambar yang digambar*/ function canvasDataURL(path, targetWidth, quality) { var img = Gambar baru(); img.src = jalur img.onload = function () { // var that = this // console.log(that) // Kompresi proporsional default var w = this.width var h = this.height scale = w / h; w = targetWidth h = targetWidth / scale var quality = quality; // Kualitas gambar default adalah 0,7 // Hasilkan kanvas var canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); // Membuat simpul atribut var anw = document.createAttribute(width); document.createAttribute(height); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); semakin baik Semakin buram gambar yang digambar var base64 = canvas.toDataURL('image/jpeg', quality); hasil=dokumen.getElementById(hasil); hasil.setAttribute(src, base64) } }

Caranya sangat sederhana, sehingga Anda bisa mendapatkan gambar terkompresi. Dari kode di atas, kita dapat mengetahui bahwa prinsipnya adalah metode toDataURL di kanvas dapat menentukan format dan kualitas kompresi gambar terkompresi, serta mengompresi informasi kanvas dan mengonversinya. ke pengkodean base64.

Adegan: Gabungkan gambar yang baru saja dikompres dengan gambar lain, tekan lama untuk menyimpan.

 function drawCanvas (target) { var canvas = document.querySelector('#myCanvas') var ctx = canvas.getContext('2d') // Ini adalah piksel fisik pada perangkat dan piksel yang tidak bergantung pada perangkat (penurunan) Rasio var dp = window.devicePixelRatio ||. 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||.ctx.mozBackingStorePixelRatio ||.ctx.msBackingStorePixelRatio ||.ctx.oBackingStorePixelRatio ||.ctx.backingStorePixelRatio ||. oldWidth * rasio canvas.height = oldHeight * rasio canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(ratio, rasio) var headerImg = Gambar baru() var bgImg = Gambar baru() headerImg.src = target bgImg.src = '../bg.png' headerImg.onload = (e) => { // Rasio aspek gambar var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate )) // Gambar latar belakang ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Luar Biasa', 80, 70) var resultImg = Gambar baru() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document . getElementById(cardImg); cardImg.setAttribute(src, resultImg.src) } }

Dapatkan gambar yang baru saja Anda peroleh, dan setelah gambar dimuat, gambarlah di kanvas, Anda juga dapat menambahkan teks, dll. Terakhir, informasi kanvas dikonversi ke pengkodean base64 untuk implementasi. Contohnya bisa dipraktikkan melalui kode

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