关于canvas绘制跨域图片在PC端和移动端表现不同的问题

Question

我有一个需求是用canvas将商品信息和二维码合成一张图片，里面用到的商品图片存在跨域，使用的nginx正向代理。

遇到的问题是代码在PC端的谷歌、火狐浏览器以及安卓浏览器能正常生成图片且无报错：

但是在IOS移动端无法生成图片报securityError，另外试验了UC、Safari均不行，下面是微信浏览器：

另外贴上请求图片的响应头，目前使用的nginx正向代理：

绘制图片代码：

canvas.toDataURL()方法在两个终端表现不一样，让我很头疼。。。
注：我也试过给服务器配置CORS，结果也是在PC上可以生成，在移动端报同样的错误。

请问出现这种情况是什么原因？
有没有解决办法？

Answer 1

找到问题所在了，不是跨域的问题，原因在于因为我为了方便文字换行，使用了svg里的foreignObject元素，这个元素在ios上因为安全限制，不允许转换成图片，所以导致在PC、安卓上运行代码正常，在IOS上却报SecurityError。

老老实实写了个计算文字宽度的方法，使用canvas绘制文字，在ios上运行就正常了。。。

自己给自己挖了个大坑，在坑里呆了几天总算出坑啦

Answer 2

之前我有做过一模一样的功能，后来让后端（php）写了一个方法把跨域图片转换成自己的，然后就可以轻松生成了

后端代码大致如下：

<?php 
  header("Content-type: image/jpeg");
  $img = base64_decode($_GET['img']);
  $ch = curl_init();
  //设置选项，包括URL
  curl_setopt($ch, CURLOPT_URL,$img );
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch,  CURLOPT_FOLLOWLOCATION, 1); // 302 redirect
  curl_setopt($ch, CURLOPT_HEADER, 0);
  //执行并获取HTML文档内容
  $output = curl_exec($ch);
  //释放curl句柄
  curl_close($ch);
  //打印获得的数据
  print_r($output);
  exit;
?>

Answer 3

既然用了代理就不是CORS这块的问题了。感觉setInterval的嵌套那里比较可疑，你试试拎出来看看还报错不