mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
feat: drop support for IE9
This commit is contained in:
parent
e429e0443a
commit
eca5033705
3
.github/workflows/ci.yml
vendored
3
.github/workflows/ci.yml
vendored
@ -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
|
||||||
|
@ -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.
|
||||||
|
@ -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+
|
||||||
|
@ -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',
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user