如何在HTML中允許跨域使用影像和畫布？
- 王林轉載
- 2023-08-30 16:25:06713瀏覽
為了允許跨網域使用影像和畫布，伺服器必須在其HTTP回應中包含適當的CORS（跨網域資源共用）頭。這些頭可以設定為允許特定的來源或方法，或允許任何來源存取資源。
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 shapes, text, and animations. The canvas is a great tool for shaating , and web applications.
方法
允許跨網域使用圖像和畫布的方法是將以下內容新增至標頭中−
Access-Control-Allow-Origin − *
的中文翻譯為：存取控制允許來源 − *
這將允許所有的圖像和畫布元素在跨來源時使用。
Example
的中文翻譯為：範例
下面是一個完整的工作範例，示範如何允許跨域使用圖像和畫布。要運行它，只需在網頁瀏覽器中開啟HTML檔案。
<!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="如何在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="如何在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>以上是如何在HTML中允許跨域使用影像和畫布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除