canvas将上传的图片文件绘制一个空心圆并往里加个图片，解决canvas绘制jpeg,jpg图片背景变黑为题

 async handleGetFile(file) {if (file.size / 1024 / 1024 > 15) {this.$Message.error(`文件大小最大为15M`)return}this.showUpLoadImage(file, file.name)},

//处理文件显示showUpLoadImage(file, fileName) {let reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {let fileType = reader.result.split(';')[0].split('/')[1]this.drawCanvas(reader.result, fileName, fileType)}},

drawCanvas(img, fileName, fileType) {let image = new Image()image.src = imgimage.onload = () => {let c = document.getElementById("canvas");c.height = 100c.width = 100let ctx = c.getContext("2d");ctx.drawImage(image, 25, 25, 50, 50);// 将canvas的透明背景设置成白色let imageData = ctx.getImageData(0, 0, c.width, c.height);for(let i = 0; i < imageData.data.length; i += 4) {// 当该像素是透明的，则设置成白色if(imageData.data[i + 3] === 0) {imageData.data[i] = 255;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;imageData.data[i + 3] = 255;}}ctx.putImageData(imageData, 0, 0);ctx.beginPath();ctx.arc(50,50, 47,0,2*Math.PI, false);ctx.lineWidth = 3ctx.strokeStyle = "#436BF6"ctx.stroke();ctx.closePath();let dataURL = c.toDataURL('image/' + fileType)let blob = this.dataURLtoBlob(dataURL)let file = this.blobToFile(blob, fileName)//将文件转换为formDate格式const formData = new FormData();file = new File([file], fileName)formData.append('file', file)this.$api.picture.addPicture(formData).then(res => {if (res.success) {this.imageList.push({id: res.obj.id,builtin: false,image: dataURL})this.$Message.success(res.msg || '图片上传成功')} else {this.$Message.error(res.msg || '图片上传失败')}})}},

 //将base64转换为blobdataURLtoBlob(dataurl) {let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},//将blob转换为fileblobToFile(theBlob, fileName){theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;},

效果图：

canvas将上传的图片文件绘制一个空心圆并往里加个图片，解决canvas绘制jpeg,jpg图片背景变黑为题相关推荐

Dropzone单文件上传、多文件上传、文件夹上传，springmvc接收，上传至Minio的一系列问题
0 前言 1.项目需要上传文件和大量的文件夹,页面只有一个input file标签会很丑,偶然间得知dropzone类库, 决定使用. 2. 项目后端采用springmvc接收,调用minio代码上传 ...
canvas生成图片上传服务器，网络图片生成图片文件
vue+canvas 生成签名图片并保存数据库 VUE+ElementUI 最近根据项目需求在用户生成订单的时候需要附上自己的签名照片,因为考虑到不能上传图片所以使用canvas画图功能. 而目前后 ...
java jsp filename filepath 图片上传_SpringMVC实现文件上传与下载
单文件上传: pom.xml: commons-io commons-io 1.3.2 commons-fileupload commons-fileupload 1.2.1 jstl jstl 1. ...
上传绕过php文件改为图片,文件上传漏洞另类绕过技巧及挖掘案例全汇总
文件上传漏洞作为获取服务器权限最快的方式,虽然相关资料很多,但很多人对上传校验方式.如何针对性绕过检测.哪种上传和解析的场景会产生危害等还是比较模糊.本文作一些阐述,然后补充一些除了上传webshel ...
JAVA如何实现将用户上传的PDF文件转换成图片并返回给用户
很多曾经攻克过的难题都没有及时记录并分享,觉得有些可惜.趁着现在还单身,头还没秃,精力也还算旺盛,我便整理出一些自己曾经挑灯夜战.独立实现的还算有些成就感的项目需求,记录在个人博客上,希望能给拥有相同 ...
php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
Python监控目录文件夹，并使用SFTP上传目录及文件到linux服务器
Python 扫描监控本地文件夹并进行超大文件上传方案1:WebUploader大文件分块多线程并发上传方案2:watchdog目录文件夹监控,paramiko STFP上传服务器方案3:优化2 ...
文件上传 java web_JavaWeb 文件上传下载
1. 文件上传下载概述 1.1. 什么是文件上传下载所谓文件上传下载就是将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下 ...
php 上传文件漏洞,【文件上传】PHP文件上传漏洞
0x01 文件上传漏洞文件上传漏洞顾名思义就是用户上传一个可执行的脚本文件,获得了执行服务器端命令的能力.通常,文件上传是getshell最常用.最直接的方式了.但是,文件上传本身是一个正常的业务需 ...

canvas将上传的图片文件绘制一个空心圆并往里加个图片，解决canvas绘制jpeg,jpg图片背景变黑为题

canvas将上传的图片文件绘制一个空心圆并往里加个图片，解决canvas绘制jpeg,jpg图片背景变黑为题相关推荐

最新文章

热门文章