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>

Updated on: 13-Feb-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements