html2canvas跨域问题的简单解决方法
本文所阐述的部分重要前提如下:
- 项目域名:www.yaosir.com
- 图片访问采用nginx做静态资源映射
- 页面访问地址:www.yaosir.com/index.html(80端口)
- 图片访问地址:www.yaosir.com:9000/xyz/20170731220912.png
- html2canvas版本号:0.5.0-beta3(注意版本,新版本语法不一致)
写在前面的话:
- 感谢大家
感谢每一位关注此问题的同学,让我有动力去不断完善这篇博客。
请不了解跨域问题的童鞋移步到这个链接(同源策略):
http://www.cnblogs.com/chenshishuo/p/4919224.html - 一个想法
今天在给一位同学解决问题的时候突然有一个想法,写在这里与大家讨论:
如果你要访问的是别人的图片,比如腾讯的头像图片,能不能借助nginx等工具,或者写一个服务,通过代理的方式去访问,然后本地只需要访问你的本地服务,这样你跨域请求就可以被你自己的服务拦截,因为你对自己的服务可以添加权限,也就是自定义header,这样能否曲线救国,解决跨域截图问题。 - 一个倡议
同时,我也想做一个倡议,因为本人不擅长前端,只懂一些基础知识,现在也忘的差不多了,希望使用html2canvas插件的前端同学能写一篇介绍其工作原理的博客,让更多的同学知其然,更知其所以然。谢谢!!!
好戏就要开始了
修改nginx配置文件:(增加这一行,别忘记重启nginx服务)
add_header Access-Control-Allow-Origin *;
需要说明的是,此处请根据需求去配置,如果配置为 * 则不安全 , 具体配置可参考以下代码:
修改 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);
}
});
});
划重点
- useCORS:true 这个参数很重要,没有配置的话,依旧是不能解决问题的;
- 上述关于截图效果清晰度的代码,经过本人测试,效果并不是太好,请谨慎采纳;
- 请注意在解决跨域问题上,参数的配置很重要,有时候多一个参数或者少一个参数都会产生影响
- (重要)切记allowTaint和useCORS这两个参数不能共存,本文使用的参数为:useCORS:true
- 根据现有的解决方案大致有两种:
(1).在跨域的服务器上设置header设置为允许跨域请求。
(2).借助代理脚本获得外域图片的 base64 编码后的字符串
(备注):本文中,由于作者非专业前端开发人员, 采用的是第一种方法,在服务器上设置自定义header,允许跨域请求。- 如果你是java或者php提供的图片访问服务,那么设置自定义header,允许跨域访问的方法,请参考此链接:
http://blog.csdn.net/enter89/article/details/51205752
本文完,如有其他问题,或者需要代码的,请联系作者:QQ 2782072647,作者邮箱:yaosir1993@qq.com (近期马上面临就要毕业找工作了,可能会比较忙,请大家理解,如果有大数据相关岗位向我推荐的,本人不胜感激)
本文最新修改日期:2018.06.25