The 21st century: 2月 2019

https://www.mile.cloud/zh-hant/introduction-to-google-api/ 介紹的 Google API 主要依從人類基礎的四種能力：聽說讀寫衍伸而成，分別為 Vision API、Video Intelligence API、Translation API、Speech API、Natural Language API。

Vision API 就像是 Google 的照片搜尋功能，主要能夠讓機器辨識物件，如人臉、商標 Logo、圖片中的文字，還可以偵測是否有暴力內容等等。簡單而言，Vision API 會自動辨認照片出現的物品並逐一標記標籤。

Video Intelligence 與 Vision API 類似，但以影片即時標籤為主，深入地把影片片段內容作標籤，其中可自動偵測影片場景轉變，並標記每個場景出現的物品，像是下圖範例中的狐狸與兔子等。

如此一來，在龐大的影片庫裡只需要輸入關鍵字（例如：狗、花、人、跑、飛），不到幾秒鐘就能輕鬆從數部影片中搜尋出和關鍵字吻合的內容，舉例來說，所有影片資料庫中出現「狗」的相關影音都會被標示出來，而且還能知道出現在影片裡的哪個位置。

Translate API 涵蓋一般人最常用的 Google Translation，可即時將句子翻譯成各國語言。另外，也有 Instant Video Translate 功能，只要打開相機的功能，API 可將拍到的文字翻譯成使用者所選取的語言，並以相同的顏色及字體顯示在相同位置，如下圖的牛奶的中英轉換例子。

Speech API 可以想成是 Google 搜尋時常使用的語音轉換文字 (Speech to Text) 功能，使用者只需要說出要輸入的文字，API 就會自動把所說的話即時轉換成文字，省略打字環節。

近期來 Apple Siri、Google Assistant、Amazon Alexa 等語音助手，背後就是借助如 Speech API 的技術。

Natural Language API 能進一步了解語意與情緒。只要輸入一段文字，Natural Language API 便能判斷此段文字的正面、負面或是中性情緒，並給予相對分數，供使用者進一步評估。透過 Natural Language API 自動分析語句功能，便可初步了解使用者的意圖，進而做到許多智慧化的功能。

進階版技術與功能，如 Tensorflow、Google Auto ML、Google Machine Learning Engine，包括 Deep Learning 如何收集各動物間的特徵，從而加強自動辨認的準確性；或是如何使用 ML Engine 定義數據類型去分析等。

上述 Google API 皆為 Google Cloud Platform 所提供的工具，若想動手嘗試便可開啟 Google Cloud Platform API Credentials 申請試用，Google 將提供兩百美金的免費試用額度。

JavaScript Image Object (可以從圖址取得圖片長寬等資訊)

JavaScript Image Object
The JavaScript Image Object is a property of the document object.

Properties
border - The width of the border around the image in pixels.
complete - A boolean value which identifies whether an image is completely loaded yet.
height - The read only height of the image in pixels.
hspace - The read only amount of horizontal space to the left and right sides of the image.
lowsrc - The read or write string giving the URL of an alternate image for low resolution screen display.
name - The assigned name of the image.
prototype - Used for adding user-specified properties to the image.
src - The URL of the image to be displayed. It is a read/write string.
vspace - The read only vertical space above and below the image.
width - The read only width of the image in pixels.
Events
onAbort
onError
onLoad

比如說

function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}
</script>

onclick="getImgSize('images/testout_r1_c2.jpg')"

HTML iframe 框架語法與其使用限制與缺點

被放進框架的內容網頁不見得能夠在手機等行動裝置上正常運作，相容性很混亂

https://blog.csdn.net/Abraham_bug/article/details/80053210

無法滾動、解決滾動同時要防止框架外的移動等等衝突問題

HTML iframe 框架語法 => HTML5 改為使用 CSS 設定
https://www.w3schools.com/tags/tag_iframe.asp

iframe 連結另外開啟新視窗或在原本網頁開啟
http://www.wibibi.com/info.php?tid=374

深入了解 /iframe有那些缺點/ Iframe傳值問題
https://medium.com/@small2883/iframe%E4%BB%8B%E7%B4%B9-%E6%B7%B1%E5%85%A5%E4%BA%86%E8%A7%A3-iframe%E6%9C%89%E9%82%A3%E4%BA%9B%E7%BC%BA%E9%BB%9E-iframe%E5%82%B3%E5%80%BC%E5%95%8F%E9%A1%8C-579e6c113436

iframe這個詞是inline frame的縮寫。

iframe屬性：

1.frameborder:是否顯示邊框，1(yes),0(no)
2.height:height屬性指定了iframe的像素高度，建議使用css設置。
3.width:width屬性指定了iframe的像素寬度，建議使用css設置。
4.name:iframe的名稱，window.frames[name]時專用的屬性。
5.scrolling:iframe是否滾動。yes,no,auto。
6.src：iframe的網址。
7.sandbox:控制iframe內的權限(html5新功能)：http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/?redirect_from_locale=zhhttp://msdn.microsoft.com/en-us/hh563496.aspx

為什麼前端盡量少用iframe? iframe有哪些缺點：

1.iframe会阻塞主頁面的Onload事件；
2.搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
3.iframe和主頁面共享連接池，而瀏覽器對同域的連接有限制，所以会影響頁面的並行加載。
4.因为iframe等于打開一个新的網頁，所有的JS/CSS全部加載一遍，内存会*2
5.是否同域的問題

我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM)。
但前提條件是同域，如果跨域頂多只能實現頁面跳轉window.location.href。

同域時，父頁面可以对子頁面進行改寫，反之亦然。
不同域，父頁面没有權限改動子頁面，但可以實現頁面的跳轉。

如果需要使用 iframe，最好是通过 javascript 動態给 iframe 添加 src 屬性值，这样可以避開一些 iframe 的缺點：

https://stackoverflow.com/questions/6000987/dynamically-set-iframe-src

跨域傳值，方法之一是使用
window.frames[0].postMessage($txt_val, ‘*’); 傳值
window.addEventListener(“message”, receiveMessage);取值
可參考
https://dotblogs.com.tw/daniel/2017/11/25/225511
https://www.cnblogs.com/dolphinX/p/3464056.html
https://blog.csdn.net/kenhins/article/details/50789125

CSS 做文字特效

CSS：box-reflect 顛倒文字
https://ithelp.ithome.com.tw/articles/10192635

文字的變化
除了水平、垂直、旋轉移動之外
CSS還可以作出顛倒的字、圖

.reflect{box-reflect:below 10px;}

除了文字、圖像生成在下方的顛倒還可以換成是生成在上方或左右
以及可以用漸層生成背景和遮罩選擇性遮掉

/* Direction values */
box-reflect: above; /* 生成在文字上方 */
box-reflect: below; /* 生成在文字下方 */
box-reflect: left; /* 生成在文字左方 */
box-reflect: right; /* 生成在文字右方 */

/* Offset value */
box-reflect: below 10px; /* 與文字之間的距離 */

/* Mask value */
box-reflect: below 0 linear-gradient(transparent, white);
/* 用漸層生成背景 */
box-reflect: below 10px url(圖像); /* 使用遮罩 */

細節可參考
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

要把文字彎曲作出弧形
或是作成像是繞圓一樣時
如果使用 jQuery

$(document).ready(function() {
$(".line-2").arctext({radius: 700});
});

radius 的數值愈小弧度愈大

$(document).ready(function() {
$(".line-2").arctext({radius: 100});
});

https://codepen.io/zambo/pen/jKEDp

csswarp 可將文字搭配自訂曲線，讓文字旋轉、彎曲的 CSS 及 HTML 產生器
https://key.chtouch.com/ContentView.aspx?P=994
http://csswarp.eleqtriq.com/

https://github.com/dirkweber/csswarp.js

https://www.oxxostudio.tw/articles/201406/css-cubic-bezier.html

Cubic Bezier 就是一個具有兩個端點與兩個貝茲控制點的曲線，( SVG 裏頭 Path 的 "C" 參數 )，其實這個利用貝茲曲線的控制方式在大多數的 CSS 中都不常見，主因這是 CSS3 裏頭動畫的速度控制選項，通常我們在設定動畫的速度，大多直接使用 ease in 或 ease out 來取代，但藉由 Cubic Bezier，我們更可以創造出各種不同速度控制的動畫效果。

純 CSS 的形狀變換

一個超酷的網站，完全使用 CSS 製作出的精彩特效，以30種瀕危物種為主題：
http://species-in-pieces.com/

https://www.oxxostudio.tw/articles/201503/css-clip-path.html

專門介紹「clip-path」這個 CSS3 的屬性，你可以直接在上面拖拉或修改，除了貝茲曲線外，幾乎任何形狀都做得出來 ( 中空的部分要用組合的 )：
http://bennettfeely.com/clippy/

jQuery 的動畫函式

https://www.darkthread.net/jQuery/Tutorial09/default.htm

【常用特效函數】

show() 將隱藏的元素立刻顯示出來，若元素已可見則沒有變化。
show(speed[, callback]) 在speed指定的時間內(即animate的duration，可以是"slow"、"normal"、"fast"或是數字代表微秒數，以下將不再重覆說明)，將width, height由0變到原有尺寸，透明度也明完全透明變成不透明。callback即前述的complete函數，在特效結束後呼叫(稍後在其他函數中用到時便不再重覆說明)。
hide() 將顯示的元素立刻隱藏，已隱藏者不受影響。
hide(speed[, callback]) 在speed指定的時間內將width, height, opacity縮為0。
toggle() 切換元素的顯示狀態，將可見者隱藏，隱藏者顯示出來。
toggle(switch) switch為一Boolean變數，true時顯示，false時隱藏。
slideDown(speed[, callback]) 在speed指定時間內將height由0遞增至原有高度，形成向下拉開的視覺效果。
slideUp(speed[, callback]) 在speed指定時間內將height由原有高度遞減至0，形成向下收合的視覺效果。
slideToggle(speed[, callback) 切換元素的顯示狀態，將可見者隱藏，隱藏者顯示出來，但過程使用slideDown, slideUp效果。
fadeIn(speed[, callback]) 在speed指定時間內將opacity由透明逐漸變成不透明，形成漸漸浮現的視覺效果。
fadeOut(speed[, callback]) 在speed指定時間內將opacity由不透明逐漸變成透明，形成慢慢消失的視覺效果。
fadeTo(speed, opacity[, callback) 在speed指定時間內將opacity逐漸變成指定的透明度。