Maska wczytuje się na img class ale ja chcę aby wczytywana była do div class a nie img. Proszę o pomoc w edycji kodu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>imageMagic Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function (d) {
var n = 0;
d.fn.imageMask = function (e, j) {
if (void 0 == e) return console.error("imageMask: undefined mask"), !1;
if (!this.is("img")) return console.error("imageMask: jQuery object MUST be an img element"), !1;
if (void 0 != j && !d.isFunction(j)) return console.error("imageMask: callback MUST be function"), !1;
var c = null;
e.src ? c = e : (c = new Image, c.src = e);
var k = this;
k.css("visibility", "hidden");
d(c).load(function () {
var e = null;
k.each(function () {
var k = d(this),
f = null,
a, l = c;
a = d(this);
var m;
m = a.attr("id") ? a.attr("id") : n++;
m = "imageMask_" + m + "_canvas";
var f = d("<canvas>").attr({
id: m,
"class": a.attr("class"),
style: a.attr("style"),
width: l.width,
height: l.height
}).css("visibility", "").insertAfter(a)[0],
g = f.getContext("2d");
null == e && (a = f, g.drawImage(c, 0, 0), l = g.getImageData(0, 0, a.width, a.height), g.clearRect(0, 0, a.width, a.height), e = l);
var b = new Image;
b.src = d(this).attr("src");
d(b).load(function () {
var a = 1,
a = b.width > b.height ? f.height / b.height : f.width / b.width;
g.drawImage(b, 0, 0, b.width, b.height, 0, 0, b.width * a, b.height * a);
for (var a = e, c = g.getImageData(0, 0, f.width, f.height), h = 0; h < c.data.length; h += 4) c.data[h + 3] = a.data[h + 3];
g.putImageData(c, 0, 0);
k.remove();
d.isFunction(j) && j(f)
})
})
});
return this
}
})(jQuery);
$( document ).ready( function() {
$( ".mySelector" ).imageMask( "mask.png", function( $canvas ) {
console.log( 'test', $canvas );
} );
} );
</script>
</head>
<body>
<img src="image.jpg" class="mySelector"/>
<div class="mySelector"><img src="image.jpg"/></div>
</body>
</html>
