在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 關(guān)于canvas繪制跨域圖片在PC端和移動端表現(xiàn)不同的問題

關(guān)于canvas繪制跨域圖片在PC端和移動端表現(xiàn)不同的問題

我有一個需求是用canvas將商品信息和二維碼合成一張圖片,里面用到的商品圖片存在跨域,使用的nginx正向代理。

遇到的問題是代碼在PC端的谷歌、火狐瀏覽器以及安卓瀏覽器能正常生成圖片且無報錯:
圖片描述

但是在IOS移動端無法生成圖片報securityError,另外試驗了UC、Safari均不行,下面是微信瀏覽器:
圖片描述

另外貼上請求圖片的響應(yīng)頭,目前使用的nginx正向代理:
圖片描述

繪制圖片代碼:
圖片描述

canvas.toDataURL()方法在兩個終端表現(xiàn)不一樣,讓我很頭疼。。。
注:我也試過給服務(wù)器配置CORS,結(jié)果也是在PC上可以生成,在移動端報同樣的錯誤。

請問出現(xiàn)這種情況是什么原因?
有沒有解決辦法?

回答
編輯回答
誮惜顏

之前我有做過一模一樣的功能,后來讓后端(php)寫了一個方法把跨域圖片轉(zhuǎn)換成自己的,然后就可以輕松生成了

后端代碼大致如下:

<?php 
  header("Content-type: image/jpeg");
  $img = base64_decode($_GET['img']);
  $ch = curl_init();
  //設(shè)置選項,包括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);
  //執(zhí)行并獲取HTML文檔內(nèi)容
  $output = curl_exec($ch);
  //釋放curl句柄
  curl_close($ch);
  //打印獲得的數(shù)據(jù)
  print_r($output);
  exit;
?>
2018年6月29日 22:13
編輯回答
局外人

找到問題所在了,不是跨域的問題,原因在于因為我為了方便文字換行,使用了svg里的foreignObject元素,這個元素在ios上因為安全限制,不允許轉(zhuǎn)換成圖片,所以導(dǎo)致在PC、安卓上運(yùn)行代碼正常,在IOS上卻報SecurityError。

老老實實寫了個計算文字寬度的方法,使用canvas繪制文字,在ios上運(yùn)行就正常了。。。

自己給自己挖了個大坑,在坑里呆了幾天總算出坑啦

2018年3月12日 18:48
編輯回答
扯機(jī)薄

既然用了代理就不是CORS這塊的問題了。感覺setInterval的嵌套那里比較可疑,你試試拎出來看看還報錯不

2017年11月21日 17:54