因为图片跨域访问导致,修改方案:在图片服务器上的nginx时增加配置:
add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
在前端使用:
image.crossOrigin = 'Anonymous';
或者
<img crossorigin="anonymous">
以上方式在safari上不支持,报:The operation is insecure
解决方案:使用glob
let xhr = new XMLHttpRequest();
xhr.onload = function() {
let url1 = URL.createObjectURL(this.response);
//这里可以对图片进行操作了
// 图片用完后记得释放内存
URL.revokeObjectURL(url);
};
img.src = url1;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();