继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

html2canvas - 解决办法之图片跨域导致的截图空白

xing_org1
关注TA
已关注
手记 23
粉丝 78
获赞 516

1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为

Access-Control-Allow-Origin:  *


2. 前端配置

var opts = {
    scale: scale,
    // 添加的scale 参数
    canvas: canvas,
    //自定义 canvas
    logging: false,
    //日志开关,便于查看html2canvas的内部执行流程
    width: width,
    //dom 原始宽度
    height: height,
    useCORS: true // 【重要】开启跨域配置
};

使用

let shareContent = document.getElementById('XXX');

html2canvas(shareContent,opts).then(function(canvas) {   //... })


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP