解决低版本ios使用html2canvas截图空白问题

最近做H5项目用html2canvas来截取保存当前页面的功能，然后在最新的ios版本的手机上一切正常，然而在ios10以下版本的手机拿不到截取的图片。

html2canvas(this.$refs.imageWrapper, {backgroundColor: null // 解决生成的图片有白边}).then(canvas => {let dataURL = canvas.toDataURL("image/png");let storeAs = "writing" + "/" + this.timeName() + "/" + this.getUuid() + "." + "png";this.imgFile = this.getBase64Img(dataURL);
});getBase64Img: function(file) {let fileName = "writing.png"; //图片名称var arr = file.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 File([u8arr], fileName, {type: mime});
}

this.imgFile = this.getBase64Img(dataURL); ios10以下结果为空，拿不到图片url。
所以根据低版本ios做了单独兼容性方法：

html2canvas(this.$refs.imageWrapper, {backgroundColor: null // 解决生成的图片有白边}).then(canvas => {let dataURL = canvas.toDataURL("image/png");let storeAs = "writing" + "/" + this.timeName() + "/" + this.getUuid() + "." + "png";if(this.ios > 9){this.imgFile = this.getBase64Img(dataURL);}else{ //低版本执行方法let bold = this.getBase64Img(dataURL);let file = this.blobToFile(bold, "fileName");}
});getBase64Img: function(file) {let fileName = "writing.png"; //图片名称var arr = file.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}if(this.ios > 9){return new File([u8arr], fileName, {type: mime});}else{ //低版本执行方法return new Blob([u8arr], {type: mime});}
},
//Blob方式获取图片方法
blobToFile: function(Blob, fileName) {Blob.lastModifiedDate = new Date();Blob.name = fileName;return Blob;
},//获取ios版本方法
isIos() {var str= navigator.userAgent.toLowerCase();var ver=str.match(/cpu iphone os (.*?) like mac os/);if(ver){let num = ver[1].replace(/_/g,".").split(".")[0]//console.log("你当前的Ios系统版本为：",num);this.ios = num}
}

判断一下ios版本，在根据高低版本进行不同方法执行就解决了。

解决低版本ios使用html2canvas截图空白问题相关推荐

android截图canvas为空,html2canvas截图空白问题的解决
最近在项目中遇到一个需求,需要提供网页截图的功能.百度下发现html2canvas很好用.那就试试吧. 资源下载地址使用方式项目使用的react组件开发方式.参照官方的说明文档getting-st ...
html转换成canvas一片空白,html2canvas截图空白问题怎么解决 html2canvas截图空白问题解决方法...
本篇文章小编给大家分享一下html2canvas截图空白问题解决方法,通过代码图文详细分析了问题及解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 项目使用的reac ...
html图片左侧留白,HTML+CSS入门如何解决图片跨域导致的截图空白
本篇教程介绍了HTML+CSS入门如何解决图片跨域导致的截图空白,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 后端支持:图片要是cdn上的地址,并且允许图片跨域 ...
AJAX---发送POST请求、Get请求、请求四步、解决低版本的缓存问题
目录一.readyState状态值的理解二.第一个AJAX请求详解发送AJAX四步发送Get请求解决低版本IE浏览器的AJAX的Get缓存问题 AJAX发送POST请求 AJAX案例:POS ...
如何将高版本服务器系统转为低版本,iOS高版本备份恢复到低版本系统的方法
一般来说,在更新iOS系统的时候我们都会建议大家先用iTunes对系统进行完整备份.但时不时都会有人偷懒,或者使用手机OTA升级而没有对系统备份,最终导致不满意新系统了,想降级却无备份可以恢复的尴尬局 ...
Ajax学习日志（七）—— 解决低版本IE浏览器的缓存问题
Ajax入门(七) 一.解决低版本IE浏览器的缓存问题 1.1) 低版本IE浏览器的缓存问题及解决方案 1.2)需了解的知识 1.3)在app.js同目录下新建一个txt文件 1.4)在app.js创 ...
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...
解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
android版本低无法安装微信,解决低版本安卓4.4.4无法安装微信的问题
今天给一台旧手机刷机之后,发现应用商店没有微信安装了,就算去官网下载安装包,安装的时候也提示不匹配系统,无法安装!这是因为微信的v7以上版本已经不支持安卓4.4.x系统了,直接抛弃低系统手机了,但是我 ...

解决低版本ios使用html2canvas截图空白问题

解决低版本ios使用html2canvas截图空白问题相关推荐

最新文章

热门文章