как игнорировать незакрытые элементы div на скриншоте html2canvas - PullRequest
Новая
       15

как игнорировать незакрытые элементы div на скриншоте html2canvas

0 голосов
/ 18 апреля 2020

так что в основном я работаю над своим личным пиксельным арт-проектом Весь рисунок в пиксельной графике представляет собой ряд элементов типа div: 

<div id="art">

        <div class="row">
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>


        </div>
        <div class="row">
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixel" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>
            <div class="pixels" onmousedown="setPixelColour(this)"></div>

        </div>

По сути, после того, как пользователь завершил создание своего пиксельного рисунка, он получает возможность сохранить шедевр, и именно здесь я реализовал html2canvas. 

<script src="html2canvas.js"></script>
    <script>function doCapture(){
        html2canvas(document.getElementById("art")).then(function(canvas){

            console.log(canvas.toDataURL("image/jpeg", 0.9));
            alert("Go to Developer Console in dev tools, Copy and Paste the base64 value of image in the URL to see it in JPEG format")})}</script>
<button onmousedown="doCapture();">Save Masterpiece?</button>

Вот как это выглядит до сих пор:

Rendered White space in screenshot

Как видите, нетронутая часть белого пространства холст также попадает на снимок экрана, есть ли способ предотвратить появление нетронутых элементов div на снимке экрана в html2canvas?

Чтобы уточнить, после того, как пользователь завершит работу с пиксельной графикой, сохраненное изображение будет храниться в базе данных, и пользователь сможет разместить свое изображение, где бы вы ни щелкнули мышью. Вот почему я хочу прозрачности в изображениях.

...