网页网站您现在的位置是:首页 > 博客日志 > 网页网站

浏览器可以跨域显示图片,但脚本却不能访问

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-08-28 17:47:10网页网站人已围观关键字:

简介浏览器可以跨域显示图片,但脚本却不能访问问题描述:打开A网站的一个编辑页面,比如使用UEditor编辑器,然后从B网站的一个页面复制内容(其中含有图片)粘贴到A网站的编辑器中,这时图片

浏览器可以跨域显示图片,但脚本却不能访问9zZ编程技术_踩坑日志_进阶指南 - 无知人生


9zZ编程技术_踩坑日志_进阶指南 - 无知人生

问题描述:9zZ编程技术_踩坑日志_进阶指南 - 无知人生

打开A网站的一个编辑页面,比如使用UEditor编辑器,然后从B网站的一个页面复制内容(其中含有图片)粘贴到A网站的编辑器中,这时图片是可以访问的(浏览器这时应该是从缓存中读取的图片,没有检测跨域的问题);但在这个编辑器页面使用脚本访问的话,比如调用 canvas 的 toDataURL 方法,就会出现跨域问题;这就导致根本没有办法通过脚本来实现此类图片的自动上传到服务器的功能;UEditor的自动上传功能到服务器端采集同样存在问题,因为没有 Session 数据,所以也拿不到图片。9zZ编程技术_踩坑日志_进阶指南 - 无知人生


9zZ编程技术_踩坑日志_进阶指南 - 无知人生

通过 ajax,img 标签都无法解决。9zZ编程技术_踩坑日志_进阶指南 - 无知人生

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;


9zZ编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

相关文章

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:198篇
  • 文章评论:27条
  • 文章阅读:2308次
  • 文章点赞:914次
  • 微信公众号:扫描二维码,关注我们
  • 微信公众号-微wx笑