InnovationLab/public/assets/js/pageShare.js

function PageShare(props) {
    const { useRef, useState, useEffect } = React;
    const { userMerge } = props;
    const [ loading, setLoading ] = useState(false);
    const [ isReady, setIsReady ] = useState(false);
    
    const refDisplayImage = useRef();
    const userOrder = useRef(0);
    const API__DOMAIN = (window.location.host === 'www.pxfreshdelivery.tw') ? 'https://www.pxfreshdelivery.tw/' : 'https://demo.pxfreshdelivery.tw/';

    function goNext() {
        props.next();
    }
    
    function goBack() {
        props.back();
    }

    function share2Facebook() {
        if (!isReady || !userOrder.current) return;
        shareToFacebook(userOrder.current);
    }

    function share2Line() {
        if (!isReady || !userOrder.current) return;
        shareToLine(userOrder.current);
    }

    function getId() {
        return new Promise((resolve, reject) => {
            const kol = getQueryVariable('kol');
            $.ajax({
                type: 'POST',
                url: `${API__DOMAIN}web/saveData`,
                data: {
                    title: '全聯小時達｜料理靈感 食材一鍵送達',
                    desc: getDescription(kol),
                },
                success(response) {
                    resolve(response.id);
                },
                error(XMLHttpRequest, textStatus, errorThrown) {
                  console.log(`Status: ${textStatus}, Error: ${errorThrown}`);
                  reject(new Error(errorThrown));
                },
            });
        });
    }

    function upload2Server(base64) {
        return new Promise((resolve, reject) => {
            getId().then((id) => {
                userOrder.current = id;
                $.ajax({
                    type: 'POST',
                    url: `${API__DOMAIN}web/saveImg`,
                    data: {
                        id: id,
                        image: base64,
                    },
                    dataType: 'json',
                    success(response) {
                        resolve(response);
                    },
                    error(XMLHttpRequest, textStatus, errorThrown) {
                      console.log(`Status: ${textStatus}, Error: ${errorThrown}`);
                      reject(new Error(errorThrown));
                    },
                  });
            })
        });
    }

    async function generateCard(tempsrc, imgsrc) {

        const image = await ImageLoader(imgsrc);
        const tempImage = await ImageLoader(tempsrc);
        
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.width = 1200;
        canvas.height = 630;

        context.drawImage(image, 0, 0, 1200, 630);
        context.drawImage(tempImage, 0, 0, 1200, 630);

        return canvas.toDataURL('image/jpg', 1.0);
    }

    function doInitProcess() {
        setLoading(true);
        const kol = getQueryVariable('kol');
        const tempImageSrc = getTemplate(kol);
        if (!tempImageSrc) return;
        generateCard(tempImageSrc, userMerge).then((base64) => {
            upload2Server(base64).then(() => {
                refDisplayImage.current.src = base64;
                setLoading(false);
                setIsReady(true);
            }).catch((error) => {
                setLoading(false);
                console.log('Upload2Server Error\nName:' + error.name + '\nMessage:' + error.message);
            });
        });
    }

    useEffect(() => {
        doInitProcess();
        return () => {};
    }, []);


    return (
        <div class="sharePage">
            <div class="sharePage__header">
                <div class="btn__back" onClick={goBack}>
                    <img src="https://d1xzlli46wohoc.cloudfront.net/assets/images/btn-retake.png" alt="" />
                </div>
            </div>
            <div class="sharePage__body">
                <div class="sharePage__title">
                    <img src="https://d1xzlli46wohoc.cloudfront.net/assets/images/share-title.png" alt="" />
                </div>
                <div class="sharePage__demo">
                    <div class="sharePage__picture">
                        <img ref={refDisplayImage} />
                    </div>
                    {
                        (loading) ? (<div class="sharePage__loader">
                                    <div class="loader-46"></div>
                                </div>) : ('')
                    }
                </div>
            </div>
            <div className={"sharePage__footer " + (isReady ? 'is__show' : 'is__hidden')}>
                <div class="btn__group">
                    <div class="btn__line" onClick={share2Line}>分享至LINE</div>
                    <div class="btn__facebook" onClick={share2Facebook}>分享至Facebook</div>
                </div>
            </div>
        </div>
    );
}