文章目录
  1. 1. 使用场景
  2. 2. crossorigin属性
  3. 3. safari浏览器的bug

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

使用场景

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

crossorigin属性

这个属性有两个值可选:
anonymous:如果使用这个值的话就会在请求中的header中的带上Origin属性,但请求不会带上cookie和其他的一些认证信息。
use-credentials:这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。
可以通过server的配置文件来开启这个属性:server开启Access-Control-Allow-Credentials
前端写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = "http://example.com/image"; // insert image url here
img.crossOrigin = "anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}

safari浏览器的bug

在safari浏览器中发现一个bug,即用户选择本地的图片文件时,如果使用了crossorigin话也会报错,解决办法是判断图片的地址是否是以http开头的,即:

1
2
3
if (path.substring(0, 4).toLowerCase() === 'http') {
img.crossOrigin = 'anonymous'
}

文章目录
  1. 1. 使用场景
  2. 2. crossorigin属性
  3. 3. safari浏览器的bug