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. 命令查询职责分离模式(Command Query Responsibility Segregation,CQRS)

    浅谈命令查询职责分离(CQRS)模式 CQRS架构简介 对CQRS的一次批判性思考

  2. Radix-64编码简介

    本文介绍Radix-64编码,PGP和S/MIME均使用了Radix-64编码技术,rfc4880的Chap 6有关于Radix-64的详细描述. Radix-64编码基于Base64编码技术,由两部 ...

  3. spring oxm入门(包含demo)

    O/X Mapper 是什么? Spring 3.0 的一个新特性是 O/X Mapper.O/X 映射器这个概念并不新鲜,O 代表 Object,X 代表 XML.它的目的是在 Java 对象(几乎 ...

  4. 架构师素养及从小菜进阶架构(CTO)的书籍【转】

    CTO要了解无线技术/搜索/大数据/数据库等. -- 通常定义架构有几个层次,这包括业务架构.产品架构.应用架构和技术架构: 1.业务架构:描述一个企业围绕一个行业做了哪些业务,例如支付行业的收单.退 ...

  5. 两个大数组foreach,找出相同的key数量,所用的时间对比

    <?php function microtime_float() { list($usec, $sec) = explode(" ", microtime()); retur ...

  6. Java编程思想学习笔记——初始化与清理

    初始化 构造器保证初始化 构造器采用与类相同的名称. 默认构造器(default constructor):不接受任何参数的构造器,也叫无参构造器. 构造器也能带有形式参数,就能在初始化对象时提供实际 ...

  7. npm install mongoose错误解决

    今天安装mongoose一直报错,上图 具体的错误记录: info it worked if it ends with ok verbose cli [ 'C:\\Program Files\\nod ...

  8. 彻底搞清楚Java并发 (一) 基础

    多线程编程是为了让程序运行得更快,但是不是说,线程创建地越多越好,线程切换的时候上下文切换,以及受限于硬件和软件资源的限制问题 上下文切换 单核CPU同样支持多线程编程,CPU通过给每个线程分配CPU ...

  9. WebGL Matrix4(4*4矩阵库)

    Matrix4是由<<WebGL编程指南>>作者写的提供WebGL的4*4矩阵操作的方法库,简化我们编写的代码.源代码共享地址,点击链接:Matrix4源代码. 下面罗列了Ma ...

  10. 中企ITIL需软落地

    IT技术的发展对现代企业产生了深远的影响.企业信息化建设越深入,信息系统的规模越大,业务对IT系统的依赖性也越大,由此对IT服务的要求越高,如何 对繁多的IT技术进行有效的管理,最大程度地利用企业现有 ...