如何在没有源的情况下获取透明元素的图像？

Question

I see an element in a HTML5 game which can be rotated, hidden and moved. But it has a background... And the element is transparent.

For example, this moves the element:

$("#elementr2").animate({left: '650px'});

I can capture it perfectly because it is transparent.

What could I do?

Answer 1

Do you mean that you want to download the image asset? You could check the network tab and find the resource there. It will probably be on its own or in a sprite sheet. Just filter the list by .png then right click on the asset, open in new window, right click, save as.

Answer 2

Okay... If you can do this:

$("#elementr2").animate({left: '650px'});

Then, you can set a perfect white background covering the whole screen and bring only the wanted element above it.

// This will set a white background.
var myBackground = $("<div>").attr("style","width:100%;"+
                                   "height:100%;"+
                                   "top:0;"+
                                   "right:0;"+
                                   "bottom:0;"+
                                   "left:0;"+
                                   "background-color:#FFF;"+
                                   "position:fixed;"+
                                   "z-index:999999;"
                                  );

// This will bring the element you want above the background.
$("body").append(myBackground);
$("#elementr2").css({"position":"fixed",
                     "z-index":"1000000",
                    });