Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to allow cross-origin use of images and canvas in HTML?
To allow cross-origin use of images and canvas, the server must include the appropriate CORS (Cross-Origin Resource Sharing) headers in its HTTP responses. These headers can be set to allow specific origins or methods, or to allow any origin 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.
Approach
The approach to allow cross-origin use of images and canvas is to add the following to the header −
Access-Control-Allow-Origin − *
This will allow all images and canvas elements to be used cross-origin.
Example
The following is a complete working example of how to allow cross-origin use of images and canvas. To run it, simply open the HTML file in a 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' width='200' height='200'>
<!-- 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' width='200' height='200'>
<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>
2K+ Views
