一、前言
最近在用html2canvas做网页截图功能。这个开源库使用很简单，代码也很方便，但难点在于跨域问题。比如说，我的一个页面中有图片也有文字，图片是来自于图片服务器的网络图片。此时我们要生成截图的话，需要有权限来操作网络图片，这就出现了跨域问题。
这篇博客主要是从php方向把网络图片转化为base64格式，从而避免图片跨域的出现。
二、html2canvas常见的跨域解决方案
1、修改html2canvas.js的源码部分
这部分是网络上一个大佬修改的，大家如果遇到这个问题的话，应该都能搜到那些文章。博主这里也引用了修改过的源码，但是毫无用处。
大致链接：
html2canvas截图如何解决跨域的问题？
代码分享：
//这部分是修改过的源码链接: /s/1d9DnX2L3xtgima01Ridi5A 密码: yhub
2、设置服务器的header头
这部分也是要看后端配合不配合的，如果配合的话，直接在被请求服务器方法的顶部加上：
//表明允许跨域访问Access-Control-Allow-Origin:你服务器的ip地址
参考链接：/c5113620/article/details/79132047
博主这里没有操作图片服务器的权限，所以就不提了。
3、设置php代理
在html2canvas开源库中，给出的有php代理代码。实话实说，我是看不懂这个有什么用。不过还是有人通过这种方式程成功实现跨域了的。
//新加一个proxy属性，并把你的代理文件引入进去。如果无效的话，可以通过:你的域名/代码文件路径，查看报错是什么html2canvas(dom, {"logging": true,"proxy":"{{asset('/html2canvasproxy.php')}}",//跨域支持canvas:canvas,background: "#fff",useCORS: true,onrendered: function (canvas) {}
github相关地址：/niklasvh/html2canvas-proxy/issues/2#
分享php代理文件：
链接: /s/1ytjrCBqQtdYDsUBmh6M_AA 密码: 5724
三、最后选择的跨域方案：转换图片为base64
以上提出的方案都是网友们使用的方案，我这边一个个的试了下，没有一个成功或者符合我的实际需求的。最后没办法了，博主想到用php把网络图片转换为base64编码的，这样就不存在跨域问题了。但是php没有直接转化的方法，毕竟网络图片不同于本地图片。
这篇文章介绍了为什么使用base64位的图片会不存在跨域问题：关于图片的Base64编码，你了解吗？
1、使用curl降网络图片转换为二进制图片流，并先保存在本地
//这里的path是我再本地项目中的临时存储路径：'upload/pictrue/xxx.png'//这个路径是要提前创建的，类似于一个空的模板，然后通过curl把二进制的图片流写进去//$url是网络图片的地址public function curl_file_get_contents($url,$path){$hander = curl_init();$fp = fopen($path,'wb');curl_setopt($hander,CURLOPT_URL,$url);curl_setopt($hander,CURLOPT_FILE,$fp);curl_setopt($hander,CURLOPT_HEADER,0);curl_setopt($hander,CURLOPT_FOLLOWLOCATION,1);curl_setopt($hander,CURLOPT_TIMEOUT,60);curl_exec($hander);curl_close($hander);fclose($fp);Return $path;}
这部分看我写的注释，这样就把网络图片转换为了本地图片。返回的是图片的路径
2、把本地图片转换为base64格式的
public function base64EncodeImage ($image_file) {$base64_image = '';$image_info = getimagesize($image_file);$image_data = fread(fopen($image_file, 'r'), filesize($image_file));$base64_image = 'data:' . $image_info['mime'] . ';base64,' . chunk_split(base64_encode($image_data));return $base64_image;}
这部分是把本地图片的路径当做参数，返回的是图片的base64编码。然后我们就可以用这个编码避免图片跨域问题了，哈哈。
四、html2canvas使用的详细代码
talk is simple,show me the code
var dom=$("#allContent"); //你要转变的domvar width = dom.width();var height = width*1.69;var type = "png";var scaleBy = 3; //缩放比例var canvas = document.createElement('canvas');canvas.width = width * scaleBy; //canvas的宽高都方法3倍canvas.height = height * scaleBy; canvas.style.width = width + 'px'; //生成图片时候再缩小回来，这样图片会清晰一些canvas.style.height = height + 'px';var context = canvas.getContext('2d');context.scale(scaleBy, scaleBy);html2canvas(dom, {"logging": true,"proxy":"{{asset('/html2canvasproxy.php')}}",//跨域支持canvas:canvas,background: "#fff",useCORS: true,onrendered: function (canvas) {var data = canvas.toDataURL("image/png");//生成的base64格式//data就是生成的base64码var id = document.getElementById("id").value;//下面就是存储生成的截图部分了，是自己的逻辑部分$.ajax({url: "你的业务逻辑路径",type: "post",dataType: "json",data: {id:id, data: data},success: function(r) {}});}});
以上就是使用html2canvas.js生成画布的过程。主要就是解决跨域的问题，其他的还好。curl这个工具真的很强大，本来php是没有解析网络图片能力的，通过curl，我们就可以折中实现我们的需求。
end
