IE10 vue SCRIPT5022: SecurityError

vue中使用 particles.js，IE10下报错SCRIPT5022: SecurityError ，粒子背景显示成这样

原因是 对canvas使用toDataURL时出现 "SCRIPT5022: SecurityError" 错误。

找到particles.js，将toDataURL这行注释掉，换成 XMLHttpRequest 方式即可：

pJS.fn.vendors.exportImg = function() {

    // window.open(pJS.canvas.el.toDataURL('image/png'), '_blank')

    var xhr = new XMLHttpRequest()

    xhr.onload = function() {

      var url = URL.createObjectURL(this.response)

      pJS.canvas.el.src = url



      URL.revokeObjectURL(url)

    }

    xhr.open('GET', 'image/png', true)

    xhr.responseType = 'blob'

    xhr.send()

  }

 particles-js  不能使用100%高度，自己计算动态赋值高度即可

<template>
  <div class="particles-container">
    <div id="particles-js" />
  </div>
</template>

<script>
import './particles.js'
import particlesConfig from './particles.json'
export default {
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    document.querySelector('#particles-js').style.height = document.body.scrollHeight + 'px'
    this.init()
  },
  methods: {
    init() {
      window.particlesJS('particles-js', particlesConfig)
      document.body.style.overflow = 'hidden'
    }
  }
}
</script>

<style lang="scss" scoped>
#particles-js{
  width: 100%;height:100%;
  background:url('/images/bg_login.png') no-repeat;
  background-size: cover;
}
</style>

 

改后IE浏览器终于正常显示。

参考文章：https://segmentfault.com/a/1190000011382499