Cara menambahkan watermark gambar menggunakan HTML5 Canvas – Beragampengetahuan

1 <gambar PENGENAL=“gambar sumber“ kode sumber=“jalur/ke/gambar-Anda.jpg“ pengganti=“gambar sumber“ gaya=“pameran:tanpa apapun;“>

2 <kanvas PENGENAL=“kanvas“>kanvas>

3

4 <naskah>

5 konstan kanvas = dokumen.Dapatkan elemen berdasarkan ID(‘kanvas’);

6 konstan konteks = kanvas.Dapatkan konteks(‘2d’);

7 konstan gambar = dokumen.Dapatkan elemen berdasarkan ID(‘sumber gambar’);

8

9 gambar.memuat = Fungsi() {

10 kanvas.lebar = gambar.lebar;

11 kanvas.tinggi = gambar.tinggi;

12 konteks.menggambar gambar(gambar, 0, 0);

13

14

15 konteks.font = “Dinasti Lagu 30px”;

16 konteks.Isi gaya = “rgba(255.255.255,0.5)”;

Nomor 17 konteks.perataan teks = “benar”;

18 konteks.garis dasar teks = “dasar”;

Nomor 19 konteks.Isi teks(“Teks tanda air Anda”, kanvas.lebar – 10, kanvas.tinggi – 10);

20

dua puluh satu

Nomor 22 konstan gambar tanda air = baru gambar();

dua puluh tiga gambar tanda air.kode sumber = ‘jalur/ke/tanda air.png’;

dua puluh empat gambar tanda air.memuat = Fungsi() {

25 konteks.alfa global = 0,5;

26 konteks.menggambar gambar(gambar tanda air, kanvas.lebar – gambar tanda air.lebar – 10, kanvas.tinggi – gambar tanda air.tinggi – 10);

27 konteks.alfa global = 1.0;

28 };

29 };

30 naskah>