Я использую 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 * присутствует, и она делает снимок экрана и сохраняет в папке. Все правильно. Но это не влияет на непрозрачность изображения.
На веб-странице предварительный просмотр изображения правильный:
введите здесь описание изображения
Но на скриншоте непрозрачность не принимает: введите описание изображения здесь