iOS——隱形水印的實現和『顏色加深』算法

米米狗· 2019-05-23
本文來自 小魚周凌宇 ,作者 米米狗

很多 APP 都在敏感頁面有水印,主要為了應對輿情時可以追蹤圖片來源,一般在水印上都會有員工或用戶 ID 和昵稱。

image.png

水印的用途總結有亮點:

  1. 追蹤來源

  2. 威懾作用

威懾作用是指當用戶看到水印時,會自覺避免違法傳輿行為。

但是,當不需要威懾作用時,例如,為了保持應用或者圖片的美觀,顯形的水印似乎不是那么必要,這時候可以考慮使用隱形水印。

最近在同事在知乎上看到一種水印。

如下圖,表面似乎沒有什么水印

image.png

但通過 PS 的混色模式處理后,隱形水印就顯示出來了

image.png具體處理方式是

  1. 在原圖上圖層添加全黑圖層

  2. 全黑圖層選擇『顏色加深』

到此為止,我對 PS 的算法產生了好奇,混色模式是常用工具,但是以前沒有注意過公式。

顏色加深混色模式


PS 的混色模式,其實是底圖和混色層的每個像素點,經過一系列計算后得到的結果層。

翻閱了一系列資料后我發現,現有的公式都是不正確的,有些熱門文章里也不對。而 PS 官方文檔只對幾種混色模式進行了介紹,而并沒有給出公式。

查看每個通道中的顏色信息,并通過增加二者之間的對比度使基色變暗以反映出混合色。與白色混合后不產生變化。

helpx.adobe.com/cn/photosho…

比較多的是這套公式(是有問題的):

結果色 = 基色-[(255-基色)×(255-混合色)]/混合色

公式中(255-基色)和(255-混合色)分別是基色和混合色的反相。

  1. 若混合色為0(黑色),(基色×混合色)為0,得到的數值為一相個負值,歸為0,所以不論基色為何值均為0。

  2. 當混合色的色階值是255(白色)時,混合色同基色。

基本查到的算法公式都有一個致命問題,公式都標明了,任何顏色和黑色混色結果為黑色,這顯然與上文中 PS 處理結果不符合。如果按照這套理論,整個圖片都應該黑了。

最后我試出來一個接近的方案是:

  1. 結果色 = 基色 —(基色反相×混合色反相)/ 混合色

  2. 如混色層為黑色,則認為 RGB 為 (255, 255, 255),即非常深的灰色

這個公式可以基本實現 PS 中的顏色加深效果??梢越成瀋?,越淺越深。

隱形水印的實現


添加水印

首先介紹 iOS 中的基本圖像處理方式:

  1. 獲取圖片的所有像素點

  2. 改變指針指向的像素信息

+ (UIImage *)addWatermark:(UIImage *)image
                     text:(NSString *)text {
    UIFont *font = [UIFont systemFontOfSize:32];
    NSDictionary *attributes = @{NSFontAttributeName: font,
                                 NSForegroundColorAttributeName: [UIColor colorWithRed:0
                                                                                 green:0
                                                                                  blue:0
                                                                                 alpha:0.01]};
    UIImage *newImage = [image copy];
    CGFloat x = 0.0;
    CGFloat y = 0.0;
    CGFloat idx0 = 0;
    CGFloat idx1 = 0;
    CGSize textSize = [text sizeWithAttributes:attributes];
    while (y < image.size.height) {
        y = (textSize.height * 2) * idx1;
        while (x < image.size.width) {
            @autoreleasepool {
                x = (textSize.width * 2) * idx0;
                newImage = [self addWatermark:newImage
                                         text:text
                                    textPoint:CGPointMake(x, y)
                             attributedString:attributes];
            }
            idx0 ++;
        }
        x = 0;
        idx0 = 0;
        idx1 ++;
    }
    return newImage;
}
+ (UIImage *)addWatermark:(UIImage *)image
                     text:(NSString *)text
                textPoint:(CGPoint)point
         attributedString:(NSDictionary *)attributes {
    UIGraphicsBeginImageContext(image.size);
    [image drawInRect:CGRectMake(0,0, image.size.width, image.size.height)];
    CGSize textSize = [text sizeWithAttributes:attributes];
    [text drawInRect:CGRectMake(point.x, point.y, textSize.width, textSize.height) withAttributes:attributes];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

顯示水印

通過上文提到的公式,可以讓水印顯示。

+ (UIImage *)visibleWatermark:(UIImage *)image {
    // 1. Get the raw pixels of the image
    // 定義 32位整形指針 *inputPixels
    UInt32 * inputPixels;
    
    //轉換圖片為CGImageRef,獲取參數:長寬高,每個像素的字節數(4),每個R的比特數
    CGImageRef inputCGImage = [image CGImage];
    NSUInteger inputWidth = CGImageGetWidth(inputCGImage);
    NSUInteger inputHeight = CGImageGetHeight(inputCGImage);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    NSUInteger bytesPerPixel = 4;
    NSUInteger bitsPerComponent = 8;
    
    // 每行字節數
    NSUInteger inputBytesPerRow = bytesPerPixel * inputWidth;
    
    // 開辟內存區域,指向首像素地址
    inputPixels = (UInt32 *)calloc(inputHeight * inputWidth, sizeof(UInt32));
    
    // 根據指針,前面的參數,創建像素層
    CGContextRef context = CGBitmapContextCreate(inputPixels, inputWidth, inputHeight,
                                                 bitsPerComponent, inputBytesPerRow, colorSpace,
                                                 kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    
    //根據目前像素在界面繪制圖像
    CGContextDrawImage(context, CGRectMake(0, 0, inputWidth, inputHeight), inputCGImage);
    // 像素處理
    for (int j = 0; j < inputHeight; j++) {
        for (int i = 0; i < inputWidth; i++) {
            @autoreleasepool {
                UInt32 *currentPixel = inputPixels + (j * inputWidth) + i;
                UInt32 color = *currentPixel;
                UInt32 thisR,thisG,thisB,thisA;
                // 這里直接移位獲得RBGA的值,以及輸出寫的非常好!
                thisR = R(color);
                thisG = G(color);
                thisB = B(color);
                thisA = A(color);
                
                UInt32 newR,newG,newB;
                newR = [self mixedCalculation:thisR];
                newG = [self mixedCalculation:thisG];
                newB = [self mixedCalculation:thisB];
                
                *currentPixel = RGBAMake(newR,
                                         newG,
                                         newB,
                                         thisA);
            }
        }
    }
    //創建新圖
    // 4. Create a new UIImage
    CGImageRef newCGImage = CGBitmapContextCreateImage(context);
    UIImage * processedImage = [UIImage imageWithCGImage:newCGImage];
    //釋放
    // 5. Cleanup!
    CGColorSpaceRelease(colorSpace);
    CGContextRelease(context);
    free(inputPixels);
    
    return processedImage;
}

+ (int)mixedCalculation:(int)originValue {
    // 結果色 = 基色 —(基色反相×混合色反相)/ 混合色
    int mixValue = 1;
    int resultValue = 0;
    if (mixValue == 0) {
        resultValue = 0;
    } else {
        resultValue = originValue - (255 - originValue) * (255 - mixValue) / mixValue;
    }
    if (resultValue < 0) {
        resultValue = 0;
    }
    return resultValue;
}

代碼和開源庫


為了方便使用,寫了一個開源庫,封裝的很實用,附帶 DEMO

ZLYInvisibleWatermark

作者:小魚周凌宇

鏈接:https://juejin.im/post/5cd17612f265da037a3d0183

北京pk10双面盘提现 重庆时时蚂蚁博士 玩时时彩怎么稳赚软件 腾讯分分彩稳赚玩法有几种 万能看牌器 mg电子游戏手机客户端 时时彩计划 必中pk10手机计划软件 一分快3大小 124不倒翁投注法例子 极速时时走势 北京赛pk10免费计划软件 牛牛怎么算 重庆时时彩正不正规 内蒙古时时平台 奇妙趋势判断三期内中