Home > Article > Web Front-end > How to allow cross-domain use of images and canvas in HTML?
How to allow cross-domain use of images and canvas in HTML?
- 王林forward
- 2023-08-30 16:25:06678browse
To allow cross-origin use of images and canvases, the server must include the appropriate CORS (Cross-Origin Resource Sharing) headers in its HTTP response. These headers can be set to allow specific sources or methods, or to allow any source to access the resource.
HTML Canvas
An HTML5 Canvas is a rectangular area on a web page that is controlled by JavaScript code. Anything can be drawn on the canvas, including images, shapes, text, and animations. The canvas is a great tool for creating games, graphics , and web applications.
method
The way to allow the use of images and canvases across domains is to add the following to the header −
Access-Control-Allow-Origin − *
’s Chinese translation is:Access Control Allowed Origin − *
This will allow all image and canvas elements to be used across origins.
The Chinese translation ofExample
is:Example
Below is a complete working example demonstrating how to allow the use of images and canvases across domains. To run it, just open the HTML file in your web browser.
<!DOCTYPE html>
<html>
<head>
<script>
function allowCrossOrigin(img, url) {
if (url.indexOf('https://') !== 0 && url.indexOf('http://') !== 0) {
// only allow cross-origin requests for images that are hosted on a secure
// (HTTPS/HTTP) server
return;
}
// create a new Image object and set its src property to the url of the image
// that we want to load
var image = new Image();
image.src = url;
// when the image has loaded, set the src property of the img element to the
// url of the image
image.onload = function() {
img.src = url;
};
}
</script>
</head>
<body>
<!-- define an img element and set its src property to a local image -->
<img id='local-image' src='https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png' style="max-width:90%" style="max-width:90%" alt="How to allow cross-domain use of images and canvas in HTML?" >
<!-- define another img element and try to set its src property to
an image that is hosted on a different domain -->
<img id='remote-image' style="max-width:90%" style="max-width:90%" alt="How to allow cross-domain use of images and canvas in HTML?" >
<script>
// get a reference to the img element with id="remote-image"
var remoteImage = document.getElementById('remote-image');
// set the src property of the img element to the url of the image that we want
// to load
remoteImage.src = 'https://i.natgeofe.com/n/2a832501-483e-422f-985c-0e93757b7d84/6_square.jpg';
// call the allowCrossOrigin function, passing in the img element and the url
// of the image that we want to load
allowCrossOrigin(remoteImage, 'https://i.natgeofe.com/n/2a832501-483e-422f-985c-0e93757b7d84/6_square.jpg');
</script>
</body>
</html>The above is the detailed content of How to allow cross-domain use of images and canvas in HTML?. For more information, please follow other related articles on the PHP Chinese website!