fix: set proxy for html2canvas

Author: ly525

back-end/h5-api/api/work/config/routes.json

@@ -1,5 +1,13 @@
 {
   "routes": [
+    {
+      "method": "GET",
+      "path": "/works/cors-proxy",
+      "handler": "Work.corsProxy",
+      "config": {
+        "policies": []
+      }
+    },
     {
       "method": "GET",
       "path": "/works",

back-end/h5-api/api/work/controllers/Work.js

@@ -1,4 +1,5 @@
 'use strict';
+const request = require('request');
 
 /**
  * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/controllers.html#core-controllers)
@@ -72,5 +73,8 @@ module.exports = {
     const pageJSON = await strapi.services.work.parsePSD(ctx.request.body.files.file);
     // eslint-disable-next-line
     ctx.body = pageJSON;
+  },
+  corsProxy: async (ctx) => {
+    ctx.body = request(ctx.query.url);
   }
 };

front-end/h5/src/utils/helper.js

@@ -12,7 +12,7 @@ export function takeScreenshot (selector = '.canvas-wrapper', fileName = `${+new
     // allowTaint: Whether to allow cross-origin images to taint the canvas
     // if you use allowTaint: true, the cors image will taint the canvas, and canvas.toDataURL won't work
     // 会对canvas造成污染，导致 canvas.toDataURL 无效
-    html2canvas(el, { allowTaint: true }).then(canvas => {
+    html2canvas(el, { proxy: '/works/cors-proxy' }).then(canvas => {
       // document.body.appendChild(canvas) use this line to test the generated canvas
       canvas.toBlob(blob => {
         const file = new window.File([blob], fileName, { type: 'image/png' })