1. 程式人生 > >製做自己的馬賽克微信頭像

製做自己的馬賽克微信頭像

原文連結: http://xunyanan.com/blog/2013/11/26/mosaic-photo-and-share-moment/
 written by 尋亞楠  posted at http://xunyanan.com

想法

2013年接近尾聲了,有的媒體會用馬賽克的方式,把一年中的大事件彙集到一張圖片上。印象中天才少年Matrix67曾試用Mathematica製作過自己馬賽克頭像,於是便有了用微信朋友圈裡的圖片來製作一個自己的微信頭像。
馬賽克頭像馬賽克頭像
覺得不像我,可以離開座位,退後一點,離顯示器遠點看這張圖片。

動手

籌集素材

製作馬賽克頭像的第一步是什麼?要有足夠的馬賽克(心中無碼可跳過),腦子的想法便是微信朋友的頭像,有足夠的好友數量,便有很多素材,這些素材,還是有統一尺寸的。要獲得這些素材,有幾個方法。

從手機中獲得素材

從手機將微信App匯出,從中找到頭像資料夾。這是第一想法,沒試成,用的iPhone手機,升了iOS7.0,越不了獄,看不到微信的資料夾。android的童鞋可以試下,但有可能騰訊沒把素材按JPEG放到檔案,可能放到SQLite裡,這樣的話,這個方法就用不了了。

從微信網站下載素材

微信新推出了網頁版,可以做的事情就多了一些。開啟微信網頁版後),用手機掃描二維碼登陸後,可以看到微信網頁版的聊天介面,看到朋友們的資訊。在這裡我走個小彎路(點選跳過此段內容),這個彎路是用Javascriptnodejs來完成從網站扒朋友頭像的任務。

JS獲得頭像url程式碼
1
function a () {var a = document.images; for(i=0;i<a.length;i++){ if(a[i].getAttribute("hide_src")){console.log(a[i].getAttribute("hide_src"))} } } a();
使用nodejs的request下載素材到本地檔案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Dependencies 
var fs = require('fs'); var url = require('url'); var http = require('http'); var exec = require('child_process').exec; var spawn = require('child_process').spawn; // App variables var file_url = 'http://xunyanan.com/images/blog/PowerOfNow.png'; var DOWNLOAD_DIR = './'; // We will be downloading the files to a directory, so make sure it's there // This step is not required if you have manually created the directory var mkdir = 'mkdir -p ' + DOWNLOAD_DIR; var child = exec(mkdir, function(err, stdout, stderr) { if (err) throw err; else download_file_httpget(file_url); }); // Function to download file using HTTP.get var download_file_httpget = function(file_url) { var options = { host: url.parse(file_url).host, port: 80, path: url.parse(file_url).pathname }; var file_name = url.parse(file_url).pathname.split('/').pop(); var file = fs.createWriteStream(DOWNLOAD_DIR + file_name); http.get(options, function(res) { console.log(res.statusCode); console.log(res.data); res.on('data', function(data) { file.write(data); }).on('end', function() { file.end(); console.log(file_name + ' downloaded to ' + DOWNLOAD_DIR); }); }); };
一切準備妥當,發現微信的連結是https的,直接用url是新建http連線是獲得不了東西的。這就和泡好了方便麵,發現沒配叉子一樣。就換了條其他的路,放程式碼出來,大家可以研究下,如何用指令碼建立上https的請求,畢竟指令碼的方法能控制更多東西。

如果去年搶過火車票,那估計電腦裡都還有Chrome,batch image download比較好用,安裝完成後便在右鍵選單中可以看到。就是要注意,要先把朋友列表拖動一下,讓所有的朋友頭像都在網頁上刷新出來,這樣才可以下載全部的。

整理素材

現在有了幾百張朋友的頭像,Mathematica需要的是統一尺寸的正方形jpg影象,大概每張圖片的畫素在20*20~~40*40之間,要先整理一下圖片。

首先刪除不是正方形的影象

裡面會有群組的頭像,這個也可以選擇刪掉

重新命名整理圖片(可跳過)

  1. 使用shell 命令批量重名
1
j=100;for i in *;do let j+=1;mv "$i" "${i%.*}$j.jpg";done
  1. 使用A better finder rename

    將132*132的頭像圖片畫素變小

    推薦使用Mac自帶的atuomator做這項任務,通過滑鼠拖動,就能安排這個小機器人給你幹活,是見很有意思的事情。對於自定義縮放影象這裡有一份詳細的教程。
    在腦海中先好要讓機器人做什麼,比如第一步先把圖片拷貝到每個目錄,然後在把這些影象尺寸縮小。編輯好flow後,儲存好後,便可以通過右鍵看到自己命名的操作,然後選中檔案操作。用完之後,如果不想右鍵點選後,還出現自定義的操作,可以在automator刪除services工作流,進到目錄[username]/Library/Services下刪除對應名字的workflow,就可以了。

    製作黑白素材

    將所有的頭像圖片,製作一份黑白素材,放在一起組成新的影象庫。從Mathematica生成馬賽克圖片的上說,素材相簿中圖片越多,然後有黑白色圖片低對比度圖片,生成出來的頭像,會效果更好。每一個素材庫的圖片都會是當一個畫素去對應到最終生成的頭像圖片上。製作黑白素材的方法有

  2. automator小機器人可以做
  3. 使用priview調節飽和度(Saturation)
  4. 使用photoshop調節顏色通道 效果上從上到下越來越好,功夫上也是從上到下越費越多。建議第二種。

    製作圖片

1
2
3
4
5
6
7
imagePool = Map[With[{i = Import[#]}, {i, N@Mean[Flatten[ImageData[i], 1]]}] &,
   FileNames["/Users/xunyanan/Desktop/webwx_img/*.jpg"]];
closeMatch[c_] :=
 RandomChoice[Nearest[imagePool[[All, 2]] -> imagePool[[All, 1]], c, 20]]
ImageAssemble[
 Map[closeMatch,
  ImageData[Import["/Users/xunyanan/Desktop/2011me.tiff"]], {2}]]

第一行就是把建立了一個制定路徑的影象庫;第二行寫了個匹配函式,函式的內容是找出最接近的20個圖片,並隨機選擇;第三行是匯入目標圖片,並呼叫函式closeMatch生成影象結果。

目標圖片tiff格式的頭像照片

找一張自己的頭像圖片,然後把它處理成20*20畫素的tiff格式,注意在儲存tiff格式時,一定不要勾選Alpha通道。也可以選擇更大畫素的圖片,就是生成時間會久一點。

生成馬賽克頭像

Mathematica 9.0 新建note book,然後,將三行程式碼拷入其中,並把路徑改成自己的檔案位置。右鍵選擇Evaluation cell,便可看到結果。

分享到微信朋友圈

可以用微信的開放平臺把自己的頭像分享回微信。我的個人部落格網站用的的是加網分享,點選分享,掃描二維碼即可完成。

在個人部落格網站新增加網的方法是

註冊加網後,獲得加網生成的js

1
2
3
4
5
6
<!-- JiaThis Button BEGIN -->
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="[your url]" charset="utf-8"></script>
<!-- JiaThis Button END —>

將此段程式碼新增到個人網站中,詳見這篇