import { SPComponentLoader } from "@microsoft/sp-loader" ; const DEFAULT_PERSONA_IMG_HASH = "7ad602295f8386b7615b582d87bcc294" ; const DEFAULT_IMAGE_PLACEHOLDER_HASH = "4a48f26592f4e1498d7a478a4c48609c" ; const MD5_MODULE_ID = "8494e7d7-6b99-47b2-a741-59873e42f16f" ; const PROFILE_IMAGE_URL = "/_layouts/15/userphoto.aspx?size=M&accountname=" ; export const getScrollPosition = ( _dataListContainerRef ) => { const { scrollTop , scrollHeight , clientHeight } = _dataListContainerRef ; const percentNow = ( scrollTop / ( scrollHeight - clientHeight ) ) * 100 ; return percentNow ; } ; export const b64toBlob = async ( b64Data , contentType , sliceSize ? ) : Promise < Blob > => { contentType = contentType || "image/png" ; sliceSize = sliceSize || 512 ; let byteCharacters = atob ( b64Data ) ; let byteArrays = [ ] ; for ( let offset = 0 ; offset < byteCharacters . length ; offset += sliceSize ) { let slice = byteCharacters . slice ( offset , offset + sliceSize ) ; let byteNumbers = new Array ( slice . length ) ; for ( let i = 0 ; i < slice . length ; i ++ ) { byteNumbers [ i ] = slice . charCodeAt ( i ) ; } let byteArray = new Uint8Array ( byteNumbers ) ; byteArrays . push ( byteArray ) ; } let blob = new Blob ( byteArrays , { type : contentType } ) ; return blob ; } ; export const blobToBase64 = ( blob ) : Promise < string > => { return new Promise ( ( resolve , reject ) => { const reader = new FileReader ( ) ; reader . onerror = reject ; reader . onload = ( _ ) => { resolve ( reader . result as string ) ; } ; reader . readAsDataURL ( blob ) ; } ) ; } ; export const getImageBase64 = async ( pictureUrl ) : Promise < string > => { console . log ( pictureUrl ) ; return new Promise ( ( resolve , reject ) => { let image = new Image ( ) ; image . addEventListener ( "load" , ( ) => { let tempCanvas = document . createElement ( "canvas" ) ; ( tempCanvas . width = image . width ) , ( tempCanvas . height = image . height ) , tempCanvas . getContext ( "2d" ) . drawImage ( image , 0 , 0 ) ; let base64Str ; try { base64Str = tempCanvas . toDataURL ( "image/png" ) ; } catch ( e ) { return "" ; } base64Str = base64Str . replace ( /^data:image\/png;base64,/ , "" ) ; resolve ( base64Str ) ; } ) ; image . src = pictureUrl ; } ) ; } ; param url export const getMd5HashForUrl = async ( url ) => { return new Promise ( async ( resolve , reject ) => { const library = await loadSPComponentById ( MD5_MODULE_ID ) ; try { const md5Hash = library . Md5Hash ; if ( md5Hash ) { const convertedHash = md5Hash ( url ) ; resolve ( convertedHash ) ; } } catch ( error ) { resolve ( url ) ; } } ) ; } ; param componentId export const loadSPComponentById = async ( componentId ) => { return new Promise ( ( resolve , reject ) => { SPComponentLoader . loadComponentById ( componentId ) . then ( ( component ) => { resolve ( component ) ; } ) . catch ( ( error ) => { } ) ; } ) ; } ; param userId returns export const getUserPhoto = async ( userId ) : Promise < string > => { const personaImgUrl = PROFILE_IMAGE_URL + userId ; const url = await getImageBase64 ( personaImgUrl ) ; const newHash = await getMd5HashForUrl ( url ) ; if ( newHash !== DEFAULT_PERSONA_IMG_HASH && newHash !== DEFAULT_IMAGE_PLACEHOLDER_HASH ) { return "data:image/png;base64," + url ; } else { return "undefined" ; } } ;