ANTD upload组件上传大图片裁剪为两个小图片(方便图片加载)

思路说明

1、antd-img-crop插件

刚开始,看antd文档想用推荐的antd-img-crop插件来实现。优点:代码简单明了,没有神马难度,可以任意裁剪图片;效果与缺点:不符合目标,我只想自动把长图片裁切为几张小图片并上传,不需要用户自定义,自定义容易出现问题,gg。

2、blob数据流直接一分为2:

结果:切割后的数据流前半部分可以显示,后半部分无法正常显示,估计是暴力裁剪有的东西没有剪上,有大佬了解的可以说一下。

3、canvas:

效果:没啥问题,能实现,就是数据转换有一点点麻烦。

来吧,展示:

代码:

上传组件(照抄自定义上传):
html 复制代码
<Upload {...propsRule}>
                     <Button type="primary">选择文件</Button>
                   </Upload>
                   <div>
                     <Button
                       type="primary"
                       onClick={this.handleUpload.bind(this)}
                       disabled={fileList.length === 0}
                       loading={uploading}
                       style={{
                         marginTop: 16
                       }}
                     >
                    点击上传
                     </Button>
                   </div>
上传组件属性(propsRule):

dataURItoBlob 方法在百度搜到的,感谢原作者!需要用到的可以去搜一下,不同站的文章这里就不放链接了

js 复制代码
const propsRule = {
     accept: 'image/*',
     maxCount: 1,
     beforeUpload: async (file) => {
       if (file.size > 512 * 512) {
         file.status = 'error'
         file.response = '上传文件大小不能超过500kb'
         return false
       }
       try {
         const data = await this.handleFile(file)
         // 创建新的 Blob 对象
         const blob1 = this.dataURItoBlob(data[0])
         const blob2 = this.dataURItoBlob(data[1])
         // 你可以使用Blob对象进行进一步的处理,例如将其转换为File对象
         const file1 = new File([blob1], 'img1.png', { type: 'image/png' })
         const file2 = new File([blob2], 'img2.png', { type: 'image/png' })
         //  const url1 = URL.createObjectURL(file1)
         this.setState({ fileList: [file1, file2] })
         return false
       } catch (error) {
         console.error('Error:', error)
       }
     },
     fileList
   }
切割方法:
js 复制代码
 handleFile = async (file) => {
    return new Promise((resolve, reject) => {
      const imgBlob = new Image()
      imgBlob.src = URL.createObjectURL(file)
      imgBlob.onload = function() {
        const canvas = document.createElement('canvas')
        canvas.width = imgBlob.width
        canvas.height = imgBlob.height / 2
        const ctx = canvas.getContext('2d')
        // 切割图像
        ctx.drawImage(imgBlob, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height)
        const imageData1 = ctx.getImageData(0, 0, canvas.width, canvas.height)
        const img1 = canvas.toDataURL(imageData1)
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        // 切割图像
        ctx.drawImage(imgBlob, 0, imgBlob.height / 2, canvas.width, imgBlob.height / 2, 0, 0, canvas.width, canvas.height)
        const imageData2 = ctx.getImageData(0, canvas.height / 2, canvas.width, canvas.height / 2)
        const img2 = canvas.toDataURL(imageData2)

        // 数据处理完成后,调用 resolve 函数
        resolve([img1, img2])
      }
      imgBlob.onerror = function(error) {
        reject(error)
      }
    })
  }
上传方法:(略,随便一个post请求即可)
相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军2 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL3 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~3 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng3 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript
路人与大师3 小时前
【Mermaid.js】从入门到精通:完美处理节点中的空格、括号和特殊字符
开发语言·javascript·信息可视化