Question

我需要让这个脚本根据区域的透明度来打印div中图像透明度的结果（true或false）。

这是一个例子，我可以看到结果，如果它是透明的，但仅在鼠标移动时，根据指针逐像素。

这里我在图像上放置了1/10大小的正方形div，我想根据它们区域中是否有透明像素来改变颜色

https://jsfiddle.net/kdichev/ae9pjstm/1/

理想情况下，如果盒子下面有一个像素，它应该有一个红色背景颜色或打印错误。

(function () {
var img = new Image(),
    output = document.getElementById('transparent'),
    bImg = document.getElementById('img');
img.src = bImg.src;

function isTransparent(e) {
    var x = e.pageX - this.offsetLeft,
        y = e.pageY - this.offsetTop;

    var canvas = document.getElementById('imgcheck-canvas') || (function (_this) {
        var e = document.createElement('canvas');
        e.setAttribute('width', _this.width);
        e.setAttribute('height', _this.height);
        e.setAttribute('id', _this.id + '-canvas');
        e.setAttribute('style', 'display:none;');
        document.body.appendChild(e);
        var cx = e.getContext('2d');
        cx.drawImage(_this, 0, 0, _this.width, _this.height);
        return e;
    })(this);
    if (canvas.getContext === undefined) {
        return false;
    }
    var ctx = canvas.getContext('2d');

    output.innerHTML = ((ctx.getImageData(x, y, 1, 1).data[3] === 0) ? true : false);
}

function init() {
    console.log('init');
    bImg.addEventListener('mousemove', isTransparent, false);
}

img.addEventListener('load', init, true);


})();

用于在多个div中显示结果的函数

0 个答案: