手记

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

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) {   //... })


0人推荐
随时随地看视频
慕课网APP