web端实现粘贴微信截图等截图

web端实现粘贴微信截图等截图

前言

通常我们使用截图软件, 作用都用于聊天框, 或者下载另存到本地, 那么能不能web也接收截图, 此处由富文本收到启发.

富文本是根据将标签添加contentEditable=true 这个属性, 来使标签区域可编辑.

但是这样会造成一个问题, 不管是文字,还是图片都可粘贴, 同时可以输入文本.故决定手搓一个.

这里利用onPause事件

code:

import { message } from 'antd';

const ImgPauseBox = ({
  children,
  handlePauseBlob,
  handlePauseBase64,
  style = {},
  className,
}) => {
  return (
    <div
      className={className}
      onPaste={(e) => {
        const cbd = e.clipboardData;
        if (!cbd.items.length) message.error('粘贴板无内容');

        for (let i = 0; i < cbd.items.length; i++) {
          const item = cbd.items[i];
          if (item.kind == 'file') {
            const blob = item.getAsFile();
            if (!blob || blob?.size === 0) {
              return;
            }
            handlePauseBlob && handlePauseBlob(blob);
            const reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function (e) {
              const base64 = e.target?.result;
              handlePauseBase64 && handlePauseBase64(base64);
            };
          } else {
            message.error('粘贴的内容非截图');
          }
        }
      }}
      style={style}
    >
      {children}
    </div>
  );
};