[Framer] 讓你的原型會拍照片

Framer 並沒有給出呼起系統拍照的 api，很多設計師在實際設計到拍照相關功能的時候可能會使用假界面來代替。實際上，只要使用 html 的 input 標籤就可以通過瀏覽器 api 呼起系統的真實拍照功能。對於追求極致的設計師們，就看看如何讓自己的原型在拍照流程上「更真實」吧！

一、給按鈕圖層添加 input 標籤

開始之前，我們應該已經有了一個基本的 UI 框架，最基本的元素包括一個照片的顯示區域和一個拍照按鈕，顯然這時候我們的原型是啥也幹不了的。

這時，為了讓我們的原型可以和瀏覽器上傳文件的 api 做對接，我們要給相機的按鈕添加一個 html 的 input 標籤。標籤的詳細定義可以看這裡：HTML <input> 標籤。

cameraButton.html="""n <input type="file" id="btn" accept="image/*"/>n"""n

增加了上面的代碼後，我們可以很快發現，相機按鈕的圖層上多出了一個選擇文件的按鈕。雖然在 Preview 區域點擊是沒有效果的，但如果大家有興趣 Mirror 到手機，就會發現，點擊這個小小的「Choose File」已經可以進行拍照和圖片選擇了——似乎目標已經完成了？？

顯然，這個時候原型的樣子和功能還遠遠算不上完美，接下來，我們要對 input 元素進行功能和樣式上的修飾。

二、設置 CSS 樣式去掉惱人的文案

cameraButton.html="""n <input type="file" id="btn" accept="image/*"/ stylex="opacity: 0">n"""n

僅僅在標籤內增加了「stylex="opacity: 0"」後，界面清凈了，通過 CSS 樣式設置 input element 的透明度，原來難看簡陋的按鈕消失不見了，我們簡潔可愛的相機按鈕又回來了。

三、鏈接點擊事件

去掉了難看按鈕，一定很快就會發現，隨著按鈕的消失，原來本身就很小的按鈕觸區也跟著一起看不見了，雖然能點，卻像穿針引線。因此，我們需要將按鈕圖層的點擊事件和 input 元素的按鈕點擊事件鏈接起來。

input = document.getElementById("btn")n

首先，我們將通過 getElementById 將 dom 節點引入，方便之後對 input 元素的控制。關於這個方法我們可以參考：HTML DOM getElementById() 方法

cameraButton.on Events.Click, ->n input.click()n

再次參考 input 的事件定義，配合上面這句，我們就成功地給 input 綁定了相機按鈕的點擊事件，試試 Mirror 後點擊相機按鈕，感受一下完美的觸區吧~

四、回傳圖片數據

只能拍照不能看的相機，肯定在功能上還不夠完美，因此，我們需要把拍到或者上傳的圖片數據回傳並顯示到預計區域中。 在這裡我們需要用到 FileReader 介面 。

imageReader = ->n file = input.files[0]n reader = new FileReader()n reader.readAsDataURL filen reader.onload = ->n show.image = reader.resultn

首先，我們先定義方法 imageReader，在這個方法中，我們提取 input 元素中讀取圖片文件給 file 賦值，並建立 FileReader 實例，通過 readAsDataURL 方法對 file 進行讀取。而在讀取完成後觸發 onload 後，便把讀取的圖片數據 reader.result 傳送給 showImage 圖層。

input.onchange = ->n imageReader()n

最後只要像上面，在 input 元素的「onchange 事件」觸發時，調用我們定義的方法，就可以實現讀取並顯示圖片效果了。

至此為止，我們有最基礎拍照並顯示功能的 Demo 就搭建完成了~ 設計師們當然可以發揮創意基於這個思路給 Demo 增加更多的交互和功能~

最後還是附上：線上瀏覽和源碼地址（4.25 更新修正適配問題）

推薦閱讀：