天在博客中加了個新的功能，直接復制圖片然后黏貼上傳到服務器。

之前是自己弄的markdown編輯器，很多功能不完善，剛開始加了個插入圖片的按鈕，現在能直接復制圖片方便多了。

目前只支持chrome瀏覽器，哈哈，感覺chrome是最好用的瀏覽器。

主要原理是利用paste事件，然后拿到里面的圖片數據上傳到服務器。

下面貼代碼

<textarea id="content" />

有個編輯的文本框，然后監聽parse事件

document.querySelector('#content').addEventListener('paste', function(event) {

var isChrome = false;

if (event.clipboardData || event.originalEvent) {

//not for ie11 某些chrome版本使用的是event.originalEvent

var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);

if (clipboardData.items) {

// for chrome

var items = clipboardData.items, len = items.length, blob = null;

isChrome = true;

for (var i = 0; i < len; i++) {

if (items[i].type.indexOf("image") !== -1) {

//getAsFile() 此方法只是living standard firefox ie11 并不支持

blob = items[i].getAsFile();

}

謝 DCloud 社區原作者（1091656813@qq.com：http://ask.dcloud.net.cn/article/13494），本人做了一點代碼精簡。

簡單說下 HTML5Plus，與 Cordova（含 ionic）類似，是 js 寫了中間層協議，使得打包在 APP 中的 webview 組件可以通過暴露出來的 api 接口調用原生的能力，比如頁面棧控制，拍照等等。

適用于快速原型開發 APP，性能要求不是那么高的 APP 開發（90% 的 APP 性能要求都是夠的）。

優點：超級簡單，是個前端就能做 APP，這一條就夠了！

缺點：1. 依賴自家 IDE，之前是 HBuilder，現在推新版 HBuilderX（Vue 官網也投放了廣告）；2. 社區環境差，非大廠不開源基本都這樣（好在自家迭代還算迅速）；3. 自家 UI 框架用的還是 iOS 樣式，萬年更新一次……

對了，附帶一個小 tip：iOS 上架的 APP 必須有調用 iOS 系統接口的操作（哪怕僅僅是陀螺儀），否則被拒。Android 同樣建議如此。

牽扯功能

1. BitMap 對象截屏
2. 在 BitMap 對象截屏回調中保存到相冊（需要同意授權）

Show Me Code

// 默認截屏全屏
const obj = {
 top: '0px',
 left: '0px',
 width: '100%',
 height: '100%'
}
// 動態獲取時間作為文明標識
function getDateStr() {
 return String(Date.parse(new Date()));
}
/**
 * @params {function} successCB 必填的成功回調
 * @params {function} errorCB 失敗回調
 * @params {string} fileName 文件名
 * @params {string} imgID 圖片 id
 * @params {boolean} overwrite 是否覆蓋已有文件
 * @params {string} format 格式
 * @params {number} quality 成圖質量
 * @params {object} clip 截屏區域
 */
function save(successCB, errorCB = () => {}, fileName = getDateStr(), imgID = getDateStr(),
 overwrite = true, format = 'png', quality = 50, clip = obj) {
 const cw = plus.webview.currentWebview();
 const bitmap = new plus.nativeObj.Bitmap(imgID);
 //繪制截圖
 cw.draw(bitmap, function() {
 // 保存Bitmap圖片
 bitmap.save('_doc/' + fileName + '.' + format, {
 overwrite,
 format,
 quality,
 clip
 }, function(i) {
 //保存到系統相冊
 plus.gallery.save(i.target, function(details) {
 //銷毀Bitmap圖片
 bitmap.clear();
 successCB({
 success: 'success',
 details,
 });
 }, function(e) {
 //銷毀Bitmap圖片
 bitmap.clear();
 errorCB({
 error: '圖片保存至相冊失敗',
 details: e
 });
 });
 }, function(e) {
 bitmap.clear();
 errorCB({
 error: '圖片保存失敗',
 details: e
 });
 });
 }, function(e) {
 errorCB({
 error: '截屏繪制失敗',
 details: e
 });
 });
}
// 調用保存
function clickSave() {
 save(function() {
 alert('保存成功，請前往相冊分享');
 })
}

都已經在注釋里面，拿來即用。

建議接觸 HTML5Plus 的同學保存一份，以備不時之需。

這個是這兩天遇到的小 tip，希望幫到你。謝謝。