html2canvas跨域问题的简单解决方法

html2canvas跨域问题的简单解决方法

本文所阐述的部分重要前提如下:

  • 项目域名:www.yaosir.com
  • 图片访问采用nginx做静态资源映射
  • 页面访问地址:www.yaosir.com/index.html(80端口)
  • 图片访问地址:www.yaosir.com:9000/xyz/20170731220912.png
  • html2canvas版本号:0.5.0-beta3(注意版本,新版本语法不一致)

写在前面的话:

  1. 感谢大家
    感谢每一位关注此问题的同学,让我有动力去不断完善这篇博客。
    请不了解跨域问题的童鞋移步到这个链接(同源策略):
    http://www.cnblogs.com/chenshishuo/p/4919224.html
  2. 一个想法
    今天在给一位同学解决问题的时候突然有一个想法,写在这里与大家讨论:
    如果你要访问的是别人的图片,比如腾讯的头像图片,能不能借助nginx等工具,或者写一个服务,通过代理的方式去访问,然后本地只需要访问你的本地服务,这样你跨域请求就可以被你自己的服务拦截,因为你对自己的服务可以添加权限,也就是自定义header,这样能否曲线救国,解决跨域截图问题。
  3. 一个倡议
    同时,我也想做一个倡议,因为本人不擅长前端,只懂一些基础知识,现在也忘的差不多了,希望使用html2canvas插件的前端同学能写一篇介绍其工作原理的博客,让更多的同学知其然,更知其所以然。谢谢!!!

好戏就要开始了

  1. 修改nginx配置文件:(增加这一行,别忘记重启nginx服务)
    add_header Access-Control-Allow-Origin *;
    需要说明的是,此处请根据需求去配置,如果配置为 * 则不安全 , 具体配置可参考以下代码:
    这里写图片描述

    参考链接地址:https://www.cnblogs.com/zzw1986/p/5906600.html

  2. 修改 index.html文件:(以下两种方式任选其一去参考修改)
    (1).经过处理的效果,清晰一点(代码来自于网络,此处表示感谢,但出处忘记了,请见谅) (代码在下方)

$(function(){
    var w = $(".ht0").width();
    var h = $(".ht0").height();
    var canvas = document.createElement("canvas");
    canvas.width = w * 2;
    canvas.height = h * 2;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    var context = canvas.getContext("2d");
    context.scale(2,2);
    html2canvas($(".ht0"), {
        canvas: canvas,
        useCORS:true,
        logging:true,
        onrendered: function(canvas) {
            var url = canvas.toDataURL(); 
            var img = new Image();
            img.src = url;
            $('.ht2').append(img);     
        }
    });

(2).这是没有经过处理的,截图会很模糊 (官网的例子)

$(function(){
     html2canvas($(".ht0"), {
         useCORS:true,
        logging:true,
     onrendered: function (canvas) {  
         var url = canvas.toDataURL(); 
         var image = new Image();  
         image.src = url;  
         $('.ht3').append(image);      
       }  
    });
});

划重点

  1. useCORS:true 这个参数很重要,没有配置的话,依旧是不能解决问题的;
  2. 上述关于截图效果清晰度的代码,经过本人测试,效果并不是太好,请谨慎采纳;
  3. 请注意在解决跨域问题上,参数的配置很重要,有时候多一个参数或者少一个参数都会产生影响
  4. (重要)切记allowTaint和useCORS这两个参数不能共存,本文使用的参数为:useCORS:true
  5. 根据现有的解决方案大致有两种:
    (1).在跨域的服务器上设置header设置为允许跨域请求。
    (2).借助代理脚本获得外域图片的 base64 编码后的字符串
    (备注):本文中,由于作者非专业前端开发人员, 采用的是第一种方法,在服务器上设置自定义header,允许跨域请求。
  6. 如果你是java或者php提供的图片访问服务,那么设置自定义header,允许跨域访问的方法,请参考此链接:
    http://blog.csdn.net/enter89/article/details/51205752
    这里写图片描述
    本文完,如有其他问题,或者需要代码的,请联系作者:QQ 2782072647,作者邮箱:yaosir1993@qq.com (近期马上面临就要毕业找工作了,可能会比较忙,请大家理解,如果有大数据相关岗位向我推荐的,本人不胜感激)
    本文最新修改日期:2018.06.25
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页