Форум

DENERIK · #1 (**permalink**) 23.11.2015, 19:11

Возможно ли определить с помощью Javascript - Есть ли хоть какая-нибудь прозрачность в изображении ?

Если возможно.
Приведите пример применения пожалуйста. Чтобы div блок, не появлялся, если изображение не имеет прозрачность.

рони · #2 (**permalink**) 23.11.2015, 19:45

DENERIK,
как вариант проанализировать через canvas

Mess4me · #3 (**permalink**) 23.11.2015, 19:47

DENERIK,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            opacity: 0.3;
        }
    </style>
</head>
<body>

<img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img" >

<script>

var img = document.getElementById('img');
    alert(window.getComputedStyle(img).opacity);




</script>

</body>
</html>

рони · #4 (**permalink**) 23.11.2015, 19:57

Mess4me,

Mess4me · #5 (**permalink**) 23.11.2015, 19:58

рони,
не дочитал условие нормально

DENERIK · #6 (**permalink**) 23.11.2015, 20:05

Примени пожалуйста к div блоку. Чтобы он не появлялся, если изображение не имеет прозрачность.

<div class="a1"></div>

</style>
.a1 {
 width: 100px;
 height: 100px;
 background: black;
}
</style>

Mess4me · #7 (**permalink**) 23.11.2015, 20:07

DENERIK,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var imgs = document.getElementsByTagName('img');
            for(var i=0;i<imgs.length; i++){
                if(window.getComputedStyle(imgs[i]).opacity < 0.6){
                    imgs[i].style.display = 'none';
                }
            }
        });


    </script>
    <style>
        div {
            width: 600px;

        }

        img {
            opacity: 0.3;
            width: 100%;
        }
        #img1 {
            opacity: 0.6;
            width: 100%;
        }
        #img2 {
            opacity: 0.3;
            width: 100%;
        }

        #img3 {
            opacity: 0.5;
            width: 100%;
        }


        #img4 {
            opacity: 0.8;
            width: 100%;
        }
    </style>
</head>
<body>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img1" > </div>

<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img2" ></div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img3" ></div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img4" ></div>



</body>
</html>

Mess4me · #8 (**permalink**) 23.11.2015, 20:22

DENERIK,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var imgs = document.getElementsByTagName('img');
            for(var i=0;i<imgs.length; i++){
                if(window.getComputedStyle(imgs[i]).opacity < 1){
                    var nImg = document.createElement('img');
                    imgs[i].parentNode.replaceChild(nImg,imgs[i]);
                    imgs[i].parentNode.classList.add('a1');
                }
            }
        });

    </script>
    <style>
        div {
            width: 600px;

        }

        img {

            width: 100%;
        }
        #img1 {
            opacity: 0.6;
            width: 100%;
        }
        #img2 {
            opacity: 0.3;
            width: 100%;
        }

        #img3 {
            opacity: 0.5;
            width: 100%;
        }


        #img4 {
            width: 100%;
        }

        .a1 {
            width: 100px;
            height: 100px;
            background: black;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img1" > </div>

<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img2" ></div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img3" ></div>
<div><img src="http://img.vz.ru/upimg/p_7/p_754207.jpg" id="img4" ></div>



</body>
</html>

Malleys · #9 (**permalink**) 23.11.2015, 20:54

<div id="my_image_info"></div>
<img id="my_image" src="data:image/jpeg;base64,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">
<div id="my_image_info2"></div>
<img id="my_image2" src="data:image/png;base64,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">

<script>
  
  HTMLImageElement.prototype.hasTransparentPixel = function() {
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.drawImage(this, 0, 0);
  for(var i = 0; i < this.width; i++) {
    for(var j = 0; j < this.height; j++) {
      if(ctx.getImageData(i,j, 1, 1).data[3] < 255)
        return true;
    }
  }
  
  return false;
};
                                                   
var $ = document.getElementById.bind(document);
             
$('my_image_info').innerHTML =
  $('my_image').hasTransparentPixel() ? 'Есть прозрачневый пиксел' : 'Нету прозрачневого пикселя';
                                                   
$('my_image_info2').innerHTML =
  $('my_image2').hasTransparentPixel() ? 'Есть прозрачневый пиксел' : 'Нету прозрачневого пикселя';
  
</script>

laimas · #10 (**permalink**) 23.11.2015, 21:04

Два цикла не нужны, да и накладно это будет ради проверки альфа-канала.

Форум

Справочник

Discord чат

Курсы javascript