feat: drop support for IE9

This commit is contained in:
Niklas von Hertzen 2021-08-09 18:31:10 +08:00
parent e429e0443a
commit eca5033705
6 changed files with 24 additions and 43 deletions

View File

@ -117,9 +117,6 @@ jobs:
name: iOS Simulator Safari 15 name: iOS Simulator Safari 15
targetBrowser: Safari_IOS_15 targetBrowser: Safari_IOS_15
xcode: /Applications/Xcode_13.0.app xcode: /Applications/Xcode_13.0.app
- os: windows-latest
name: Windows Internet Explorer 9 (Emulated)
targetBrowser: IE_9
- os: windows-latest - os: windows-latest
name: Windows Internet Explorer 10 (Emulated) name: Windows Internet Explorer 10 (Emulated)
targetBrowser: IE_10 targetBrowser: IE_10

View File

@ -3,7 +3,7 @@ html2canvas
[Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a) [Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master) ![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
[![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas) [![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
[![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas) [![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
@ -28,7 +28,8 @@ The library should work fine on the following browsers (with `Promise` polyfill)
* Firefox 3.5+ * Firefox 3.5+
* Google Chrome * Google Chrome
* Opera 12+ * Opera 12+
* IE9+ * IE10+
* Edge
* Safari 6+ * Safari 6+
As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported. As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

View File

@ -5,28 +5,28 @@ nextUrl: "/getting-started"
nextTitle: "Getting Started" nextTitle: "Getting Started"
--- ---
Before you get started with the script, there are a few things that are good to know regarding the Before you get started with the script, there are a few things that are good to know regarding the
script and some of its limitations. script and some of its limitations.
## Introduction ## Introduction
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.
The screenshot is based on the DOM and as such may not be 100% accurate to the real representation The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
as it does not make an actual screenshot, but builds the screenshot based on the information as it does not make an actual screenshot, but builds the screenshot based on the information
available on the page. available on the page.
## How it works ## How it works
The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements
there, which it then uses to build a representation of the page. In other words, it does not actually take a there, which it then uses to build a representation of the page. In other words, it does not actually take a
screenshot of the page, but builds a representation of it based on the properties it reads from the DOM. screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
As a result, it is only able to render correctly properties that it understands, meaning there are many As a result, it is only able to render correctly properties that it understands, meaning there are many
CSS properties which do not work. For a full list of supported CSS properties, check out the CSS properties which do not work. For a full list of supported CSS properties, check out the
[supported features](/features/) page. [supported features](/features/) page.
## Limitations ## Limitations
All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy) All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy)
for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas` for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas`
elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas. elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.
The script doesn't render plugin content such as Flash or Java applets. The script doesn't render plugin content such as Flash or Java applets.
@ -37,6 +37,6 @@ The library should work fine on the following browsers (with `Promise` polyfill)
- Firefox 3.5+ - Firefox 3.5+
- Google Chrome - Google Chrome
- Opera 12+ - Opera 12+
- IE9+ - IE10+
- Edge - Edge
- Safari 6+ - Safari 6+

View File

@ -48,12 +48,6 @@ module.exports = function(config) {
platform: 'iOS', platform: 'iOS',
sdk: '15.0' sdk: '15.0'
}, },
SauceLabs_IE9: {
base: 'SauceLabs',
browserName: 'internet explorer',
version: '9.0',
platform: 'Windows 7'
},
SauceLabs_IE10: { SauceLabs_IE10: {
base: 'SauceLabs', base: 'SauceLabs',
browserName: 'internet explorer', browserName: 'internet explorer',
@ -93,11 +87,6 @@ module.exports = function(config) {
version: '9.3', version: '9.3',
device: 'iPhone 6 Plus Simulator' device: 'iPhone 6 Plus Simulator'
}, },
IE_9: {
base: 'IE',
'x-ua-compatible': 'IE=EmulateIE9',
flags: ['-extoff']
},
IE_10: { IE_10: {
base: 'IE', base: 'IE',
'x-ua-compatible': 'IE=EmulateIE10', 'x-ua-compatible': 'IE=EmulateIE10',

View File

@ -12,7 +12,6 @@ export class CacheStorage {
} }
link.href = url; link.href = url;
link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
return link.protocol + link.hostname + link.port; return link.protocol + link.hostname + link.port;
} }

View File

@ -8,15 +8,14 @@ import {ScreenshotRequest} from './types';
// @ts-ignore // @ts-ignore
window.Promise = Promise; window.Promise = Promise;
const testRunnerUrl = location.href; const testRunnerUrl = location.href;
const hasHistoryApi = typeof window.history !== 'undefined' && typeof window.history.replaceState !== 'undefined';
const uploadResults = (canvas: HTMLCanvasElement, url: string) => { const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
return new Promise((resolve: () => void, reject: (error: string) => void) => { // @ts-ignore
// @ts-ignore return new Promise((resolve: () => void, reject: (error: any) => void) => {
const xhr = 'withCredentials' in new XMLHttpRequest() ? new XMLHttpRequest() : new XDomainRequest(); const xhr = new XMLHttpRequest();
xhr.onload = () => { xhr.onload = () => {
if (typeof xhr.status !== 'number' || xhr.status === 200) { if (xhr.status === 200) {
resolve(); resolve();
} else { } else {
reject(`Failed to send screenshot with status ${xhr.status}`); reject(`Failed to send screenshot with status ${xhr.status}`);
@ -62,21 +61,17 @@ testList
testContainer.onload = () => done(); testContainer.onload = () => done();
testContainer.src = url + '?selenium&run=false&reftest&' + Math.random(); testContainer.src = url + '?selenium&run=false&reftest&' + Math.random();
if (hasHistoryApi) { // Chrome does not resolve relative background urls correctly inside of a nested iframe
// Chrome does not resolve relative background urls correctly inside of a nested iframe try {
try { history.replaceState(null, '', url);
history.replaceState(null, '', url); } catch (e) {}
} catch (e) {}
}
document.body.appendChild(testContainer); document.body.appendChild(testContainer);
}); });
after(() => { after(() => {
if (hasHistoryApi) { try {
try { history.replaceState(null, '', testRunnerUrl);
history.replaceState(null, '', testRunnerUrl); } catch (e) {}
} catch (e) {}
}
document.body.removeChild(testContainer); document.body.removeChild(testContainer);
}); });