html2canvas图片生成file格式传送到后台服务器

1.首先将html保存为base64图片

html2canvas.js(可在各cdn进行下载)
eg: cdn.bootcss.com/html2canvas…

html2canvas百度一下代码很多，这里废话不多说，直接上代码
因为是将html里部分保存为图片，所以以下代码实现的是全屏画布上展示需要的部分

    var canvas1 = document.createElement("canvas");let _canvas = document.querySelector('.resDetailRight');//目标块var bodyW = parseInt(window.getComputedStyle(document.querySelector('html')).width)var bodyH = parseInt(window.getComputedStyle(document.querySelector('html')).height)var footH = parseInt(window.getComputedStyle(document.querySelector('.recommend-resume')).height) //多余部分console.log('canvas:', bodyW, bodyH)//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了canvas1.width = bodyW * 2;canvas1.height = (bodyH - footH) * 2;canvas1.style.width = bodyW + "px";canvas1.style.height = bodyH - footH + "px";//关于截取不全的操作，点击触发时需要从顶部获取，故在此将页面滚动到顶部然后在执行document.documentElement.scrollTop = 0;document.body.scrollTop = 0;var context = canvas1.getContext("2d");context.scale(2, 2);html2canvas(_canvas, {canvas: canvas1}).then(function (canvas) {//document.body.appendChild(canvas); //直接在底部展示该图file = canvas.toDataURL("image/png");//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载// document.querySelector(".down").setAttribute('href', canvas.toDataURL());});

2.将获取的图片转换为文件格式

    dataURLtoFile(dataURI, type) {let binary = atob(dataURI.split(',')[1]);let array = [];for(let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}return new Blob([new Uint8Array(array)], {type:type });}

3.通过ajax将文件传给后端服务器

    var formData = new FormData();let blob= dataURLtoFile(file, 'image/jpeg')let fileOfBlob = new File([blob], new Date()+'.jpg')formData.append('file', fileOfBlob);$.ajax({url: "/gateway/system/plug/resume/upload",type: "post",data: formData,headers:{'Authorization':'bearer '+sessionStorage.getItem("token")},contentType: false,processData: false,success: function (res) {let resumeInfo = res.result//sendResumeInfo(tabId, resumeInfo)checkRepeat(tabId, JSON.stringify(resumeInfo))},error: function (data) {alert("上传失败")}});

至此功能开发完成。

html2canvas图片生成file格式传送到后台服务器相关推荐

图片获取、格式转换与后台存储
后端是如何存储图片的呢? 将图片以独立文件的形式存储在服务器的文件夹中,再将该文件路径存入数据库中. 将图片转化为二进制流,直接存储到数据库的Image类型字段中. 第一种方式存储,则前端可以直接将存 ...
如何利用手机实现图片生成PDF格式，这个方法超实用！
说到图片,不管是男孩子还是女孩子都喜欢拍照,想必大家的手机相册中都用很多美照吧,不知道大家是否有遇到这样的情况,在有的地方,我们需要将图片的格式进行转换,那你是否找到了方法了?若是没有那就赶紧来看看这 ...
img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码
目录一.根据后端接口返回的URL下载和预览图片 1.调用下载图片函数实现下载图片 2.弹出另一个页面,实现预览图片. 3.不弹出另一个页面,实现下载/预览图片(iframe方式) 4.动态创建ifr ...
图片生成base64格式
生成 .png文件的Base64文件对于windows操作系统: 1. 打开命令提示. 2.将当前工作目录更改为存储 .png图片的文件夹. 3. 执行以下命令生成 Base64 表示: 示例的pn ...
Java毕业设计-图片生成MP4格式视频
需求? 因为项目需求,需要使用Java将数张图片合成mp4视频并播放,在网上查了很多,发现关于这方面的很少,还有一些比较麻烦的,最后找的这个比较简单容易实现的,合成短视频实际使用了,给视频添加音频并没 ...
将逐帧图片生成mp4格式视频——pyhton实现
import cv2 img = cv2.imread('/media/lc/LENOVO_USB_HDD/MOT/SimpleTrack/SimpleTrack/res_img/s0.png') i ...
后台服务器显示监控,后台服务器显示监控
后台服务器显示监控内容精选换一换公有云平台提供的云监控服务,可以对弹性负载均衡器的运行状态进行日常监控.您可以通过管理控制台,直接查看弹性负载均衡器的各项监控指标.由于监控数据的获取与传输会花费 ...
python使用fpdf生成发票格式的pdf文件包含：文字、图片logo、表格、条形码等；
python使用fpdf生成发票格式的pdf文件包含:文字.图片logo.表格.条形码等: pip install fpdf #python使用fpdf生成发票格式的pdf文件包含:文字.图片logo ...
php把网络图片转化为base64格式，解决html2canvas图片跨域问题
一.前言最近在用html2canvas做网页截图功能.这个开源库使用很简单,代码也很方便,但难点在于跨域问题.比如说,我的一个页面中有图片也有文字,图片是来自于图片服务器的网络图片.此时我们要生成截 ...

html2canvas图片生成file格式传送到后台服务器

1.首先将html保存为base64图片

2.将获取的图片转换为文件格式

3.通过ajax将文件传给后端服务器

html2canvas图片生成file格式传送到后台服务器相关推荐

最新文章

热门文章