react html2canvas ios9 ios10 以下截图为空问题小记录

感谢 https://blog.csdn.net/guozh90/article/details/79204061 博主这篇文章 给我提供了思路，最终解决了我的问题

修改后代码如下

import html2canvas from 'html2canvas';

import * as locStorage from './localstorages';

import { Toast } from 'antd-mobile';

export const scrollTop = () => {

if (( document. body. scrollTop || document. documentElement. scrollTop) != 0) {

document. body. scrollTop = document. documentElement. scrollTop = 0;

}

document. activeElement. blur();

}

/**

* that 当前页的上下文环境

* modelName 当前页面名臣

* emailValue 发送的邮箱地址

* printMethod 当前页发送打印的方法

* url 当前页打印方法的url地址

*/

export const html2canvasPic = ( that, modelName, emailValue, printMethod, url) => {

// Toast.loading('打印处理中...');

setTimeout(() => {

scrollTop();

var copyDom = document. body. cloneNode(); //克隆dom节点

var width = copyDom. offsetWidth; //dom宽

var height = copyDom. scrollHeight; //dom高

var scale = 2; //放大倍数

var canvas = document. createElement( 'canvas');

canvas. width = width * scale; //canvas宽度

canvas. height = height * scale; //canvas高度

var content = canvas. getContext( "2d");

content. scale( scale, scale);

var rect = copyDom. getBoundingClientRect(); //获取元素相对于视察的偏移量

content. translate(- rect. lfte, - rect. top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位

//发送打印当前页请求

html2canvas( document. body, {

useCORS: true,

allowTaint: true,

scale:scale,

canvas:canvas,

height: document. body. scrollHeight || document. documentElement. scrollHeight, //的到文档的高度，包括不可见部分

windowHeight: document. body. scrollHeight || document. documentElement. scrollHeight

}). then( function ( canvas) {

let imageBase64 = canvas. toDataURL( "image/png");

that. setState({

showAllIcon: true

});

let { userId } = that. props. login;

if (! userId) {

userId = locStorage. getUserId();

}

let req = {

data: {

userId: userId,

email: emailValue,

imageBase64: imageBase64,

modelName: modelName

},

url: url

}

that. props[ printMethod]( req);

}). catch(( e) => {

that. setState({

showAllIcon: true

});

Toast. fail( e, 3);

});

}, 500);

}