Announcing the new WebGL Snapshot package for UAR!


#22

Hi everyone!

Thank you for bringing this to our attention - we’ve been able to have a look at the issues here and were successfully able to find a solution. The README should now be updated and we will be updating the docs to reflect this change :zap:

You should now be able to use the package something like this:

// Get canvas from dom
const canvas = document.querySelector('canvas');

// Convert canvas data to url

const url = canvas!.toDataURL('image/jpeg', 0.8);

ZapparWebGLSnapshot({
  data: url,
  fileNamePrepend: 'Zappar',
  shareUrl: 'www.zappar.com',
  shareTitle: 'Hello World!',
  shareText: 'Hello World!',
  onSave: () => {
    console.log('Image was saved');
  },
  onShare: () => {
    console.log('Share button was pressed');
  },
  onClose: () => {
    console.log('Dialog was closed');
  },
}, {}, {
  SAVE: 'SAVE',
  SHARE: 'SHARE',
  NowOpenFilesAppToShare: 'Now open files app to share',
  TapAndHoldToSave: 'Tap and hold the image<br/>to save to your Photos app',
});


Have a great day!
Francesca :blush:


#23

i follow the step and still get black screenshot


#24

You are correct! One thing I forgot to note on the Unity side is that you NEED to have a yield WaitForEndOfFrame in the code! So here is an edit to the TakeScreenShot.cs:

public void TakeScreenShot () {
		
		StartCoroutine(GetScreenshot());
		
	}
	
	IEnumerator GetScreenshot(){

		yield return new WaitForEndOfFrame();
		
		TakeScreenshot();
		
	}

Now, another issue people were having was because the screenshot was being flipped upside down. With help from the Zapworks team we found this fix. Change this code:

const url = canvas.toDataURL('image/jpeg', 0.8);

To this code:

const url = getDataUrl(canvas, 'image/jpeg');

Then add this function:

function getDataUrl(origCanvas, mimeType) {
             
   var canvas = document.createElement('canvas');
   canvas.width = origCanvas.width;
   canvas.height = origCanvas.height;
   var destCtx = canvas.getContext('2d');
   if (!destCtx) {
       console.error("Cannot create context")
       return ""
   }
   destCtx?.drawImage(origCanvas, 0, 0);
   return destCtx.canvas.toDataURL(mimeType);
}

Thanks,
jrDev

#25

thanks, now its working


#26

When I use this code, I only see the option to Save. I do not see any Share button or feature anywhere in the Snapshot UI. I am setting hideShareButton to false.

What am I missing? I am testing on iOS Safari mobile.

Update: I see the Share button when testing on Android. If the Share button is only available on Android, please update the README for the npm page to clarify that, rather than just stating “Where available”.


#27

@jrDev This is AWESOME. Thanks for that.


#28

Hello,

No problem everyone, anything I can do to help make fellow developers lives easier. Now have to figure out a way to have that Share button also show on iOS.

Thanks,
jrDev