使用JS切片和混淆图像

Question

我有一个图像,我想把它切成'n'个水平碎片,然后想混淆它们.有没有可能的方法使用vanilla JavaScript/CSS而不使用任何图像处理库？我有整个图像的图像网址.

Answer 1

我能想到的方式是使用与css sprites相同的方式

假设您有图像,并为'n'件创建不同的CSS.

.pieces1 {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

.pieces2 {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

.pieces3 {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

然后你可以使用

<div class="container"><div class="pieces2"></div><div class="piece3"></div></div>

混淆他们