前端图片压缩

canvas 图片跨域问题

问题描述

canvas 在使用跨域图片的时候会出现图片跨域导致报错的问题

产生原因

由于图片存放的域名和主页面的域名不一致，这样就会产生一个跨域的问题，浏览器对跨域图片加载做了安全限制，如果不做任何处理会出现跨域报错.

解决办法

这个时候服务器端需要给图片的请求头加上 header("Access-Control-Allow-Origin: *"); 请求头，允许图片跨域，这样浏览器就可以正常显示图片，不会出现跨域报错信息了，但是这个时候还是会有别的图片跨域问题存在.（如果图片资源是存储在阿里云的，这个时候已经默认添加允许跨域的请求头了）

通过上诉的处理方法只能解决图片显示的跨域报错，如果我们需要对图片进行处理，使用 canvas 的 toDataURL 和 getImageData 这两个 api 的时候会出现报错，上面的解决办法可以使我们可以使用 drawImage 方法来将图片绘制到 canvas 上面，但是需要生成一个新的图片的时候，由于 canvas 使用了一个跨域图片，这个时候是污染状态的，所以会出现报错

想要解决这个问题，我们需要使用到 crossOrigin 这个属性

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

const img = new Image();
img.crossOrigin = '';
img.onload = function () {
    context.drawImage(this, 0, 0);
    const base64 = context.toDataURL();
};
img.src = 'http://www.test.com/images/1.jpg';

crossOrigin 是 html5 提供的支持跨域的属性, 它可以支持图片，音频，视频等多媒体资源进行跨域

注意点

1 设置 crossOrigin 需要在设置图片 src 属性之前，否则可能失效。
2 onload 也需要写在设置 src 属性之前，否则如果是缓存图片，有可能不触发 onload 事件。
3 不要对本地路径或者base64的图片设置 crossOrigin 否则在某些系统下面可能会报错。

原理

crossOrigin=anonymous 属性设置之后，服务器就不会带任何的匿名信息给你，这个时候返回的数据是绝对安全的，这个时候浏览器就不会阻止了

兼容性

从 IE11 开始兼容，PC 端谨慎使用！