img 标签的 crossorigin、decoding 、ismap 、loading 、referrerpolicy 、sizes 、srcset属性

crossorigin

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

outline

img 是我们在web开发中比较常用的一个标签，它代表着文档中的一个图像元素。HTML5 给这个标签新增加了一个 crossorigin 属性，这个属性决定了图片获取过程中是否开启 CORS 功能

useage scenario

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

例如：

有一个需求是让用户输入一个任意图片的 url 地址，在前端预览图片并让用户裁剪，再将裁剪好的图片上传到后端的服务器上。这里输入的图片地址很有可能来自第三方站点，这就涉及到一个跨域的问题，如果仅仅是展示预览图片的话是没有什么问题的，但这里裁剪图片时需要将裁剪好的图片进行 base64 编码，如果没有使用 crossorign 开启 CORS 功能的话，在使用 canvas 的 toBlob()、toDataURL() 和 getImageData() 方法时就会出现跨域的问题。

crossOrigin 属性

这个属性有两个值可选：

anonymous：【匿名的】如果使用这个值的话就会在请求中的 header 中的带上 Origin 属性，但请求不会带上 cookie 和其他的一些认证信息。
use-credentials：【使用凭据】这个就同时会在跨域请求中带上 cookie 和其他的一些认证信息。

在使用这两个值时都需要 server 端在 response 的 header 中带上 Access-Control-Allow-Credentials 属性。
可以通过 server 的配置文件来开启这个属性：server 开启 Access-Control-Allow-Credentials

前端写法：

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

var img = new Image();
// img.crossOrigin = 'use-credentials';
img.crossOrigin = 'anonymous';
img.onload = function() {
	context.drawImage(this, 0, 0);
	localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );  // 需要设置 img.crossOrigin
	context.getImageData(0, 0, this.width, this.height);  // 需要设置 img.crossOrigin
	document.body.appendChild(canvas)
}
img.src = 'https://avatars1.githubusercontent.com/u/9797883?s=460&v=4';

decoding

Chrome 图片解码与 Image Decoding Hint

outline

decoding 为浏览器提供图像解码方式上的提示。允许的值：

decoding="sync | async | auto"

在不支持 Image Decoding Hint 之前，Chrome 会强制图片先解码，然后再光栅化，这样保证了包括图片在内的所有同时变更的元素都是同时显示的，也就是所谓的 atomic presentation。而在支持 Image Decoding Hint 之后，Chrome 的光栅化策略就会变为：

1、如果 Decoding Hint 是 sync，则跟之前是一样的；

2、如果 Decoding Hint 是 async，则图片不会在光栅化之前解码，而是放到另外一个后台 Worker 线程解码，并在图片解码完成后重新光栅化图片所在区域并重绘窗口。这样造成的结果就是在图片所在区域光栅化的时候可能因为图片还未完成解码而无法绘制图片导致空白，跟其它非图片元素的显示不完全同步，也就是说如果有图片元素和非图片元素同时发生变更，非图片元素可能会提前显示；

3、如果 Decoding Hint 是 auto，目前 Chrome 的处理是等同于 sync；

sync

同步解码图像，实现与其他内容的显示相互斥的原子显示。

此图像的解码将是一个原子操作，在完成解码显示之前，不被其他内容的显示而打断，因此其他内容的显示会被延迟。

async

异步解码图像，以减少其他内容的显示延迟。

auto

默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

ismap

HTML ismap 属性

outline

ismap 属性是一个布尔属性。

ismap 属性将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像）。

当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。

✦ 解释：当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。

注意：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。

ismap 示例

https://www.runoob.com/try/try.php?filename=tryhtml_img_ismap

<a href="form_action.php">
    <img src="logo.png" alt="runoob.com" width="336" height="69" ismap>
</a>

点击图片后的请求 url 是 https://www.runoob.com/try/demo_source/form_action.php?110,29

loading

指示浏览器应当如何加载该图像。

<img src="http://pengyouyi.site/assets/img/author.jpg" loading="lazy" alt="" />

允许的值：

✦ eager

立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。

✦ lazy

延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。

番外篇：img 的data-src 属性及懒加载

referrerpolicy

HTMLImageElement.referrerPolicy

outline

HTMLImageElement.referrerPolicy 反映了 <img> 元素的HTML属性 referrerpolicy 的定义，这个属性定义了 <img> 元素在获取资源时的引用方式。

value

“no-referrer” 表示HTTP头部信息将不会发送 referrer 。
“no-referrer-when-downgrade”: No Referer header is sent when navigating to an origin without HTTPS. This is the default if no policy is otherwise specified.
“origin” 表示 referrer 只包含策略、主机名、端口等页面源的信息。
“origin-when-cross-origin”: Navigating to other origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string.
“unsafe-url” 这意味着引用者将包括源站和路径（但不包括片段、密码或用户名）。这种情况是不安全的，因为它可能会泄漏路径信息，这些信息已被使用TLS隐藏到第三方。

demo

var img = new Image();
img.src = 'img/logo.png';
img.referrerPolicy = 'origin';

var div = document.getElementById('divAround');
div.appendChild(img); // Fetch the image using the origin as the referrer

sizes

表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：

❶ 一个媒体条件。最后一项一定是被忽略的。

❷ 一个资源尺寸的值。

demo

<img src="http://pengyouyi.site/assets/img/author.jpg" alt=""
    srcset="
      http://placehold.it/2000 2000w,
      http://placehold.it/1500 1500w,
      http://placehold.it/1000 1000w,
      http://placehold.it/500 500w"
  sizes="
      (max-width: 500px) 500px,
      (max-width: 1000px) 1000px,
      (max-width: 1500px) 1500px,
      2000px"
>

<img
    srcset="
        http://placehold.it/2000 2000w,
        http://placehold.it/1500 1500w,
        http://placehold.it/1000 1000w,
        http://placehold.it/500 500w"
    sizes="
        (max-width: 500px) 100vw,
        (max-width: 1000px) 80vw,
        (max-width: 1500px) 50vw,
        2000px"
    src="http://placehold.it/500/abc"
/>

srcset

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

指向图像的 URL。

可选地，再加一个空格之后，附加以下的其一：

❶ 宽度 描述符:
一个宽度描述符，这是一个正整数，后面紧跟 w 符号。(w: width,宽度)
换算值: = srcset宽度/ sizes 宽度
该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值。

❷ 像素密度 描述符 :
一个像素密度描述符，这是一个正浮点数，后面紧跟 x 符号。

△ 使用说明:

如果没有指定源描述符，那它会被指定为默认的 1x。

描述符不要混合使用: 在同一个的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。

描述符不要重复: 重复的描述符（比如，在同一个srcset两个源都是 ‘2x’）也是无效的。

demo

<img
    srcset="
        http://placehold.it/2500 5x,
        http://placehold.it/1500 3x,
        http://placehold.it/1000 2x,
        http://placehold.it/500 1x"
    src="http://placehold.it/500/abc"
/>

sizes & srcset

1、img 标签的 srcset 可以用来处理页面在不同像素密度终端设备上对图片的选择性展示
2、sizes 作用就在于告诉浏览器根据【屏幕尺寸】和【像素密度】的计算值从 srcset 中选择最佳的图片源。

如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。

img 的 srcset、sizes 属性 demo 例子的解释

彭友谊的博客

努力做好一名前端攻城狮

img 标签的新属性

img 标签的 crossorigin、decoding 、ismap 、loading 、referrerpolicy 、sizes 、srcset属性

crossorigin

outline

useage scenario

crossOrigin 属性

decoding

outline

sync

async

auto

ismap

outline

ismap 示例

loading

referrerpolicy

outline

value

demo

sizes

demo

srcset

demo

sizes & srcset