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 menerapkan ini langkah demi langkah. Fungsikan dan temukan 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(mmmmmmmmmmmmmmmmmmmm,-300,i * 25); tanda air Sesuaikan sudut defleksi dengan aslinya, jika tidak maka akan terus berputar}html
<canvas height=200 id=myCanvas width=200>Browser Anda tidak mendukung tanda air, silakan gunakan Google Chrome untuk membukanya</canvas>
Mari kita coba sekarang dan temukan ada kesalahan.
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Setelah mencari di Google, saya menemukan bahwa ini disebabkan oleh masalah gambar lintas domain.
Cukup tambahkan atribut ke img baru kita.
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
Anda sudah selesai.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.