html2canvas生成图片地址Base64格式转成blob在转成file(二进制)可正常发送(保姆教程,复制粘贴可用)

开始:                                                  最终结果:          

 

                                       

1. html2canvas方法生成的图片地址已Base64编码形式放在img标签src中可直接展示生成的图片(注意页面标签获取位置,还有个setTimeout页面渲染需要时间)

setTimeout(function () {var result = {};var htmlContent = document.getElementById("cockpit-drag");html2canvas(htmlContent,{background:`${htmlContent.style.backgroundImage}`,useCORS: true,// height:'100%',// scale: 2, // 处理模糊问题// dpi: 300, // 处理模糊问题}).then(function (canvas) {var imgData = canvas.toDataURL('image/png');var img = document.createElement("img");img.src = imgData;console.log(img);document.body.appendChild(img);
},3000)

2. 直接发给后端存储也可以  但是不严谨而且 Base64编码很长,有一个文件那么长  (正常已二进制file流的形式传输),所以我们要把Base64编码变成二进制流的形式,也是查了很多资料,踩了很多坑,做了很多尝试,最终成功和大家分享一下

   2-1. 需要先把生成的Base64编码转成blob(查了很多,网上这个方法都很统一,所以不会出大问题,以至于这个blob是什么不太懂 , 能用就行呀)

下边是var一个:blob方法 ↓↓↓↓↓↓↓↓↓↓↓↓

  var dataURLtoBlob =   function (dataurl){var 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 })}

在这个位置调用   ↓↓↓↓↓↓↓↓↓↓↓↓

        2-2. 再把生成的blob转成二进制流(查了很多,网上这个方法都很杂,所以当时很蒙,只能不断尝试,各种踩坑,最终功夫不负有心人)

把blob转成二进制流的方法(这个东西打印有自己的方法,log打印不出来,想提升的同学再去多查查吧,今天不在这里说了

const formData = new FormData()formData.append('file',blob) 

直接写在这个位置就能用  ↓↓↓↓↓↓↓↓↓↓↓↓

OK,现在二进制流已生成 ,万事俱备(直接把formData作为参数传进接口里就可以用了)

接下来老规矩上完整代码  复制粘贴可用的(我用的是angular项目所以比较老,自己改一下红色方框位置,放接口就好)

图例:

代码:可复制

setTimeout(function () {var result = {};var htmlContent = document.getElementById("cockpit-drag");html2canvas(htmlContent,{background:`${htmlContent.style.backgroundImage}`,useCORS: true,// height:'100%',// scale: 2, // 处理模糊问题// dpi: 300, // 处理模糊问题}).then(function (canvas) {var imgData = canvas.toDataURL('image/png');var blob = dataURLtoBlob(imgData);const formData = new FormData()formData.append('file',blob) var xmlhttp = new XMLHttpRequest();xmlhttp.open("POST", url_+"dashboard/uploadImage", false);xmlhttp.send(formData);$scope.$apply(function () {$scope.persistFinish = true;});//   var img = document.createElement("img");//   img.src = imgData;// console.log(img);//   document.body.appendChild(img);});}, 3000)

大功告成,在大前端的路上又有点进步