Kanvas HTML5 mengimplementasikan penambahan tanda air ubin ke gambar

Baru-baru ini, saya menemukan persyaratan dalam sebuah proyek, yang mengharuskan penambahan tanda air ubin ke gambar.

Efek serupa

Hal pertama yang terlintas dalam pikiran adalah menggunakan kanvas untuk menyelesaikan fungsi ini. Karena saya belum pernah terkena kanvas sebelumnya, jadi ketika saya melakukan fungsi ini, saya hanya mempelajari langkah demi langkah. Prosesnya cukup bagus untuk mengimplementasikan ini langkah demi langkah dan menemukan beberapa kelemahan kanvas.

Karena fungsi ini memerlukan beberapa API berbasis kanvas dan tidak melibatkan masalah prinsip apa pun, saya akan langsung menempelkan kode js di sini.

 var img = Gambar baru();// Karena tugas proyek saya adalah menambahkan tanda air pada gambar Taobao, maka berikut adalah gambar utama produk Taobao img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // Siapkan lingkungan kanvas var canvas = dokumen. getElementById(kanvas saya); var ctx = canvas.getContext(2d); // Pertama gambarkan gambar ke kanvas ctx.drawImage(img, 0, 0, 200, 200); // Gambarkan watermark ke kanvas untuk (misalkan i = 0; i < 20; i++ ) { ctx.rotate((-45 * Math.PI) / 180); // Sudut defleksi awal tanda air ctx.font = 20px microsoft yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmm,-300,i * 25); tanda air Sesuaikan sudut defleksi dengan aslinya, jika tidak maka akan terus berputar}

html

 <tinggi kanvas=200 id=lebar kanvas saya=200>

Browser Anda tidak mendukung tanda air, gunakan Google Chrome untuk membukanya</canvas>

Mari kita coba sekarang dan temukan ada kesalahan.

Gagal menjalankan 'toDataURL' di 'HTMLCanvasElement': Kanvas yang tercemar tidak dapat diekspor.

Setelah mencari di Google, saya menemukan bahwa ini disebabkan oleh masalah gambar lintas domain.

Cukup tambahkan atribut ke img baru kami.

img.setAttribute(crossorigin, crossorigin);

Oleh karena itu, kode img baru di bagian js menjadi

 var img = new Image();// Karena bisnis dalam proyek saya adalah menambahkan tanda air ke gambar Taobao, jadi inilah gambar utama produk Taobao img.setAttribute(crossorigin, crossorigin);// Kode ini untuk menyelesaikannya masalah lintas domain. Jika gambar Anda adalah milik Anda sendiri dan tidak ada masalah lintas domain, Anda dapat menghapus img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';

Selanjutnya, mari kita lihat produk jadi kita

Di atas adalah implementasi kanvas HTML5 yang diperkenalkan oleh editor untuk menambahkan tanda air ubin ke gambar. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu!