Android实现 制作隐藏图片效果 （幻影坦克）

在贴吧上经常有吧友发一些图片，点开之后就变成另一张图片，当时觉得很神奇，又不是gif，怎么会变呢，有一日逛贴吧，看到了这个帖子http://tieba.baidu.com/p/5306081495，里面介绍了这种图片的原理，和PS上的制作方法，不过我们身为程序员，这么复杂的事情怎么能手动来完成呢，于是就有了这篇文章。

 

帖子上面讲到

① 线性减淡（添加）：
Img输出 = Img上+ Img下

 

我们代码里面怎么做呢，直接贴代码吧：

/**
     * 图层特效 效果等于PhotoShop中图层特效的线性减淡(增加)
     *
     * @param src    作用特效的bitmap
     * @param target 目标bitmap
     * @return 作用特效后的bitmap
     */
    public static Bitmap 线性减淡(Bitmap src, Bitmap target) {
        final int width = src.getWidth(), height = src.getHeight();
        int[] srcPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(src, (x, y, a, r, g, b) -> {
            int dstR, dstG, dstB, dstPixelColor, resultA, resultR, resultG, resultB;
            dstPixelColor = target.getPixel(x, y);
            dstR = Color.red(dstPixelColor);
            dstG = Color.green(dstPixelColor);
            dstB = Color.blue(dstPixelColor);
            resultA = 255;
            resultR = r + dstR;
            resultG = g + dstG;
            resultB = b + dstB;
//          防止色值溢出           
            if (resultR > 255)
                resultR = 255;
            if (resultG > 255)
                resultG = 255;
            if (resultB > 255)
                resultB = 255;
            srcPixels[x + y * width] = Color.argb(resultA, resultR, resultG, resultB);
        });
        result.setPixels(srcPixels, 0, width, 0, 0, width, height);
        return result;
    }

这里贴上getBitmapPixelColor方法

private static void getBitmapPixelColor(Bitmap target, PixelColorHandler handler) {
        if (checkBitmapCanUse(target) && handler != null) {
            int a, r, g, b, pixelColor;
            for (int y = 0; y < target.getHeight(); y++) {
                for (int x = 0; x < target.getWidth(); x++) {
                    pixelColor = target.getPixel(x, y);
                    a = Color.alpha(pixelColor);
                    r = Color.red(pixelColor);
                    g = Color.green(pixelColor);
                    b = Color.blue(pixelColor);
                    handler.onHandle(x, y, a, r, g, b);
                }
            }
        }
    }

PixeColorHandler接口：

private interface PixelColorHandler {
        void onHandle(int x, int y, int a, int r, int g, int b);
    }

帖子上面的

② 划分：
Img输出 = Img下/ Img上；

 

这个我们代码实现的时候，直接跟楼主的 Img下/ Img上 是不行的，经过我反复测试对比，

用楼主的话应该是：  1 / (Img上 / Img下)

对应代码：

 /**
     * 图层特效 效果等于PhotoShop中图层特效的划分
     *
     * @param src    作用特效的bitmap
     * @param target 目标bitmap
     * @return 作用特效后的bitmap
     */
    public static Bitmap 划分(Bitmap src, Bitmap target) {
        final int width = src.getWidth(), height = src.getHeight();
        int[] srcPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(src, (x, y, a, r, g, b) -> {
            int dstR, dstG, dstB, dstPixelColor, resultA, resultR, resultG, resultB;
            dstPixelColor = target.getPixel(x, y);
            dstR = Color.red(dstPixelColor);
            dstG = Color.green(dstPixelColor);
            dstB = Color.blue(dstPixelColor);
            resultA = 255;
            resultR = (int) (255 / (((float) r / (float) dstR)));
            resultG = (int) (255 / (((float) g / (float) dstG)));
            resultB = (int) (255 / (((float) b / (float) dstB)));
            srcPixels[x + y * width] = Color.argb(resultA, resultR, resultG, resultB);
        });
        result.setPixels(srcPixels, 0, width, 0, 0, width, height);
        return result;
    }

③ 反相：
Img输出 = 1 – Img ；

 

这个比较容易 直接用255 - 原色值：

public static void 反相(Bitmap target) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> {
            int max = 255;
            targetPixels[x + y * width] = Color.argb(a, max - r, max - g, max - b);
        });
        target.setPixels(targetPixels, 0, width, 0, 0, width, height);
    }

 

我们来看看整个流程是怎么样的：

图层1、图层2去色；

图层1调亮后反相、图层2调暗；

图层1相对于图层2作 线性减淡(添加)特效；

取 作用特效后的图层（1、2） 的红色通道；

最后，将红色通道作为图层2的蒙板；

蒙板后的图层就是我们想要的 隐藏图片了，保存为png即可；

贴出上面所须的代码：

去色：

    /**
     * 将目标bitmap去色 （变成黑白图片）
     *
     * @param target 目标bitmap
     */
    public static void 去色(Bitmap target) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> {
            int gray = (r + g + b) / 3;
            targetPixels[x + y * width] = Color.argb(a, gray, gray, gray);
        });
        target.setPixels(targetPixels, 0, width, 0, 0, width, height);
    }

取红色通道：

    /**
     * 效果类似PhotoShop中的取图层红色通道中的选区
     * (因为我们等下的蒙板只是取目标bitmap的透明度, 而反相和调整色阶都只是更改rgb色值,
     * 并没有影响到透明度, 所以我们为了执行效率, 直接把red色值作为透明度后返回,
     * 当然, 如需和PhotoShop上的 红色通道 的选区效果一样, 可以把下面的3行注释取消, 其实不会影响到最终生成图片的效果的)
     *
     * @param target 目标bitmap
     * @return 目标bitmap的红色通道
     */
    public static Bitmap 红色通道(Bitmap target) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(target.getWidth(), target.getHeight(), Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> targetPixels[x + y * width] = Color.argb(r, r, g, b));
        result.setPixels(targetPixels, 0, width, 0, 0, width, height);
//        反相(result);
//        for (int i = 0; i < 5; i++)
//            调暗色阶(result);
        return result;
    }

蒙板效果, 其实也就是将图片的透明度换成蒙板的透明度:

    /**
     * 将bitmap的透明度换成目标bitmap的透明度
     *
     * @param src    作用蒙板的bitmap
     * @param target 目标bitmap
     * @return 添加蒙板后的bitmap
     */
    public static Bitmap 蒙版(Bitmap src, Bitmap target) {
        final int width = src.getWidth(), height = src.getHeight();
        int[] srcPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(src, (x, y, a, r, g, b) -> {
            int dstA, dstPixelColor;
            dstPixelColor = target.getPixel(x, y);
            dstA = Color.alpha(dstPixelColor);
            srcPixels[x + y * width] = Color.argb(dstA, r, g, b);
        });
        result.setPixels(srcPixels, 0, width, 0, 0, width, height);
        return result;
    }

我们将以上的一堆东西封装起来：

@SuppressWarnings({"unused", "WeakerAccess"})
/**
 * 不提倡用中文写代码，本工具使用中文只是为了更容易理解
 */
public class BitmapPixelUtil {
    /**
     * 亮, 暗色阶映射表
     */
    private static int[] mLightColorTable, mDarkColorTable;

    /**
     * 生成隐藏图片
     *
     * @param outerBitmap 要在外面才显示的bitmap
     * @param interBitmap 要在里面才显示的bitmap
     * @return 隐藏图片
     */
    public static Bitmap makeHideImage(Bitmap outerBitmap, Bitmap interBitmap) {
        return makeHideImage(outerBitmap, interBitmap, null);
    }

    /**
     * 生成隐藏图片
     *
     * @param outerBitmap 要在外面才显示的bitmap
     * @param interBitmap 要在里面才显示的bitmap
     * @param listener    进度监听
     * @return 隐藏图片
     */
    public static Bitmap makeHideImage(Bitmap outerBitmap, Bitmap interBitmap, OnProgressUpdateListener listener) {
        if (checkBitmapCanUse(outerBitmap) && checkBitmapCanUse(interBitmap)) {
            updateListener(listener, 0.1F);

            去色(outerBitmap);
            updateListener(listener, 0.2F);

            调亮色阶(outerBitmap);
            updateListener(listener, 0.3F);

            反相(outerBitmap);
            updateListener(listener, 0.4F);

            去色(interBitmap);
            updateListener(listener, 0.5F);

            调暗色阶(interBitmap);
            updateListener(listener, 0.6F);

            outerBitmap = 线性减淡(outerBitmap, interBitmap);
            updateListener(listener, 0.7F);

            Bitmap temp = 红色通道(outerBitmap);
            updateListener(listener, 0.8F);

            outerBitmap = 划分(outerBitmap, interBitmap);
            updateListener(listener, 0.9F);

            Bitmap result = 蒙版(outerBitmap, temp);
            updateListener(listener, 1);
            return result;
        }
        return null;
    }

    private static void updateListener(OnProgressUpdateListener listener, float progress) {
        if (listener != null)
            listener.onUpdate(progress);
    }

    /**
     * 将目标bitmap去色 （变成黑白图片）
     *
     * @param target 目标bitmap
     */
    public static void 去色(Bitmap target) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> {
            int gray = (r + g + b) / 3;
            targetPixels[x + y * width] = Color.argb(a, gray, gray, gray);
        });
        target.setPixels(targetPixels, 0, width, 0, 0, width, height);
    }

    public static void 调亮色阶(Bitmap target) {
        changeColorLevel(target, true);
    }

    public static void 调暗色阶(Bitmap target) {
        changeColorLevel(target, false);
    }

    public static void 反相(Bitmap target) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> {
            int max = 255;
            targetPixels[x + y * width] = Color.argb(a, max - r, max - g, max - b);
        });
        target.setPixels(targetPixels, 0, width, 0, 0, width, height);
    }

    /**
     * 图层特效 效果等于PhotoShop中图层特效的线性减淡(增加)
     *
     * @param src    作用特效的bitmap
     * @param target 目标bitmap
     * @return 作用特效后的bitmap
     */
    public static Bitmap 线性减淡(Bitmap src, Bitmap target) {
        final int width = src.getWidth(), height = src.getHeight();
        int[] srcPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(src, (x, y, a, r, g, b) -> {
            int dstR, dstG, dstB, dstPixelColor, resultA, resultR, resultG, resultB;
            dstPixelColor = target.getPixel(x, y);
            dstR = Color.red(dstPixelColor);
            dstG = Color.green(dstPixelColor);
            dstB = Color.blue(dstPixelColor);
            resultA = 255;
            resultR = r + dstR;
            resultG = g + dstG;
            resultB = b + dstB;
            if (resultR > 255)
                resultR = 255;
            if (resultG > 255)
                resultG = 255;
            if (resultB > 255)
                resultB = 255;
//                result.setPixel(x, y, Color.argb(resultA, resultR, resultG, resultB));
            srcPixels[x + y * width] = Color.argb(resultA, resultR, resultG, resultB);
        });
        result.setPixels(srcPixels, 0, width, 0, 0, width, height);
        return result;
    }

    /**
     * 效果类似PhotoShop中的取图层红色通道中的选区
     * (因为我们等下的蒙板只是取目标bitmap的透明度, 而反相和调整色阶都只是更改rgb色值,
     * 并没有影响到透明度, 所以我们为了执行效率, 直接把red色值作为透明度后返回,
     * 当然, 如需和PhotoShop上的 红色通道 的选区效果一样, 可以把下面的3行注释取消, 其实不会影响到最终生成图片的效果的)
     *
     * @param target 目标bitmap
     * @return 目标bitmap的红色通道
     */
    public static Bitmap 红色通道(Bitmap target) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(target.getWidth(), target.getHeight(), Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> targetPixels[x + y * width] = Color.argb(r, r, g, b));
        result.setPixels(targetPixels, 0, width, 0, 0, width, height);
//        反相(result);
//        for (int i = 0; i < 5; i++)
//            调暗色阶(result);
        return result;
    }

    /**
     * 图层特效 效果等于PhotoShop中图层特效的划分
     *
     * @param src    作用特效的bitmap
     * @param target 目标bitmap
     * @return 作用特效后的bitmap
     */
    public static Bitmap 划分(Bitmap src, Bitmap target) {
        final int width = src.getWidth(), height = src.getHeight();
        int[] srcPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(src, (x, y, a, r, g, b) -> {
            int dstR, dstG, dstB, dstPixelColor, resultA, resultR, resultG, resultB;
            dstPixelColor = target.getPixel(x, y);
            dstR = Color.red(dstPixelColor);
            dstG = Color.green(dstPixelColor);
            dstB = Color.blue(dstPixelColor);
            resultA = 255;
            resultR = (int) (255 / (((float) r / (float) dstR)));
            resultG = (int) (255 / (((float) g / (float) dstG)));
            resultB = (int) (255 / (((float) b / (float) dstB)));
//                result.setPixel(x, y, Color.argb(resultA, resultR, resultG, resultB));
            srcPixels[x + y * width] = Color.argb(resultA, resultR, resultG, resultB);
        });
        result.setPixels(srcPixels, 0, width, 0, 0, width, height);
        return result;
    }

    /**
     * 将bitmap的透明度换成目标bitmap的透明度
     *
     * @param src    作用蒙板的bitmap
     * @param target 目标bitmap
     * @return 添加蒙板后的bitmap
     */
    public static Bitmap 蒙版(Bitmap src, Bitmap target) {
        final int width = src.getWidth(), height = src.getHeight();
        int[] srcPixels = new int[width * height];
        final Bitmap result = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
        getBitmapPixelColor(src, (x, y, a, r, g, b) -> {
            int dstA, dstPixelColor;
            dstPixelColor = target.getPixel(x, y);
            dstA = Color.alpha(dstPixelColor);
            srcPixels[x + y * width] = Color.argb(dstA, r, g, b);
        });
        result.setPixels(srcPixels, 0, width, 0, 0, width, height);
        return result;
    }

    public static Bitmap scaleBitmap(Bitmap target, int w, int h) {
        if (target == null || target.isRecycled()) return target;
        int width = target.getWidth(), height = target.getHeight();
        Matrix matrix = new Matrix();
        matrix.postScale(((float) w / width), ((float) h / height));
        return Bitmap.createBitmap(target, 0, 0, width, height, matrix, true);
    }

    private static void changeColorLevel(Bitmap target, boolean isToLight) {
        final int width = target.getWidth(), height = target.getHeight();
        int[] targetPixels = new int[width * height];
        int[] table = isToLight ? getLightColorTable() : getDarkColorTable();
        getBitmapPixelColor(target, (x, y, a, r, g, b) -> targetPixels[x + y * width] = Color.argb(a, table[r], table[g], table[b]));
        target.setPixels(targetPixels, 0, width, 0, 0, width, height);
    }

    private static boolean checkBitmapCanUse(Bitmap target) {
        return target != null && !target.isRecycled() && target.isMutable();
    }

    private static void getBitmapPixelColor(Bitmap target, PixelColorHandler handler) {
        if (checkBitmapCanUse(target) && handler != null) {
            int a, r, g, b, pixelColor;
            for (int y = 0; y < target.getHeight(); y++) {
                for (int x = 0; x < target.getWidth(); x++) {
                    pixelColor = target.getPixel(x, y);
                    a = Color.alpha(pixelColor);
                    r = Color.red(pixelColor);
                    g = Color.green(pixelColor);
                    b = Color.blue(pixelColor);
                    handler.onHandle(x, y, a, r, g, b);
                }
            }
        }
    }

    private static int[] getLightColorTable() {
        if (mLightColorTable == null)
            initLightColorTable();
        return mLightColorTable;
    }

    private static int[] getDarkColorTable() {
        if (mDarkColorTable == null)
            initDarkColorTable();
        return mDarkColorTable;
    }

    private static void initLightColorTable() {
//        输出色阶 120 ～ 255 的映射表        
//        由 getColorLevelTable(120, 255); 得来
        mLightColorTable = new int[]{
                120, 120, 121, 121, 122, 122, 123, 123, 124, 124, 125, 125, 126, 126, 127, 127, 128, 128,
                129, 129, 130, 130, 131, 132, 132, 133, 133, 134, 134, 135, 135, 136, 136, 137, 137, 138,
                138, 139, 139, 140, 140, 141, 142, 142, 143, 143, 144, 144, 145, 145, 146, 146, 147, 147,
                148, 148, 149, 149, 150, 150, 151, 152, 152, 153, 153, 154, 154, 155, 155, 156, 156, 157,
                157, 158, 158, 159, 159, 160, 161, 161, 162, 162, 163, 163, 164, 164, 165, 165, 166, 166,
                167, 167, 168, 168, 169, 170, 170, 171, 171, 172, 172, 173, 173, 174, 174, 175, 175, 176,
                176, 177, 177, 178, 179, 179, 180, 180, 181, 181, 182, 182, 183, 183, 184, 184, 185, 185,
                186, 186, 187, 188, 188, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 194, 194, 195,
                195, 196, 197, 197, 198, 198, 199, 199, 200, 200, 201, 201, 202, 202, 203, 203, 204, 205,
                205, 206, 206, 207, 207, 208, 208, 209, 209, 210, 210, 211, 211, 212, 212, 213, 214, 214,
                215, 215, 216, 216, 217, 217, 218, 218, 219, 219, 220, 220, 221, 222, 222, 223, 223, 224,
                224, 225, 225, 226, 226, 227, 227, 228, 228, 229, 229, 230, 231, 231, 232, 232, 233, 233,
                234, 234, 235, 235, 236, 236, 237, 237, 238, 239, 239, 240, 240, 241, 241, 242, 242, 243,
                243, 244, 244, 245, 245, 246, 247, 247, 248, 248, 249, 249, 250, 250, 251, 251, 252, 252,
                253, 253, 254, 255,
        };
    }

    private static void initDarkColorTable() {
//        输出色阶 0 ～ 135 的映射表
//        由 getColorLevelTable(0, 135); 得来
        mDarkColorTable = new int[]{0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10,
                10, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21,
                22, 22, 23, 23, 24, 24, 25, 25, 26, 26, 27, 27, 28, 28, 29, 29, 30, 30, 31, 32, 32,
                33, 33, 34, 34, 35, 35, 36, 36, 37, 37, 38, 38, 39, 39, 40, 41, 41, 42, 42, 43, 43,
                44, 44, 45, 45, 46, 46, 47, 47, 48, 48, 49, 50, 50, 51, 51, 52, 52, 53, 53, 54, 54,
                55, 55, 56, 56, 57, 57, 58, 59, 59, 60, 60, 61, 61, 62, 62, 63, 63, 64, 64, 65, 65,
                66, 66, 67, 68, 68, 69, 69, 70, 70, 71, 71, 72, 72, 73, 73, 74, 74, 75, 75, 76, 77,
                77, 78, 78, 79, 79, 80, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88,
                88, 89, 89, 90, 90, 91, 91, 92, 92, 93, 94, 94, 95, 95, 96, 96, 97, 97, 98, 98, 99,
                99, 100, 100, 101, 102, 102, 103, 103, 104, 104, 105, 105, 106, 106, 107, 107, 108,
                108, 109, 109, 110, 111, 111, 112, 112, 113, 113, 114, 114, 115, 115, 116, 116, 117,
                117, 118, 119, 119, 120, 120, 121, 121, 122, 122, 123, 123, 124, 124, 125, 125, 126,
                127, 127, 128, 128, 129, 129, 130, 130, 131, 131, 132, 132, 133, 133, 134, 135,
        };
    }

    /**
     * @param outputMin 输出色阶
     * @param outputMax 输出色阶
     * @return 色值映射表
     */
    private static int[] getColorLevelTable(int outputMin, int outputMax) {
        int[] data = new int[256];
        int inputMin = 0, inputMiddle = 128, inputMax = 255;
        if (outputMin < 0) outputMin = 0;
        if (outputMin > 255) outputMin = 255;
        if (outputMax < 0) outputMax = 0;
        if (outputMax > 255) outputMax = 255;
        for (int index = 0; index <= 255; index++) {
            double temp = index - inputMin;
            if (temp < 0) {
                temp = outputMin;
            } else if (temp + inputMin > inputMax) {
                temp = outputMax;
            } else {
                double gamma = Math.log(0.5) / Math.log((double) (inputMiddle - inputMin) / (inputMax - inputMin));
                temp = outputMin + (outputMax - outputMin) * Math.pow((temp / (inputMax - inputMin)), gamma);
            }
            if (temp > 255)
                temp = 255;
            else if (temp < 0)
                temp = 0;
            data[index] = (int) temp;
        }
        return data;
    }

    private interface PixelColorHandler {
        void onHandle(int x, int y, int a, int r, int g, int b);
    }

    public interface OnProgressUpdateListener {
        void onUpdate(float progress);
    }
}

其实这个工具类还有优化的地方，就是把target.getPixel这个获取单个像素换成getPixels方法一次换取全部像素存在数组里面，再来遍历：

  int width = target.getWidth(), height = target.getHeight();  
            int[] targetPixels = new int[width * height];  
            //获取bitmap所有像素点  
            target.getPixels(targetPixels, 0, width, 0, 0, width, height);  
            int pixelColor;  
            int a, r, g, b;  
  
            for (int y = 0; y < height; y++) {  
                for (int x = 0; x < width; x++) {   
                    pixelColor = targetPixels[index];                   
                    .........
                }  
            }  

 

好， 现在我们来看看效果：

哈哈，完成了。

 

获取色阶映射表那个方法 参考自http://www.pythontip.com/acm/post/203

 

完整Demo见 https://github.com/wuyr/HideImageMaker

有错误的地方请指出，谢谢大家！