首页 > 其他分享 >Element-UI上传时修改上传图片的宽高

Element-UI上传时修改上传图片的宽高

时间:2024-06-20 16:56:03浏览次数:27  
标签:canvas const image Element UI blob file 上传

// 上传前
beforeUpload(file) {
  // 创建一个Image对象
  const image = new Image();
  // 设置图片的src为选中文件的对象url
  image.src = URL.createObjectURL(file);
  return new Promise((resolve, reject) => {
    image.onload = () => {
      // 设置想要的图片宽度和高度
      const width = 100;
      const height = 200;
      // 创建一个Canvas对象
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      // 设置Canvas的宽高
      canvas.width = width;
      canvas.height = height;
      // 绘制图片
      ctx.drawImage(image, 0, 0, width, height);
      // 将Canvas转换为blob数据
      canvas.toBlob(blob => {
        if (blob) {
          // 使用新的blob对象替换原有的文件对象
          file = new File([blob], file.name, {
            type: 'image/png',
          });
          // 继续上传流程
          resolve(file);
        } else {
          reject(new Error('Canvas conversion error'));
        }
      }, 'image/png');
    };
    image.onerror = reject;
  });
},

 

标签:canvas,const,image,Element,UI,blob,file,上传
From: https://www.cnblogs.com/chensv/p/18258974

相关文章

  • vs code 搭建 vue 3.0+Element-ui
    前言根据上一篇文章,通过vue-cli3.0创建了一个vue项目 https://www.cnblogs.com/FTAH/p/12427997.html 1.在当前项目中加入Element-ui前端框架1.首先在官方网站的这一页我们发现要安装框架 https://element.eleme.cn/#/zh-CN/component/installation 注意这里提供了......
  • buildroot --- 新添加一个 package(应用)
    参考资料:https://buildroot.org/docs.html buildroot-slides.pdf章节 IntegratingnewpackagesinBuildroot  以下基于RK3308SDK(与SDK关系不大,其他SDK类似) 在app文件夹下新建个文件夹wifitest,里面新建两个文件main.c#include<stdio.h>intmain(int......
  • Vue 3 + Element Plus实现PC和移动端兼容的技术探讨
    在现代Web开发中,实现PC端和移动端的兼容性已经成为一个必备的技能。Vue3作为一款流行的前端框架,结合ElementPlus这个优秀的UI组件库,为我们提供了丰富的工具和解决方案。在本文中,我们将探讨如何使用Vue3和ElementPlus来实现PC和移动端的兼容性,并结合vh、vw等单位实现响应......
  • 银河麒麟v10(Sword)(aarch64架构)安装zhongkui-waf
    银河麒麟v10(Sword)(aarch64架构)安装zhongkui-waf系统:KylinLinuxAdvancedServerreleaseV10(Sword)waf官网地址:https://github.com/bukaleyang/zhongkui-waf需要安装的组件:OpenResty、ZhongKui、libmaxminddb和geoipupdate官方提供了install.sh脚本可以安装,但是脚本......
  • burpsuite学院之api测试
    API(应用程序编程接口)使软件系统和应用程序能够进行通信和共享数据。API测试非常重要,因为API中的漏洞可能会破坏网站的机密性、完整性和可用性的核心方面。所有动态网站都由API组成,因此SQL注入等经典Web漏洞可以归类为API测试。在本主题中,我们将教您如何测试网站前端未充......
  • zhongkui-waf具体配置说明
    zhongkui-waf具体配置说明Zhongkui-WAF内置了管理界面,但你依然可以通过直接修改相应配置文件来进行自定义配置。Zhongkui-WAF的基本配置在/conf/zhongkui.conf文件中,你可以对它进行修改。ip黑名单列表可以配置在/conf/zhongkui.conf文件中,也可以配置在path-to-zhongkui-waf/rul......
  • 203. Remove Linked List Elements
    Giventheheadofalinkedlistandanintegerval,removeallthenodesofthelinkedlistthathasNode.val==val,andreturnthenewhead.Example1:Input:head=[1,2,6,3,4,5,6],val=6Output:[1,2,3,4,5]Example2:Input:head=[],val=......
  • 使用Element-plus的消息组件(ElMessage或ElNotification)时,出现z-index异常,导致被遮挡
    Nuxt3中使用ElementPlus的消息组件(ElMessage或ElNotification)时,出现z-index异常,导致被遮挡。背景介绍:我的页面中已经弹出了两个el-drawer组件,此种情况下我需要弹出一个提示信息。无论我是使用ElMessage,还是使用ElNotification都存在相同的问题,就是"遮罩层"给遮挡住以下......
  • 【4月27日RPA公开课UiPath圆满结束】掌握验证码自动登录技巧,实现高效自动化
    在数字化时代,自动化已成为提高工作效率、降低成本的必备工具。而RPA(RoboticProcessAutomation,机器人流程自动化)技术正是其中的佼佼者。为了帮助更多学员掌握RPA技术,RPA学习天地于4月27日举办了一场别开生面的公开课,主题为“如何实现各种验证码的自动登录”。   本次公开......
  • 基于uni-app和图鸟UI的智慧校园圈子小程序开发实践
    摘要:随着教育信息化和“互联网+教育”的快速发展,智慧校园建设已成为推动校园管理现代化、提高教育教学质量的重要手段。本文介绍了基于uni-app和图鸟UI开发的智慧校园圈子小程序,旨在通过一站式服务、个性化定制、数据互通和安全可靠等特点,为师生提供便捷、高效的校园生活体验......