h5拍照添加水印上传

最新推荐文章于 2025-03-31 22:00:00 发布

追逐春天的大孩子

最新推荐文章于 2025-03-31 22:00:00 发布

阅读量1.5k

点赞数

分类专栏：记录 js react

本文链接：https://blog.youkuaiyun.com/weixin_43709908/article/details/119389223

版权

本文介绍如何在H5中实现用户拍照时添加自定义水印，并将带有水印的照片上传到服务器的功能。内容包括使用canvas绘制水印、处理图片文件以及通过AJAX进行文件上传的相关技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 可预览图片  ++水印   名字 部门  当前时间
 */
import React, { Component } from 'react';
import { ImagePicker } from 'antd-mobile';
import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx'
import envconfig from "@/envconfig/envconfig";
import Carousel, { ModalGateway, Modal } from 'react-images'

import './index.less';
import { getUsrInfo } from '@/util/localUitl'
import moment from 'moment';

class PicturePreview extends Component {

  static defaultProps = {
    label: '',
    name: '',
    value: '',
    placeholder: '',
    readOnly: 0
  }

  state = {
    isShowModal: false,
  }

  toggleModal = () => {
    this.setState({
      isShowModal: !this.state.isShowModal,
    })
  }

  mapUrl = (url) => {
    if(url.includes('base64')) {
      return url;
    }
    return `${envconfig.pandaURL}/cityinterface/rest/services/filedownload.svc/download${url}`;
  }

  handleChange = (files, type) => {
    if(type === 'add') {
      const len = files.length;
      const newFile = files[len - 1];
//newFile 就是被上传文件的一些信息  和input 中text=file是一样的道理
      this.changeFileFormat(newFile)
      // this.uploadImage(newFile);
    } else if(type === 'remove') {
      const { value } = this.props;
      const urls = value.split(',');
      const removeUrl = urls.filter(url => !files.find(file => file.url === url));
      if(removeUrl.l

最低0.47元/天解锁文章