zoukankan      html  css  js  c++  java
  • 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>
      );
    };
    
    以梦为马
  • 相关阅读:
    后续阶段第二天
    后续阶段第一天
    冲刺第五天
    冲刺第四天
    冲刺第三天
    冲刺第二天
    第二阶段-冲刺第一天
    第一阶段项目总结
    冲刺(7)
    团队开发冲刺第一阶段_6
  • 原文地址:https://www.cnblogs.com/lsAxy/p/15623323.html
Copyright © 2011-2022 走看看