How to allow cross-domain use of images and canvas in HTML?-HTML Tutorial-php.cn

Table of Contents

HTML Canvas

method

Access-Control-Allow-Origin − *

Access Control Allowed Origin − *

Example

Home

Web Front-end

HTML Tutorial

How to allow cross-domain use of images and canvas in HTML?

王林

Aug 30, 2023 pm 04:25 PM

html image Cross domain

How to allow cross-domain use of images and canvas in HTML?

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 of

Example

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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn