wordpress 文章固定链接插件,太原seo排名,六安论坛招聘信息,网络公司网站开始: 最终结果: 1. html2canvas方法生成的图片地址已Base64编码形式放在img标签src中可直接展示生成的图片(注意页面标签获取位置,还有个setTimeout页面渲染需要时间)
setTimeout(function () {var result {};v…开始: 最终结果: 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)
大功告成,在大前端的路上又有点进步
