跨域获取图片并自行上传保存

涉及点：

1. 跨域 CORS 协议

   1. 为什么使用cors,不使用jsonp？因为cors更强大，方便安全，还不需要修改大量的前后端数据格式，只需修改服务器配置参数，与请求参数。

   2. 想要跨域获取数据与资源，必须由对方服务器开启 CORS 协议，通过认证或公开获取数据与资源。

   3. ajax跨域请求时，需要手动开启，跨区请求参数：crossDomain: true

      $.ajax({    beforeSend : function (xhr) {    },    error      : function () {    },    crossDomain: true,    method     : "GET",    url        : URL,    dataType   : "json",    timeout    : 3000})

2. 实例与常用类型转换

• 主要思路：首先通过Image对象下载图片，然后通过canvas对象，转换成需要的类型，最后进行保存。

  • ==跨域获取的重要参数==：crossOrigin= "anonymous"，下面是实例:

    var img = new Image();img.src = url;// 跨域重点参数img.crossOrigin = "Anonymous";img.onload = function () {    // 压缩质量可以根据实际情况调整    var canvas = document.createElement('canvas');    var ctx = canvas.getContext('2d');    // 设置 canvas 的宽度和高度    canvas.width = this.width;    canvas.height = this.height;    // 把图片绘制到 canvas 中    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);    // 取出 Blob 格式数据, 并发送    canvas.toBlob(function (blod) {        var fd = new FormData();        fd.append('key',blod);        var request = new XMLHttpRequest();        request.open("POST", URL);        request.send(fd);    },'image/jpeg');};

• 基本常用转变方法整理

  • 通过 url路径，返回image对象

    function UrlToImage (url,fn){  var img = new Image();  img.src = url;  img.onload = function(){    fn(img);  }};

  • 将image对象转变为canvas类型

    function ImageToCanvas(image){  var cvs = document.createElement("canvas");  var ctx = cvs.getContext('2d');  cvs.width = image.width;  cvs.height = image.height;  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);  return cvs ;};

  • 将canvas对象转变为blob类型对象，blob()方法非常强大。

    function CanvasResizeToFile(canvas,quality,fn){  canvas.toBlob(function(blob) {    fn(blob);  },'image/jpeg',quality);};

    • ​ File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以把它当做File类型对待，其他更具体的用法可以参考MDN文档

  • 将canvas对象转变为dataUrl字符串

    function CanvasResizeToDataURL(canvas,quality){  return canvas.toDataURL('image/jpeg',quality);};

  • 将flie(blob)类型转变为dataUrl字符串

    function FileToDataURL(file,fn){  var reader = new FileReader();  reader.onloadend = function(e){    fn(e.target.result);  };  reader.readAsDataURL(file);};

  • 将dataUrl字符串转变为image类型对象

    function DataUrlToImage(dataurl,fn){  var img = new Image();  img.onload = function() {    fn(img);  };  img.src = dataurl;};

  • 将dataUrl字符串转变为blob类型对象

    function DataUrlToFile(dataurl) {  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  while(n--){    u8arr[n] = bstr.charCodeAt(n);  }  return new Blob([u8arr], {type:mime});};

1. 数据上传与保存

   1. 使用FormData方法包装数据，支持blob类型，File 接口基于 Blob。

      var fd = new FormData();fd.append('indexKey',blod);

   2. 使用xhr上传

      var request = new XMLHttpRequest();request.open("POST", Url);request.send(fd);

参考资料

1. cors 相关
2. Blob 相关
3. 其他相关