On the problem that the performance of cross-domain pictures drawn by canvas is different between the PC side and the mobile end.

one of my requirements is to use canvas to synthesize the product information and the QR code into a picture, in which the product picture is cross-domain and the nginx forward proxy is used.

the problem encountered is that Google, Firefox and Android browsers on the PC can generate pictures normally without reporting errors:

IOSsecurityErrorUCSafari:

nginx:

:

The

canvas.toDataURL () method behaves differently on the two terminals, which gives me a headache.
Note: I have also tried to configure CORS, for the server. The results can also be generated on PC, and the same error is reported on the mobile side.

what is the reason for this?
is there a solution?

Javascript html5
Mar.02,2021

I have done exactly the same function before, and then I asked the back-end (php) to write a method to convert cross-domain images into their own, and then I can easily generate

.

the backend code is roughly as follows: 

<?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;
?>

now that the proxy is used, it's not a CORS problem. I feel suspicious about the nesting of setInterval. Try to bring it out and see if it is wrong or not.

found the problem, not a cross-domain problem, because I used the foreignObject element in svg to facilitate text wrapping. This element is not allowed to be converted into pictures on ios because of security restrictions, so it runs normally on PC and Android, but reports SecurityError on IOS.

honestly write a method to calculate the text width, draw the text using canvas, and run it on ios.

I dug a big hole for myself, and I finally got out of it after staying in it for a few days.

Previous: The click event of the page written by the vue framework is invalid

Next: How to show a string of html type like html?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4937b-44d21.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4937b-44d21.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?