首页 > 其他分享 >file文件上传后 添加水印 并且生成file文件 使用formData上传

file文件上传后 添加水印 并且生成file文件 使用formData上传

时间:2023-09-26 09:33:17浏览次数:34  
标签:文件 const img 上传 file var document data

function hecheng (){
            
            // 创建一个canvas
            const d2 = testCanvas.getContext('2d');
            
            
            // 准备图片1
            const url = URL.createObjectURL(file.files[0]);
            var img = document.createElement("img");
            img.src = url;
            
            // 准备图片2
            const url1 = URL.createObjectURL(file1.files[0]);
            var img1 = document.createElement("img");
            img1.src = url1;
            
            setTimeout(()=>{
                d2.drawImage(img, 10, 10);
                
                d2.drawImage(img1, 10, 10);
                
                const base64 = testCanvas.toDataURL();
                
                let data = atob(base64.substring("data:image/png;base64,".length)),
                    asArray = new Uint8Array(data.length);
                
                for( let i = 0, len = data.length; i < len; ++i ) {
                    asArray[i] = data.charCodeAt(i);    
                }
                
                var file0 = new File(
                  [asArray.buffer],
                  'foo.png',
                  {
                    type: 'image/png',
                  }
                );
                
                const url = URL.createObjectURL(file0);
                
                var img2 = document.createElement("img");
                img2.src = url;
                document.body.appendChild(img2);
                
            }, 1000)
            
                
        }

 

标签:文件,const,img,上传,file,var,document,data
From: https://www.cnblogs.com/liao1992/p/17729386.html

相关文章

  • 利用Python对当前目录下xlsx文件数据绘制拆线图
    importpandasaspdimportxlwtimportosimportglobimportmatplotlib.pyplotaspltfromopenpyxlimportWorkbookfromopenpyxlimportload_workbookfrommatplotlibimportrcParams ##获取当前路径path=os.getcwd()##获取当前路径下(不包含子目录)的所有xlsx文件zx_w......
  • [888] How to get the directory of the current Python file
    TogetthedirectoryofthecurrentPythonfile,youcanusetheos.pathmoduleincombinationwiththe__file__attribute.Here'showyoucandoit:importos#GetthedirectoryofthecurrentPythonfilecurrent_directory=os.path.dirname(os.pat......
  • EMQX学习笔记:配置文件
    本文更新于2023-02-27,使用EMQX4.4.3。目录acl.confemqx.confplugins/emqx_auth_http.confplugins/emqx_auth_jwt.confplugins/emqx_auth_mongo.confplugins/emqx_coap.confplugins/emqx_management.confplugins/emqx_web_hook.conf官方文档:https://www.emqx.io/docs/zh/v4.4/co......
  • Chrome插件manifest.json文件详解
    {//扩展名称"name":"MyExtension",//版本。由1到4个整数构成。多个整数间用"."隔开"version":"1.0",//manifest文件版本号。Chrome18开始必须为2"manifest_version":2,//描述。132个字符以内"......
  • 创建文件系统2
    一:挂载文件系统(1)概述:当你完成磁盘系统分区并在分区中创建文件系统后,新的文件系统必须被挂载道LInux系统中才可以使用。挂载(mount)就是当使用系统中某个设备时,必须先将它们对应到Linux系统中的某个目录上,这个对应的目录叫做挂载点(mount_point)。通过这种对应操作,用户或程序才可以......
  • 解决vite不是内部或外部命令,也不是可运行的程序 或批处理文件
    要vite创建vue3.0项目的时候,到了最后一步npmrundev的时候出现了以下错误:‘vite’不是内部或外部命令,也不是可运行的程序或批处理文件。问题的原因是:缺少安装依赖这一步!vite不像node或cli,会自动帮助我们执行npmi(install)命令去下载相关依赖,需要我们手动下载解决问题输入......
  • Hadoop是什么? Hadoop是一个由Apache开发的开源分布式计算框架,它能够处理大规模数据并
    Hadoop是什么?Hadoop是一个由Apache开发的开源分布式计算框架,它能够处理大规模数据并行处理任务,支持大规模数据存储和处理。Hadoop的核心组件包括分布式文件系统HDFS和分布式计算框架MapReduce,它们使得Hadoop可以在廉价的硬件上并行地处理大量数据。Hadoop还包括很多相关的项目和子......
  • windows系统上的github项目的上传和下载
    通过把远程仓库文件克隆下来,再添加自己需要上传的文件,再上传到远程仓库。 1、下载git工具:https://gitforwindows.org/下载安装之后,右键鼠标会出现两个新选项,分别为[GitGUIHere],[GitBashHere] 2、进入GitHub首页,点击Newrepository新建一个项目仓库Re......
  • 2.ETC用户卡文件信息
    文件结构 .0016文件持卡人基本数据文件结构 0015文件卡内信息 0019文件复合消费过程文件 命令集 00A4选目录选1001:00A4000002100100A4选文件00表示按文件标识选择00表示一个或者仅有一个02表示后面内容的长度1001表示1001目录00B0读二进......
  • linux 文件权限
    1.查看文件权限2.rwx的意义3.改变文件属性与权限3.1rwx与4213.2改变文件权限:chmod3.3改变文件所属组群:chgrp3.4改变文件所有者:chownLinux下一切皆文件,Linux中所有内容都是以文件的形式保存和管理的,因此了解文件系统是学习Linux十分重要的一步。而Linux是一个多用户操作......