拼凑小功能，咔嚓H5成分享图片

ずっと何かを 、誰かをさがしている
我一直都在寻找着什么，寻找着某个人
そういう気持ちに捕り凭かれたのは、たぶん、あの日から
可能从那一天开始，我就陷入到了这样的情绪中
————————————————————《君の名は》

效果演示

---

代码分释

DOM结构

<div class="container">
    <div class="title">
        SCREEN SHOT DEMO
    </div>

    <div class="wrapper">
        <div class="sentence1">
            ずっと何かを 、 誰かをさがしている
        </div>
        <div class="sentence2">
            そういう気持ちに捕り凭かれたのは、たぶん、あの日から
        </div>
        <img src="./assets/bg.png" alt="cat" width="" />
    </div>

    <div class="btn">
        <button onclick="screenClip()">生成图片</button>
    </div>
</div>
<div class="shot"><img /></div>

利用html2canvas将DOM转成base64图片

html2canvas(document.querySelector('.wrapper'), { scale: 1, logging: false, useCORS: true }).
	then(function (canvas) {
	    let dataUrl = canvas.toDataURL();
	    let img = document.querySelector('.shot img')
	    img.src = dataUrl
	})

利用animate.css模拟截屏动画

自定义CSS animation动画 animate__kaCha

.shot {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    color: #fff;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    font-size: 24px;
}

.shot img {
    width: 90%;
    box-shadow: 0px 5px 10px #eee;
    display: none;
    margin: 0 auto;
    border: 10px solid #fff;
    box-sizing: border-box;
}

@-webkit-keyframes kaCha {
    0% {
        background: initial;
    }
    25% {
        background: rgba(255, 255, 255, 1);
    }
    75% {
        background: rgba(255, 255, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0.4);
    }
}

@keyframes kaCha {
    0% {
        background: initial;
    }
    25% {
        background: rgba(255, 255, 255, 1);
    }
    75% {
        background: rgba(255, 255, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0.4);
    }
}

.animate__animated.animate__kaCha {
    -webkit-animation-name: kaCha;
    animation-name: kaCha;
    -webkit-animation-duration: calc(1s * 0.25);
    animation-duration: calc(1s * 0.25);
}

动画执行方法

const screenKaCha = (selector) => {
    let el = document.querySelector(selector)
    el.style.display = 'flex'
    animateCSS(selector, 'kaCha')
        .then(() => {
            el.style.background = 'rgba(255,255,255,0.4)'
            animateCSS(`${selector} img`, 'fadeIn')
        })
        .then(() => {
            el.querySelector(`img`).style.display = 'block'
            el.addEventListener('click', closeKaCha.bind(el), { once: true })
        })
}

---

整体代码

Github - h5-demos / ScreenShot

---

码字不易，如果喜欢，不用三连，点个赞👍便是最大的鼓励
欢迎关注微信公众号 "书咖里的曼基康"