как взять свойство opacity css в html2canvas - PullRequest
0 голосов
/ 11 июля 2020

Я использую html2canvas для создания снимка экрана с изображением на веб-странице. Но непрозрачность не отображается на снимке экрана.

html это:

 <div class="relativeimg2 bgcolorimg2" id="mydiv_screenshot">
    <img src="<?php echo BASE_URL; ?>assets/images/background_images/<?php echo $view_result['background_image']; ?>" style="width:100% !important; height: 80px !important;opacity: 0.3 !important;" />
 </div>

html2canvas js это:

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script>
        // A function to convert the required div to image
        
            $(document).ready(function() {
            window.scrollTo(0, 0);

            var image_name = '<?php echo $imagename_new; ?>'+'_'+'<?php echo $_SESSION['user_id']; ?>';
            var edittemplate_update_id = '<?php echo $view_result['edittemplate_update_id']; ?>';
            console.log(image_name);

            html2canvas(document.getElementById("mydiv_screenshot")).then(function (canvas) {
                // Create an AJAX object
                var ajax = new XMLHttpRequest();

                var image_data = canvas.toDataURL("image/jpeg", 0.9);

                $.ajax({
                url: '<?php echo BASE_URL ?>templates/preview_code/save-capture.php',
                type: 'POST',
                data: {"image_for_save": image_data, "image_name_for_save": image_name, "edittemplate_update_id": edittemplate_update_id},
                success: function(response){
                    if(response != 0){
                        //console.log(response);
                    }else{
                        //console.log(response);
                    }
                }, 
                async: true
                });
            });
        });
    </script>

В приведенном выше коде я несколько * Переменная 1022 * присутствует, и она делает снимок экрана и сохраняет в папке. Все правильно. Но это не влияет на непрозрачность изображения.

На веб-странице предварительный просмотр изображения правильный:

введите здесь описание изображения

Но на скриншоте непрозрачность не принимает: введите описание изображения здесь

...