h5 生成海报踩坑

[Towry Wang]

用的库是 html2canvas，目前的版本已经很完善了，开发中遇到以下几个问题记录下：

1. 图片有302的情况下渲染有问题

解决办法：使用 axios 将图片转成 base64.

var fullUrl = 'some/strange/image/url';

return axios
    .get(fullUrl, {
      responseType: "blob"
    })
    .then(
      response => {
        /**
         * 对于失败的处理我们要返回空字符串，这样，调用方可以使用默认正常的图片.
         */
        if (!window.FileReader) {
          return "";
        }

        return new Promise(resolve => {
          const reader = new window.FileReader();
          reader.readAsDataURL(response.data);
          reader.onload = function() {
            const imageDataUrl = reader.result;
            return resolve(imageDataUrl);
          };
          reader.onerror = () => {
            resolve("");
          };
          reader.onabort = () => {
            resolve("");
          };
        });
      },
      () => ""
    );

2. 生成的图片显示模糊

解决方案：请不要使用 div 等元素渲染图片，直接使用 img 标签来渲染图片，可以配合 object-fit: cover 等 css 来调整样式。

3. html2canvas在 iPhone7Plus或者 iPhoneX 上不工作

解决方案：使用 "html2canvas": "1.0.0-rc.4"。 https://blog.csdn.net/qq_41227106/article/details/106764421

4. iPhoneX 或者其他 iPhone 手机第一次生成时，有些图片不显示

解决方案：预先加载这些图片。或者转成 base64。