整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天在博客中加了個新的功能，直接復制圖片然后黏貼上傳到服務器。
之前是自己弄的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();
}
ileReader 對象FileReader 對象主要用來把文件讀入內存，并且讀取文件中的數據。通過構造函數創建一個 FileReader 對象。
這個文件讀取對象有以下幾種方法：
1.readAsText():讀取文本文件(可以使用Txt打開的文件)，返回文本字符串，默認編碼是UTF-8。
2.readAsBinaryString():讀取任意類型的文件。返回二進制字符串。這個方法不是用來讀取文件展示給用戶看，而是存儲文件。例如：讀取文件的內容，獲取二進制數據，傳遞給后臺，后臺接收了數據之后，再將數據存儲。
3.readAsDataURL():讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL是一種將文件(這個文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉換為base64編碼的字符串形式，并且將這些內容直接存儲在url中>>優化網站的加載速度和執行效率。
4.abort():中斷讀取
該對象常見應用在即時預覽：
即時：當用戶選擇完圖片之后就立刻進行預覽的處理 >>onchange。
預覽：通過文件讀取對象的readAsDataURL()完成。
以下是應用時的具體實現（推薦了解黑馬程序員web前端培訓課程）
HTML部分：
JS部分：
其中獲取數據時，FileReader還提供一個完整的事件模型，用來捕獲讀取文件時的狀態。
onabort:讀取文件中斷片時觸發
onerror:讀取錯誤時觸發
onload:文件讀取成功完成時觸發
onloadend:讀取完成時觸發，無論成功還是失敗
onloadstart:開始讀取時觸發
onprogress:讀取文件過程中持續觸發
謝 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 同樣建議如此。
// 默認截屏全屏
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，希望幫到你。謝謝。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
