Web聊天工具的富文本输入框(2)

然后就可以在 onPaste 事件里面直接使用了：

document.querySelector('.editor').addEventListener('paste', async (e) => {  
    const result = await onPaste(e)  
    console.log(result)  
}) 

上面的代码支持文本格式，接下来就要对图片格式进行处理了。玩过 <input type="file"> 的同学会知道，包括图片在内的所有文件格式内容都会储存在 File 对象里面，这在剪贴板里面也是一样的。于是我们可以编写一套通用的函数，专门来读取 File 对象里的图片内容，并把它转化成 base64 字符串。

粘贴图片

为了更好地在输入框里展示图片，必须限制图片的大小，所以这个图片处理函数不仅能够读取 File 对象里面的图片，还能够对其进行压缩。

新建一个 chooseImg.js 文件：

/**  
 * 预览函数  
 *  
 * @param {*} dataUrl base64字符串  
 * @param {*} cb 回调函数  
 */  
function toPreviewer (dataUrl, cb) {  
  cb && cb(dataUrl)  
}  
/**  
 * 图片压缩函数  
 *  
 * @param {*} img 图片对象  
 * @param {*} fileType  图片类型  
 * @param {*} maxWidth 图片最大宽度  
 * @returns base64字符串  
 */  
function compress (img, fileType, maxWidth) {  
  let canvas = document.createElement('canvas')  
  let ctx = canvas.getContext('2d')  
  const proportion = img.width / img.height  
  const width = maxWidth  
  const height = maxWidth / proportion  
  canvas.width = width  
  canvas.height = height  
  ctx.fillStyle = '#fff'  
  ctx.fillRect(0, 0, canvas.width, canvas.height)  
  ctx.drawImage(img, 0, 0, width, height)  
  const base64data = canvas.toDataURL(fileType, 0.75)  
  canvas = ctx = null  
  return base64data  
}  
/**  
 * 选择图片函数  
 *  
 * @param {*} e input.onchange事件对象  
 * @param {*} cb 回调函数  
 * @param {number} [maxsize=200 * 1024] 图片最大体积  
 */  
function chooseImg (e, cb, maxsize = 200 * 1024) {  
  const file = e.target.files[0]  
  if (!file || !/\/(?:jpeg|jpg|png)/i.test(file.type)) {  
    return  
  }  
  const reader = new FileReader()  
  reader.onload = function () {  
    const result = this.result  
    let img = new Image()  
    if (result.length <= maxsize) {  
      toPreviewer(result, cb)  
      return  
    }  
    img.onload = function () {  
      const compresscompressedDataUrl = compress(img, file.type, maxsize / 1024)  
      toPreviewer(compressedDataUrl, cb)  
      img = null  
    }   
    img.src = result  
  }  
  reader.readAsDataURL(file)  
}  
export default chooseImg 

关于使用 canvas 压缩图片和使用 FileReader 读取文件的内容在这里就不赘述了，感兴趣的读者可以自行查阅。

（编辑：ASP站长网）