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

html2canvas - 解决办法之图片跨域导致的截图空白的更多相关文章

  1. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

  2. html2canvas截图问题,图片跨域导致截图空白

    年前的一个项目,要做一个H5截屏分享的功能,使用的是html2canvas插件,截图功能是实现了,但是跨域的图片死活不出来, 经过几天谷歌百度和不断的尝试,终于找到解决办法了,一共经历了让人心力憔悴的 ...

  3. JavaScript跨域总结与解决办法 什么是跨域

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  4. 解决Canvas.toDataURL 图片跨域问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1. ...

  5. 访问本地json文件因跨域导致的问题

    我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...

  6. 解决阿里云OSS跨域问题

    解决阿里云OSS跨域问题 现象 本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取.第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效. 错误信息 ...

  7. Vue-cli proxyTable 解决开发环境的跨域问题

    Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

  8. Access to Image at 'file:///Users canvas本地图片跨域报错解决方案

    1.设置跨域 添加跨域条件   crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 ...

  9. 我是如何一步步编码完成万仓网ERP系统的(七)产品库设计 3.品牌图片跨域上传

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

随机推荐

  1. C#常用数据类型间的转换

    数据类型有很多种,数据类型间的转换也是有很多的方法,如果不细心整理的话等到用的时候再查就会显得很浪费时间,所以决心整理出这篇博文.主要是讲解常用数据类型之间的转换方法以及常见数据类型所占字节数. 字节 ...

  2. 允许root远程登录Solaris

    注释掉:/etc/default/login文件中CONSOLE=/dev/console

  3. JUnit 3一个例子就懂

    JUnit is a simple framework to write repeatable tests. It is an instance of the xUnit architecture f ...

  4. Android技巧分享——如何用电脑下载在Google play中应用的apk文件

    [Android技巧分享系列] 1.Android技巧分享——让官方模拟器和genymotion虚拟机飞起来 2.Android技巧分享——如何用电脑下载在Google play中应用的apk文件 G ...

  5. 如何在eclipse中使用mvn clean install

    1.在Maven项目或者pom.xml上右键——>Run As ——>“Maven Build...”或者Run Configuration——>“Maven Build” 2.在“ ...

  6. VC6.0在win 8.1中的安装使用

    http://blog.csdn.net/liups/article/details/14646663 一.首先是win8.1的安装 本人选择的是win 8.1简体中文专业N版,文件名: cn_win ...

  7. 在Lua中计算含中文的字符串的长度

    --[[ @desc: 计算字符串字符个数 author:{author} time:-- :: --@inputstr: 源字符串 return 字符个数 ]] function getString ...

  8. Ubuntu下安装配置redis

    安装redis apt-get install redis-server 查看是否启动 ps -aux|grep redis 客户端连接 注: 安装Redis服务器,会自动地一起安装Redis命令行客 ...

  9. [CNN] What is Convolutional Neural Network

    Ref: 从LeNet-5看卷积神经网络CNNs 关于这篇论文的一些博文的QAC: 1. 基本原理 MLP(Multilayer Perceptron,多层感知器)是一种前向神经网络(如下图所示),相 ...

  10. 使用Socket抓取网页源码

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...