uniapp开发app使用html2canvas

实现代码

<template>
    <view>
        <view id="training-detail">
            <!-- 需要合成图片的dom -->
            <!-- 内部使用的图片都需要使用在线资源，不要使用背景图片 -->
        </view>
        <button @click="generateHandle">生成图片</button>
        <view
          :prop="canvasImageMsg"
          :change:prop="canvasImage.updateEcharts"
        ></view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
              canvasImageMsg: null
            }
        },
        methods: {
            // 触发生成图片事件
            generateHandle() {
              this.canvasImageMsg = 'generate'
            },
            // 生成图片后的回调函数
            receiveRenderData(base64) {
                console.log('图片的资源'，base64)
                this.canvasImageMsg = null
            }
        }
    }
</script>
<script lang="renderjs" module="canvasImage">
  import html2canvas from 'html2canvas'
  export default {
    methods: {
      generateImage(callback) {
        setTimeout(() => {
          const dom = document.getElementById('training-detail'); // 需要生成图片内容的 dom 节点
          html2canvas(dom, {
            width: dom.clientWidth, //dom 原始宽度
            height: dom.clientHeight,
            scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
            scrollX: 0,
            useCORS: true, //支持跨域
            // scale: 1, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
          }).then((canvas) => {
            const base64 = canvas.toDataURL('image/png');
            callback&&callback(base64);
          }).catch(err=>{})
        }, 300);
      },
      updateEcharts(newValue, oldValue, ownerInstance, instance) {
        // 监听 service 层数据变更
        if(newValue){
          this.generateImage((base64)=>{
            ownerInstance.callMethod('receiveRenderData', base64);
          })
        }
      }
    }
  }
</script>

ios兼容问题

1、更换html2canvas

更换下面链接的文件应该就可以了

链接:[link] (https://github.com/FEA-Dven/html2Canvas).

2、如果不行的话

更改html2cavas里面 两千五百多行代码(自己找一下)

case 2:
    Logger.getInstance(this.id).debug("Added image " + key.substring(0, 256));
        return [
            4 /*yield*/, 
            new Promise(function (resolve, reject) {
                var img = new Image();
                img.crossOrigin = '*';
                img.onload = function () { return resolve(img); };
                img.onerror = reject;
                //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
                if (isInlineBase64Image(src) || useCORS) {
                    img.crossOrigin = '*';
                }
                img.src = src+'?t='+new Date().getTime();
                if (img.complete === true) {
                    // Inline XML images may fail to parse, throwing an Error later on
                    setTimeout(function () { return resolve(img); }, 500);
                }
                if (_this._options.imageTimeout > 0) {
                  setTimeout(function () { return reject("Timed out (" + _this._options.imageTimeout + "ms) loading image"); }, _this._options.imageTimeout);
                }
        })
        ];