「Textarea」這個 form element 相信大家都不陌生, 它可以說是 vistor 與開發者最初的溝通媒介之一, vistor 可以藉由這個 element 將一些想法訴諸文字在此進行輸入

由於它被設計的用意就是接收與存放文字為主要用途, 也因此眾多的開發者都會以此為前提下去開發, 不過這當然也會埋下一個開發的盲點

它…能否張貼其他非文字類型的內容 ??

早期受限於瀏覽器支援度的問題, 確實我們無法從 clipboard 取出任何資料, 更不用說知否有支援 paste 這樣的 event, 不過近幾年來 HTML5 迅速的發展, 許多開發者的想法都得以在瀏覽器中被落實, 也因此, 在 textarea 中張貼非文字類型的內容再也不是一個空談了.

「pasteIt」這個 polyfill 便是因應這個需求被開發出來, 藉由 pasteIt 的導入, 我們便可以在 textarea 中張貼 image data, 除此之外, 它也賦予 textarea Drag and Drop(DnD) 的功能, vistor 可以直接拖曳 image files 到 textarea 中, 便可以有著跟 paste 一樣的效果. 這樣的效果其實已經被廣泛的應用到 web 中, 比方說 facebook IM 便支援著這樣的功能, 筆者因為工作的關係, 需要常常傳圖作需求確認與溝通, 因此有這樣的 support 對筆者來說真真方便非常!! 希望藉由 pasteIt 這個 polyfill 的開發可以讓有所有有這方面需求的朋友們有所助益

為了要讓大家可以更快了解 pasteIt 究竟是如何運作的, 筆者準備了一個 demo page, 只要是直接在頁面中的 textarea paste image 或者是 Drag & Drop image file 到 textarea 後, 便會立即在 front end 這裡產生相關的截圖以及原始尺寸的圖片, 透過點擊截圖便可以直接觀看到符合當前 viewport size 的大圖喔!

※ 歡迎點擊下方連結進行觀看 : – pasteIt: http://mei.homin.com.tw/pasteItProt… – demo video: https://www.youtube.com/watch?v=v2z…

幾種在 textarea 中張貼 image data 的方法:

※ Method 1: 如果 clipboard (剪貼簿) 已有 image data, 那麼直接在 textarea 中進行 paste 的動作即可

在 PS 中選取特定區塊後, 鍵入 ctrl + c 後, 便會將選取範圍的 image data 置於 clipboard 中

接下來直接在 textarea 中進行 paste 的動作後, 便可以順利的獲取相關 data 並產生截圖與原始尺寸圖片

獲得 image data 後所產生的截圖

※ Method 2: 在 web page 中, 直接在 image element 上按滑鼠右鍵, 並選擇 Copy image

Copy 想要 paste 的 image

接下來一樣直接在 textarea 中進行 paste 的動作, 便可以順利的獲取相關 data 並產生截圖與原始尺寸圖片

textarea 順利的獲取了方才 Copy image 的 data

※ Method 3: 選取想要進行 paste 的 image 實體檔案後, 並直接將之拖曳至 textarea 中

直接在檔案總管, 選取三張圖片檔案, 並且拖曳進 textarea

拖曳進來的圖片檔案經過 pasteIt 解析之後便會把獲得的資料以 array 的方式進行回傳, 其排序以檔案的名稱為主.

解析檔案後所產生的截圖

developer 可以依照需求進行不同的回呼處理, 比方說範例網頁便會根據圖片中 EXIF – Orientation 來作相對應修正 (image source)

根據 orientation 作出相對應處理

※ Method 4: DnD 亦支援直接拖曳 html element 進來功能, 只要拖曳進來的 html element 中有包含 image 的 data, 亦會正常的被解析出來

直接選取頁面中的元素, 並且拖曳進 textarea 中

pasteIt 會對拖曳進來的元件進行解析, 一旦有確實的 image data 可以被解析出來的話, 便會將相關的 data 藉由 callBack function 回呼我們所期待的 function

有效的 image data 被 parse 出來後, 便可以順利的產生相關的截圖

以上便是 pasteIt 所支援的各種 paste 方法, 不過部分瀏覽器會因為跨網域的關係, 或者 response header 的限制造成 image data not allow, 因而無法順利的掃出相關圖片資訊, 因此在測試時可能要多加留意或者加註一些使用上的小提醒

使用方法:

使用方法可以說是簡單非常, 首先, 我們要先把相關的 JavaScript require 到頁面中

<script async src="pasteIt.js"></script>

pasteIt 會將所有的 textarea 掃出來, 並且 extend 其既有的功能, 讓該 element 具備可以 paste image data 的功能, 除了既有的 textarea 元件外, 當 developer 透過 JavaScript 動態的 generate element 出來後也可以直接受惠, 不需要做額外的 init 動作

我們可以透過 property- pasteIt 來觀看以及設定該 element 目前是否開啟 pasteIt 的 feature

var textarea;textarea = document.querySelector('textarea');
console.log(textarea.pasteIt); //true || false

如果要開啟 pasteIt 的功能, 可以透過修改 textarea.pasteIt 或設置 textarea[ data-paste-it ] 來達到需求, 兩者擇一即可

var textarea;textarea = document.querySelector('textarea');
//turn on feature by propertytextarea.pasteIt = true;
//turn on feature by attributetextarea.setAttribute('data-paste-it', 'on');

如果因為某些需求或者想要關閉該功能, 當然也可以透過這兩種方法來做

var textarea;textarea = document.querySelector('textarea');
//turn off feature by propertytextarea.pasteIt = false;
//turn off feature by attributetextarea.removeAttribute('data-paste-it');

pasteIt 也提供了下列兩種 method 來設置 / 移除 回呼函式

• addCallback: 設置回呼函式, 一旦有特定事件發生時, 便會回呼我們所設置的 callback, 這些特定事件分別為 dragover, dragenter, dragleave, prepare, paste 以及 drop 這些動作時便會觸發回呼

function pasteItCallBack(target, action, imageData) {    console.log(action);}
var textarea;textarea = document.querySelector('textarea');textarea.addCallback(pasteItCallBack);

從上面範例, 我們可以清楚看出 callBack 會回來 2 ~3 個 parameter, 分別代表

– target: 當前正在作用的 textarea – action: 事件名稱 – imageData: 如果有正常解析出 image data 的話, 便會多這個參數可以拿取, 它會是一個 array 的型態來包覆每一個 image data, 如下所式

[    {        "dataURL": "data:image/png;base64;xsaxsaxsaxs.....",        "blob": "file"    },    {        "dataURL": "data:image/png;base64;xsaxsaxsaxs.....",        "blob": "file"    },    ...    ...    ...    {        "dataURL": "data:image/png;base64;xsaxsaxsaxs.....",        "blob": "file"    }]

Developer 可以選擇是否要直接使用 dataURL 或者是使用 FileSystem API 來操作 blob.

• removeCallback: 移除特定回呼函式

function pasteItCallBack(target, action, imageData) {    console.log(action);}
var textarea;textarea = document.querySelector('textarea');textarea.addCallBack(pasteItCallBack);
textarea.removeCallback(pasteItCallBack);

以上便是 pasteIt 的使用以及所支援的功能, 筆者儘量將設置的門檻降至最低, 讓每個使用的 developer 都可以開開心心的來套用這個 polyfill, 如果在使用過程中遇到任何的困難或者發現任何問題的話, 請不吝與筆者進行分享與 feedback, 讓筆者將不足或者是缺失的地方補上, 發揮其更大功效, 謝謝

測試環境:

• OS: Windows 7
• Browser: Chrome Version 53.0.2785.116 m (64-bit) , Firefox 49.0.1, MSIE 11.0.9600.18426

Reference: