標籤: image

好用方便又免費的影像處理與CDN服務-imgix

CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.

圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.

今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/

除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:

https://imgix.com/pricing

閱讀全文

標籤 cdn, face detect, image, process

好用軟體

使用Google Spreadsheet產生條碼(Barcode)

文章作者作者: tim
文章發佈日期 2018-01-30
在〈使用Google Spreadsheet產生條碼(Barcode)〉中尚無留言

使用 Google 的 Spreadsheet 產生條碼, 其實是使用外部 API 來達成, 配合 Spreadsheet 中的函數:

=image(url, [mode], [width], [height])

來進行. 函數說明可以參考: https://support.google.com/docs/answer/3093333

這裡使用了兩家 API, 1 為 barcodesinc, 2 為 tec-it 這兩個 api.

1. https://www.barcodesinc.com/generator/
2. https://barcode.tec-it.com/

以舒潔衛生紙為例, 國際條碼為: 4710114813019

若生成 CODE 128 使用 barcodesinc 使用 url:
https://www.barcodesinc.com/generator_files/image.php?code=4710114813019&style=196&type=C128A&width=200&height=100&xres=1&font=3

若生成 EAN13 使用 tec-it 使用 url:
https://barcode.tec-it.com/barcode.ashx?data=4710114813019&code=EAN13&dpi=96&dataseparator=

若資料為變數儲存格, 則使用以下語法:
=image(“http://www.barcodesinc.com/generator/image.php?code=” & C3 & “&style=196&type=C128A&width=200&height=100&xres=1&font=3”)

以下為範例結果:

填入即可, 參考範例文檔:
https://goo.gl/v6rc4L

標籤 2D, barcode, Code128, EAN13, Google, image, Spreadsheet

系統技術

輕量又便宜的雲端主機-Vultr

之前介紹過一家便宜又大碗的雲端主機商, DigitalOcean – https://diary.tw/tim/1103 最低單價是 USD 5/month, 現在要介紹這家是另一家便宜又大碗的主機商, Vultr – http://www.vultr.com/?ref=7131638

這家雲端主機商, 最低的單位是 USD 2.5/month, 和 DigitalOcean 的比較如下:

	Digital Ocean	Vultr	Vultr
每月費用	USD 5	USD 2.5	USD 5
CPU Core	1	1	1
Memory	512MB	512MB	1024MB
SSD Disk	20GB	20GB	25GB
Transfer	1TB	500GB	1TB

只有在傳輸上有差異, 其他的部分基本上是一樣的, 尤其若是 Vultr 也用 USD 5/month 時, 則可以得到更多的記憶體與更多的 SSD, 傳輸達到一樣是 1TB. 相關費用可以參考:

Digital Ocean: https://www.digitalocean.com/pricing/#droplet
Vultr: https://www.vultr.com/pricing/

還有不同的地方, 主要在 Vultr 還有直援自行上傳 ISO 檔建立主機與 Windows Server 2012R2 的主機 (不過會多需要支付每月 USD16 與最小主機規模為 USD 10 的費用). 還有在 Vultr 的服務除了建立主機外, 還有直接建立 application(就是直接已安裝好應用程式的主機) 的功能, 目前已有以下的 applications:

不過有些服務會需要指定大小的主機, 費用可能會稍高一點.

實測了下載速度如下圖(主機在新加坡, 使用 wget 下載: http://speedtest.ftp.otenet.gr/files/test1Gb.db)

目前申請 Vultr 服務, 還有儲值多少送多少的服務, 上限到 USD 100, 還蠻划算的, 有需要的朋友們可以使用看看, 記得使用我的推薦碼進行申請:

http://www.vultr.com/?ref=7131638

Happy Coding, Happy Deploying, Happy Hosting.

標籤 cloud, image, server, VM

PHP

使用PHP上傳圖片至Azure Storage供圖檔應用

使用 PHP 將圖檔上傳至 Microsoft Azure 雲端空間供圖檔應用, 有以下幾個步驟:

1. 建立 Azure 的 Storage Account , 並取得 key 與建立 container (也可以使用程式建立)

2. 安裝 Azure PHP Client: http://azure.microsoft.com/en-us/documentation/articles/storage-php-how-to-use-blobs/

2-1. 先安裝 Git
2-2. 依說明建立 composer.json 與下載 composer.phar (http://getcomposer.org/composer.phar), 並進行安裝: php composer.phar install
2-3. 完成程式下載

3. 在 php 程式碼中引入對應程式碼, 以上傳圖檔為例, 程式碼如下:

require_once 'vendor/autoload.php';
use WindowsAzure\Common\ServicesBuilder;
use WindowsAzure\Common\ServiceException;
use WindowsAzure\Blob\Models\CreateBlobOptions;

$connectionString = "DefaultEndpointsProtocol=https;AccountName=[storage account name];AccountKey=[storage access key]";

$blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString);

$content = fopen("myfile.jpg", "r");
$blob_name = "myfile.jpg";
$createBlobOptions = new CreateBlobOptions();
$createBlobOptions->setBlobContentType("image/jpeg");

try {
    //Upload blob
    $blobRestProxy->createBlockBlob("[container name]", $blob_name, $content, $createBlobOptions);
    echo "ok";
    echo "<img src='http://[storage account name].blob.core.windows.net/[container name]/".$blob_name."' />";
}
catch(ServiceException $e){
    // Handle exception based on error codes and messages.
    // Error codes and messages are here: 
    // http://msdn.microsoft.com/library/azure/dd179439.aspx
    $code = $e->getCode();
    $error_message = $e->getMessage();
    echo $code.": ".$error_message."<br />";
}

其中範例中的程式, 並沒有指定對應 blob 中的 Content-Type, 會使用預設的 application/octet-stream , 其實在網頁使用並無影響, 但若是直接連結會變成是下載的狀況, 比較不適合, 而且也應該是指定為正確的 Content-Type 較佳.

若有需要使用到 php 上傳圖檔至 Azure storage, 可以參考上面做法進行上傳應用.

相關資料:
Put Blob: https://msdn.microsoft.com/library/azure/dd179451.aspx

使用 ASP.NET 版本參考這篇:
http://blogs.msdn.com/b/ericsk/archive/2013/12/18/php-on-windows-azure-windows-azure-blob-storage.aspx

標籤 Azure, image, jpg, Microsoft, storage

程式技術

利用YQL抓出Flickr相簿中的照片url

在 Flickr 中, 有許多照片(廢話), 而這些照片, 也有放在相簿集(set)裡, 如何把相簿集裡的相片的 url 取出來呢?

首先我們先來看一個工具, 叫做 YQL (Yahoo! Query Language): http://en.wikipedia.org/wiki/Yahoo!_query_language , 這個語言是望文生義, 就是用來進行查詢 Yahoo! 服務的語言, 而我們需要的功能, 剛好裡面有提供, 所以我們就利用這個查詢語言來進行查詢, 先來看看語法, 到這個 YQL Console 來看: http://developer.yahoo.com/yql/console/

來到這裡, 真是開發者的天堂, Yahoo! 的服務查詢, 這裡幾乎都有提供, 而今天我們要查找的正是這個 table: flickr.photosets.photos, 假設今天要查的 photo set 是這個 url: http://www.flickr.com/photos/okilyt/sets/72157600079438372/, 則 set_id 就是 72157600079438372, 於是輸入如下的語法:

select * from flickr.photosets.photos where photoset_id = 72157600079438372

就會生出如下的 xml:

<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="10" yahoo:created="2010-08-06T11:19:06Z" yahoo:lang="en-US">
    <diagnostics>
        <publiclyCallable>true</publiclyCallable>
        <url execution-time="141"><![CDATA[http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&photoset_id=72157600079438372&page=1&per_page=10]]></url>
        <user-time>142</user-time>
        <service-time>141</service-time>
        <build-version>8771</build-version>
    </diagnostics> 
    <results>
        <photo farm="1" id="460118008" isprimary="1" secret="4d856aaa72"
            server="239" title="DSC_3989"/>
        <photo farm="1" id="460125135" isprimary="0" secret="15a3d24484"
            server="208" title="DSC_3987"/>
        <photo farm="1" id="460117456" isprimary="0" secret="76bdfd928c"
            server="191" title="DSC_3986"/>
        <photo farm="1" id="460117112" isprimary="0" secret="515535f02e"
            server="253" title="DSC_3983"/>
        <photo farm="1" id="460116928" isprimary="0" secret="68286fc46a"
            server="200" title="DSC_3981"/>
        <photo farm="1" id="460116620" isprimary="0" secret="4245ef4c5a"
            server="183" title="DSC_3980"/>
        <photo farm="1" id="460123637" isprimary="0" secret="68351dfe14"
            server="236" title="DSC_3963"/>
        <photo farm="1" id="460123365" isprimary="0" secret="80edceee74"
            server="243" title="DSC_3961"/>
        <photo farm="1" id="460115832" isprimary="0" secret="80b8d482bf"
            server="246" title="DSC_3958"/>
        <photo farm="1" id="460122569" isprimary="0" secret="2ee7c9e00e"
            server="242" title="DSC_3954"/>
    </results>
</query>

真是方便耶, 不過筆數好像只有十筆, 全部應該要有 18筆才對, 所以查了一下資料, http://developer.yahoo.com/yql/guide/paging.html , 發現可以在 table 後方加上 (0) 來進行全部查出, 於是調整一下語法如下:

select * from flickr.photosets.photos(0) where photoset_id = 72157600079438372

就可以方便地把整個 photo set 中的相片查找出來了, 而相片的 url 就可以利用這些 xml 來組合出來, 語法如下:

http://farm[farm].flickr.com/[server]/[id]_[secret].jpg

很容易吧! 這樣一來, 要取出某相簿的照片 url 就方便多了, 寫成小工具, 放在這裡: http://sample.diary.tw/flickrset/

參考資料: http://www.nakedtechnologist.com/?p=476

標籤 flickr, image, photo, photo set, Url, YQL

程式技術

好用的CSS STYLE截圖

文章作者作者: tim
文章發佈日期 2009-06-16
在〈好用的CSS STYLE截圖〉中尚無留言

基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, …. 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, … 9, 0 做成一張橫的長條圖, 例如:

(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)

而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.

這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:

background-image
background-position
width
height

也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

這個 2 數字, 是利用這個 HTML:

來達成的, 實際上用圖示來說明就像是這樣:

也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.

若是要秀出 307 則使用如下語法:

如下:

上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.

接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:

要取出其中的 4個部分, 可以利用以下語法, 例如:

同步中心:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;”> </div>

Windows CardSpace:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;”> </div>

Java:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;”> </div>

iSCSI啟動器:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;”> </div>

這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!

[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2

[2016/3/30 6:26]

另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp

標籤 crop, css, image

程式技術

網頁為什麼會發兩次request到自己

這個是相當困難的一個題目…..

話說在 debug 一個 asp.net project 時, 因為會用到 session 內的 counter 做一些事情, 結果在測試的時候發生了一個很奇妙的狀況, counter 會無故多 +1

仔細檢查 asp.net 的程式碼, session 內的 counter 一次只有加一, 是寫在 Page_Init 這個 event 裡. 理論上沒有理由會多 +1, 雖然是用 master page 的方式處理, 也沒有理由在這個狀況下發生問題. 於是進行獨立測試, 發現即使沒有使用 master page 也是一樣. 所以初步排除和 master page 有關.

接下來 check iis log來對照, 果然有發出兩次 request 的狀況, 而不是 asp.net code 內的問題, 這樣問題說明應該是在 client side 端, 所以乾脆用 client 端來查, (利用 firefox 的 firebug 發現還真的會對該頁面發出兩次 request. 真的太神奇了, 於是再將該頁面存成 html 來查, 再做一次測試, 整個還是一樣的結果, 於是只好拿出區塊區塊刪除的方式來查… 花了超久時間… 發現結論問題在一行:

<img src="" width="242" height="182" alt="" />

有沒有看到什麼狀況? 就是 src=”” 這件事, 他讓 client 去多訪問了沒有設定的 img src 也就是本頁, 又或是 src=# 也是一樣的結果啦!!

所以這個到底要怎麼說呢, 唉, 反正就是很悶的一個無敵怪 bug…. 還好有找到咧, 給大家做參考!!

繼續閱讀:
http://www.johnbatdorf.net/blog/CommentView,guid,5aebd6b0-9be3-462c-a920-e19998bc173e.aspx
http://blog.csdn.net/vividboy/archive/2007/09/13/1783162.aspx

為了增加一些 page view, 多上一個英文的描述, why page load twice in ASP.NET or why page fire twice page_init event (雖然和 asp.net 一點關係都沒有, 哈哈)

標籤 counter, image, page_init, page_load, session, twice

2024 年 12 月
日	一	二	三	四	五	六
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