浏览器可以跨域显示图片，但脚本却不能访问
微wx笑
2019-08-28【网页网站】
12
0关键字：
浏览器可以跨域显示图片，但脚本却不能访问问题描述：打开A网站的一个编辑页面，比如使用UEditor编辑器，然后从B网站的一个页面复制内容（其中含有图片）粘贴到A网站的编辑器中，这时图片
浏览器可以跨域显示图片，但脚本却不能访问
问题描述：
打开A网站的一个编辑页面，比如使用UEditor编辑器，然后从B网站的一个页面复制内容（其中含有图片）粘贴到A网站的编辑器中，这时图片是可以访问的（浏览器这时应该是从缓存中读取的图片，没有检测跨域的问题）；但在这个编辑器页面使用脚本访问的话，比如调用 canvas 的 toDataURL 方法，就会出现跨域问题；这就导致根本没有办法通过脚本来实现此类图片的自动上传到服务器的功能；UEditor的自动上传功能到服务器端采集同样存在问题，因为没有 Session 数据，所以也拿不到图片。
通过 ajax，img 标签都无法解决。
var xhr = new XMLHttpRequest();
xhr.open('get', ci.src, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (this.status == 200) {
imgResponse = this.response;
//这里面可以直接通过URL的api将其转换，然后赋值给img.src
//也可以使用下面的preView方法将其转换成base64之后再赋值
var imgUrl = URL.createObjectURL(this.response);
}else{
console.log(this.status);
}
};
//xhr.send();
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
var canvasId = "cvs_" + (+new Date()).toString(16);
//var cavasHtml = "<canvas id='" + cavasId + "' style=display: none'></canvas>";
//me.execCommand('inserthtml', loadingHtml);
var cvs = document.createElement("canvas");
cvs.id = canvasId;
cvs.width = ci.width;
cvs.height = ci.height;
cvs.style.position = "absolute";
ci.parentElement.insertBefore(cvs, ci);
var cvs = me.document.getElementById(canvasId);
var ctx=cvs.getContext("2d");
ctx.drawImage(ci, 0, 0);
img.onload = function () {
cvs.width = img.width;
cvs.height = img.height;
ctx.drawImage(img, 0, 0);
var imgUrl = cvs.toDataURL("image/png");
}
//img.src = ci.src;解决方法：
1、有自己的服务器
可以从服务器通过Web后端语言ASP、PHP、Java之类的获取下载图片
2、可以通过Chrome浏览器扩展插件来获取图片
参考：【Chrome扩展程序】利用 background 实现跨域请求
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2019-08-28/164.html
