html canvasan 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.
方法允许跨域使用图像和画布的方法是将以下内容添加到标头中−
access-control-allow-origin − * 的中文翻译为：访问控制允许来源 − *这将允许所有的图像和画布元素在跨源时使用。
example的中文翻译为：示例下面是一个完整的工作示例，演示如何允许跨域使用图像和画布。要运行它，只需在web浏览器中打开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' 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>
以上就是如何在html中允许跨域使用图像和画布？的详细内容。