年前的一个项目,要做一个H5截屏分享的功能,使用的是html2canvas插件,截图功能是实现了,但是跨域的图片死活不出来,

经过几天谷歌百度和不断的尝试,终于找到解决办法了,一共经历了让人心力憔悴的两个坑:

小坑:

  跨域的logo和分享的二维码都出不来,

1、需要在服务器IIS上的HTTP响应标头设置,最简单粗暴的方法就是全部设置成*,不过这样安全性也低,自己可以根据自己需求设置:

access-control-allow-credentials:true
Access-Control-Allow-Headers:*
access-control-allow-origin:*

2、在html2canvas添加参数useCORS设置:

html2canvas(document.getElementsByClassName('codediv')[0], {
useCORS: true,
allowTaint: false
}).then(function (canvas) {

          var url = canvas.toDataURL("image/png");
          var oA = document.createElement("a");
          oA.download = '测试截图';// 设置下载的文件名,默认是'下载'
          oA.href = url;
          document.body.appendChild(oA);
          oA.click();
          oA.remove(); // 下载之后把创建的元素删除

});

大坑:二维码显示了,logo时而显示时而不显示,绞尽脑汁:

解决方法:

1、需先将以上两步设置好

2、在img标签上设置 crossorigin="anonymous" 属性;

3、需要在img的src后加上参数(我就是一直卡在这,一直不能解决):

html2canvas截图问题,图片跨域导致截图空白的更多相关文章

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

    1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin:  * 2. 前端配置 var opts = { scale ...

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

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

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

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

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

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

  5. 解决html2canvas图片跨域合成失败的问题

    /** * 将图片转换为base64 * 解决html2canvas跨域合成失败的问题 */ var getBase64Image = function(src, cb) { var img = do ...

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

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

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

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

  8. Spring Boot+AngularJS中因为跨域导致Session丢失

    http://blog.csdn.net/dalangzhonghangxing/article/details/52446821 如果还在为跨域问题烦恼,请查看博主的 解决angular+sprin ...

  9. 关于微信小程序使用canvas生成图片,内容图片跨域的问题

    最近有个项目是保存为名片(图片),让用户发送给朋友或朋友圈,找了很多方案都不适用,绞尽脑汁之后还是选了使用canvas,但是用这玩意儿生成图片最大的缺点就是,如果你的内容中有图片,并且这个图片是通过外 ...

随机推荐

  1. STL中的string

    string常用函数 1.构造函数 string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c初始化 string类还支持默认构 ...

  2. zabbix 中文乱码

    环境 zabbix 3.4.7 centos 7.4 问题现象 zabbix 中文乱码     解决方法 1.先准备一个字体包    Windows路径 C:\Windows\Fonts\simkai ...

  3. 白嫖永久免费云服务器教程,永久免费虚拟主机、永久免费云数据库、搭建FTP服务器、服务器安装Linux / windows操作系统、服务器部署网站、宝塔一键部署多网站、独立ip、永久国内高速云服务器

    一.准备工作 1. 注册账号 声明:切记不可用服务器做违法的事情 申请地址:https://www.sanfengyun.com/ 图文教程地址:https://www.cnblogs.com/zwn ...

  4. SuperSlide之属性targetCell介绍

    禁用页面菜单js代码: <script type="text/javascript"> document.oncontextmenu=function(){ retur ...

  5. PHP配合JS导出Excel大量数据

    一般使用PHP导出Excel表格都会用PHPExcel,但是当遇到要导出大量数据时,就会导致超时,内存溢出等问题.因此在项目中放弃使用这种方式,决定采用前段生成Excel的方式来解决问题. 步骤如下: ...

  6. SpringMVC处理json的四个步骤

    导入相关的pom依赖 在springMVC的配置文件中开启MVC驱动,<mvc:annotation-driven /> 在处理ajax请求的方法上加上注解@ResponseBody 将要 ...

  7. 「雅礼集训 2017 Day4」洗衣服

    题目   点这里看题目. 分析   首先考虑只有洗衣机的情况.我们可以想到,当前洗衣任务结束越早的洗衣机应该被先用,因此可以用堆来动态维护.   再考虑有烘干机的情况.很显然,越晚洗完的衣服应该越早烘 ...

  8. centos7 hadoop 单机模式安装配置

    前言 由于现在要用spark,而学习spark会和hdfs和hive打交道,之前在公司服务器配的分布式集群,离开公司之后,自己就不能用了,后来用ambari搭的三台虚拟机的集群太卡了,所以就上网查了一 ...

  9. maven项目快速搭建SSM框架(一)创建maven项目,SSM框架整合,Spring+Springmvc+Mybatis

    首先了解服务器开发的三层架构,分配相应的任务,这样就能明确目标,根据相应的需求去编写相应的操作. 服务器开发,大致分为三层,分别是: 表现层 业务层 持久层 我们用到的框架分别是Spring+Spri ...

  10. flex弹性布局及其属性

    CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成. 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将 ...