Dalam Nuxt PWA saya, saya mempunyai fungsi yang menukar HTML kepada Kanvas menggunakan pakej ini. Imej yang dijana adalah dalam asas 64. Sekarang saya mahu dapat berkongsi imej melalui: Whatsapp, Facebook, E-mel, Instagram, dll. Saya telah menemui beberapa pakej, tetapi tiada satu pun daripada mereka nampaknya menyokong perkongsian hanya URL fail dan teks.
Ini adalah fungsi perkongsian saya:
shareTicket(index) {
html2canvas(this.$refs['ticket-' + index][0], {
backgroundColor: '#efefef',
useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
}).then((canvas) => {
let url = canvas.toDataURL('image/png') // finally produced image url
if (navigator.share) {
navigator.share({
title: 'Title to be shared',
text: 'Text to be shared',
url: this.url,
})
}
})
Bila saya keluarkan if (navigator.share) 条件时，我的控制台中出现错误，指出 navigator.share ia bukan fungsi. Saya membaca di suatu tempat bahawa ia hanya berfungsi dengan HTTPS, jadi saya memuat naik ke pelayan pementasan saya dan mencubanya, tetapi masih mendapat ralat yang sama.
Untuk lebih jelasnya, saya mahu dapat berkongsi imej yang dijana itu sendiri, bukan URL.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya mempunyai variasi kod berikut dalam fungsi
share()dalam aplikasi saya dan ia berfungsi dengan baik jika dilaksanakan pada klien.const share = async() => { if (!('share' in navigator)) { return; } // `element` is the HTML element you want to share. // `backgroundColor` is the desired background color. const canvas = await html2canvas(element, { backgroundColor, }); canvas.toBlob(async (blob) => { // Even if you want to share just one file you need to // send them as an array of files. const files = [new File([blob], 'image.png', { type: blob.type })]; const shareData = { text: 'Some text', title: 'Some title', files, }; if (navigator.canShare(shareData)) { try { await navigator.share(shareData); } catch (err) { if (err.name !== 'AbortError') { console.error(err.name, err.message); } } } else { console.warn('Sharing not supported', shareData); } }); };Beritahu saya jika URL ini sesuai untuk anda: https://nuxt-share-social-media.netlify.app
Jika ya, anda boleh mencari repositori Github di sini: https://github.com/ Kissu/so-share-image-bounty
Kodnya ialah
Diinspirasikan oleh @denvercoder9!