Canvas mengimplementasikan kode contoh untuk menyimpan gambar secara lokal

Persyaratan: Simpan konten HTML5 sebagai gambar

Ide: Hasilkan gambar base64 melalui gambar Kanvas, tekan lama untuk menyimpan ke lokal

Masalah: Canvas melarang lintas domain, Android WeChat yang ditekan lama tidak dapat menyimpan gambar base64, gambar yang ditarik oleh server dikompresi

Pertanyaan 1: Canvas dilarang lintas domain. Jika gambar berasal dari domain lain, memanggil toDataURL() akan menimbulkan kesalahan.

Solusi: Tag <img> dapat menyelesaikan masalah lintas-domain dengan memperkenalkan atribut crossorigin, yaitu crossOrigin=Anonymous atau crossOrigin=*. Harap diperhatikan bahwa pengaturan 'Anonymous' di lingkungan Q seluler tidak didukung dan perlu disetel ke '*'. Jika crossorigin=anonymous digunakan, maka Setara dengan CORS anonim

Masalah 2: Tag <img> dengan set crossOrigin tidak dapat menarik gambar lintas domain dan img.onload tidak dapat dipicu.

Solusi: Untuk penerusan latar belakang atau proxy nigix, atur Access-Control-Allow-Origin: wx.qlogo.cn untuk mengizinkan gambar server sumber daya statis melintasi domain. (Gambar di sini adalah nama domain avatar pengguna wx.qlogo.cn, yang memiliki masalah lintas domain)

Pertanyaan 3: Gambar Base64 tidak dapat disimpan dengan menekan lama WeChat h5 di ponsel Android

Solusi: Unggah gambar base64 yang digambar dengan kanvas ke server, lalu dapatkan gambar png (jpg) dari server. Pendekatan ini lebih merepotkan, dan kita perlu mencari cara untuk memperbaikinya nanti.

Masalah 4: Gambar yang diunggah ke server dikompresi secara parah

Solusi: Gambar yang diunggah akan memiliki beberapa sumber daya di server, dengan tingkat kompresi berbeda. Anda bisa mendapatkan gambar dengan piksel lebih jelas dari direktori 'http://img10.360buyimg.com/promotepic/'.

Pertanyaan 5: Tekan lama pada link kode QR yang diambil (//wqs.jd.com/xxx) tidak bisa langsung masuk ke halaman.

Solusi: Saat menentukan tautan kode QR yang akan digambar, Anda harus menambahkan http: jika tidak, kode QR akan dikenali sebagai teks.

 //gambar kanvas bagian dari kode: var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKLeq5FiaXFWOdsltVe1R1PtJ2EtsDHYDjHgQ/0; document.createElement(canvas), ctx = canvas.getContext(2d), //Lihat pertanyaan 2 untuk latar belakang agen nigix src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com) ; / /Untuk mengatasi masalah toDataURL lintas domain kanvas tidak dapat dibaca, lihat pertanyaan 1 img.crossOrigin = Anonymous //Memuat sumber daya gambar img.onload = function() { canvas.width = img.lebar; kanvas.tinggi = img.tinggi; ctx.drawImage( img, 0, 0 ); //Gambar base64 yang digambar localStorage.setItem( disimpanImageData, kanvas.toDataURL(gambar/png) ); src;

Bagian dari kode untuk mengunggah gambar:

 // Lihat pertanyaan 3 untuk mengunggah gambar $.ajax({ ketik: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { nama file : Tanggal baru().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', konten: base64pic, aktif: shotpic20160901 }, tipe data: 'json', xhrFields: { withCredentials: true }, sukses: function(data) { if (picdata.id == 1 && picdata.msg) { //Jalur gambar dari jalur awalan ini adalah yang paling Lihat pertanyaan 4 untuk kejelasan var imgPre = 'http://img10.360buyimg.com/promotepic/'; //Tautan alamat lengkap untuk penyambungan alamat gambar var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { //untuk melakukan logika bisnis}; ,foto); } }, kesalahan:fungsi(data){ }});

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