移动端vue使⽤html2canvas的⼀些问题
1、业务需求：⽤户投保时保存全页⾯截图
2、截图插件：html2canvas
  使⽤npm或yarn（可以使⽤淘宝镜像）
npm install html2canvas
yarn add html2canvas
  在需要的页⾯引⼊html2canvas
import html2canvas from 'html2canvas'
  直接上代码
<div ref="imageTofile">
<!-- 页⾯内容 -->
</div>
<script>
import html2canvas from "html2canvas";
export default {
data() {
return {
...
}
},
methods: {
// 全屏截图
imgDownload() {
let _that = this;
// 获取需下载范围元素
let img = this.$refs.imageTofile;
// 图⽚⾼度
var w = ComputedStyle(img).width);
// 图⽚宽度
var h = ComputedStyle(img).height);
// 声明画布宽⾼
let canvas = ateElement("canvas");
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// 利⽤ html2canvas 下载 canvas
html2canvas(img, {
canvas: canvas,
useCORS: true, // 如果页⾯有跨域的图⽚，需要加上这个
scrollY: 0
}).then(function(canvas) {
let photoUrl = DataURL(); // base64图⽚地址
let conversions = _that.base64ToBlob(photoUrl, "image/png");
window.URL = window.URL || window.webkitURL; // blob对象转换为blob-url
let url = ateObjectURL(conversions);
console.log(url); // 图⽚路径 blob格式，主要是base64的图⽚格式太长，防⽌浏览器的url长度限制。script在html中的用法
});
},
base64ToBlob(urlData, type) {
let arr = urlData.split(",");
let mime = arr[0].match(/:(.*?);/)[1] || type;
// 去掉url的头，并转化为byte
let bytes = window.atob(arr[1]);
// 处理异常，将ascii码⼩于0的转换为⼤于0
let ab = new ArrayBuffer(bytes.length);
// ⽣成视图（直接针对内存）：8位⽆符号整数，长度1个字节
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
}
}
}
</script>
乍看⼀下好像没啥问题，实际操作你会发现以下⼏个问题
  1、⽩屏，只截到⼀部分
  这个问题是页⾯滚动的原因，导致截图⽩屏，解决⽅案就是截图之前跳到顶部document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
  2、页⾯宽⾼⽐例导致的截图只截了⼀部分
  这种情况是宽⾼⽐例的原因导致，解决⽅法是调整宽⾼的⽐例
// 声明画布宽⾼
let canvas = ateElement("canvas");
canvas.width = w * 4; // 乘了⼀个倍率
canvas.height = h * 3.; // 乘了⼀个倍率
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// 可能跟html5canvas的canvas的初始⼤⼩有关，这个倍率跟实际页⾯的宽⾼有关我的页⾯宽⾼是414*1946，具体是多少，需要去试。
如果⼤家有更好的⽅法，希望给我说⼀下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。