最近在做一個項目，需要實現(xiàn)類似QQ截圖后，就是能夠在富文本編輯器中粘貼截圖并預(yù)覽。

先看一下效果:

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

分析一下實現(xiàn)步驟：

  1. QQ截圖后在編輯器中粘貼，肯定會有一個粘貼事件，即 paste 事件

  2. 在事件回調(diào)函數(shù)中對前端進(jìn)行圖片的一次壓縮

  3. 前端壓縮多是使用canvas，返回的是base64，這里我使用了一個 localResizeIMG.js的插件

  4. 將生成好的base64傳給后臺，后臺可以進(jìn)行圖片的第二次壓縮，但是感覺沒必要

  5. 后臺先得到七牛云的upToken，即一個上傳的憑證，然后執(zhí)行七牛sdk提供的上傳函數(shù)

接下來，一步步的來實現(xiàn)：

瀏覽器paste事件

這個paste事件的兼容性不是很好，但是可以對用戶做友好提示，如果不能使用剪切板事件的話，就在dialog中上傳圖片也是可以的。

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

網(wǎng)友評論