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
