html2canvas 电脑端看正常 手机端空白的问题

今天我们潘大大要求将html转化成一个图片

使用html2canvas 引入方式我就不多说了 很多博客都有 这里主要讲为啥手机端会显示空白

        var shareContent = document.getElementById(`r${index}`)
        html2Canvas(shareContent,{
          allowTaint:true,
          useCORS: true, // 允许图片跨域
          taintTest: true, // 在渲染前测试图片
          timeout: 500 // 加载延时
        }).then((canvas)=>{
        this.htmlUrl = canvas.toDataURL()
        })

vue项目中使用 在电脑端发现成功 在手机测试一直是空白 可把我愁坏了 在官方文档看到这样一句话

The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM

大致的意思就是说 根据手机的RAM不同 产生的图片的像素不同 可能是手机的原因所导致的。正好我使用的是IOS

在仔细阅读文档后发现 有一个 scale 这个参数 window.devicePixelRatio

The scale to use for rendering. Defaults to the browsers device pixel ratio.

        var shareContent = document.getElementById(`r${index}`)
        html2Canvas(shareContent,{
          allowTaint:true,
          scale: 0.7,
          useCORS: true, // 允许图片跨域
          taintTest: true, // 在渲染前测试图片
          timeout: 500 // 加载延时
        }).then((canvas)=>{
        this.htmlUrl = canvas.toDataURL()
        })

加上完工！ 整了半天真鸡儿难受啊~~~