HTML <img> 标签crossrigin属性

<img>标签crossrigin属性定义和用法

允许来自允许跨源访问第三方站点的图像与canvas一起使用

<img>标签crossrigin属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

11.0（含）以上	支持（未知开始支持版本）	支持（未知开始支持版本）	支持（未知开始支持版本）	支持（未知开始支持版本）

HTML4.01和HTML5之间的差异

crossrigin是HTML5的新功能。

<img>标签crossrigin属性语法

<img>标签crossrigin属性实例

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>img crossorigin</title>

        <script>
                var canvas =  document.createElement('canvas');
                var context = canvas.getContext('2d');

                var img = new Image();
                img.crossOrigin = 'use-credentials';    // 设置img的crossrigin属性值
                img.onload = function () {
                context.drawImage(this, 0, 0);
                context.getImageData(0, 0, this.width, this.height);
                document.body.appendChild(canvas);
                };
                img.src = 'https://avatars1.githubusercontent.com/u/9797883?s=460&v=4';
        </script>
</head>
<body>
         
</body>
</html>

尝试一下

提示：示例用到了JavaScript的知识和Canvas的知识

<img>标签crossrigin属性值

属性值	描述
anonymous	元素的跨域资源请求不需要凭证标志设置。如果为空字符串或除了“use-credentials”的其他字符串也默认是为“anonymous”
use-credentials	元素的跨域资源请求需要凭证标志设置，意味着该请求需要提供凭证。