-6.7 C
New York
Monday, December 23, 2024

javascript – I am making an attempt to implement the Net Share Api performance on my net app however when i take a look at it on my iphone 14 on chrome, will not be working


Has anybody else bumped into this challenge? I am implementing the Net Share API and it really works when i examined it utilizing my desktop however when i examined it utilizing my iphone 14 it really works on safari however when i take advantage of chrome, the primary couple of occasions i click on on the share button it doesn’t work ,some occasions it really works and a few occasions it doesn’t so i must spam click on it hoping it really works a type of occasions , what can also be wierd is that when i used a web based digital machine and examined it on iphone12 it labored advantageous so i do not know if it’s a compatibility downside ?

handleCopyOpen = async (socialHandle) => {
      if (this.sharingInProgress) {
        console.log('Sharing is already in progress.');
        return;
      }
      this.sharingInProgress = true;
    
      attempt {
        const targetElement = doc.querySelector('.milestone-popup');
        if (!targetElement) throw new Error('Goal factor not discovered.');
    
        // Get the Blob from the prepareScreenshot perform
        const blob = await this.prepareScreenshot(targetElement);
    
        if (navigator.canShare && navigator.canShare({ information: [new File([blob], 'screenshot.png', { kind: 'picture/png' })] })) {
          const file = new File([blob], 'screenshot.png', { kind: 'picture/png' });
    
          await navigator.share({
            title: 'Achievement on Fanstories',
            textual content: 'Try my newest achievement!',
            information: [file],
          });
          console.log('Shared efficiently utilizing Net Share API');
        } else {
          console.warn('Net Share API not supported. Exhibiting fallback.');
          const url = URL.createObjectURL(blob);
          window.open(url, '_blank');
        }
      } catch (error) {
        if (error.title === 'AbortError') {
          console.log('Person canceled the share operation.');
        } else {
          console.error('Error throughout sharing:', error);
          alert('Did not share. Please attempt once more.');
        }
      } lastly {
        this.sharingInProgress = false;
      }
    };
    
    prepareScreenshot = async (targetElement) => {
      // Outline cloneContainer outdoors the attempt block for broader scope
      let cloneContainer;
    
      attempt {
        // Clone the goal factor to keep away from modifying the unique DOM
        cloneContainer = doc.createElement('div');
        cloneContainer.fashion.cssText = `
          place: fastened;
          prime: 0;
          left: 0;
          width: 100vw;
          top: 100vh;
          z-index: -1; /* Retains the clone invisible */
          opacity: 0; /* Ensures it is not seen to customers */
        `;
        doc.physique.appendChild(cloneContainer);
    
        const clonedElement = targetElement.cloneNode(true);
        cloneContainer.appendChild(clonedElement);
    
        // Regulate cloned content material for capturing
        const footerElement = clonedElement.querySelector('.share-footer');
        const closeButtonElement = clonedElement.querySelector('.close-button');
        const confettiCanvas = clonedElement.querySelector('canvas');
    
        if (footerElement) footerElement.fashion.show = 'none';
        if (closeButtonElement) closeButtonElement.fashion.show = 'none';
        if (confettiCanvas) confettiCanvas.fashion.show = 'none';
    
        // Enable DOM modifications to replicate
        await new Promise((resolve) => setTimeout(resolve, 100));
    
        // Seize the screenshot
        const canvas = await html2canvas(clonedElement, {
          backgroundColor: null,
          useCORS: true,
          scale: 2, // Excessive decision
        });
    
        // Convert canvas to Blob
        return new Promise((resolve, reject) => {
          canvas.toBlob(
            (blob) => {
              if (blob) {
                resolve(blob); // Return the Blob straight
              } else {
                reject(new Error('Did not convert canvas to Blob.'));
      

        }
        },
        'picture/png', // MIME kind
        1.0 // Picture high quality (1.0 = greatest)
      );
    });
  } catch (error) {
    console.error('Error throughout screenshot preparation:', error);
    throw error;
  } lastly {
    // Guarantee cloneContainer is cleaned up
    if (cloneContainer) {
      doc.physique.removeChild(cloneContainer);
    }
  }
};

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles