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