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

时间 2019-11-24

标签获取图片自行上传保存繁體版

原文原文链接

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

涉及点：

跨域 CORS 协议ajax
1. 为何使用cors,不使用jsonp？由于cors更强大，方便安全，还不须要修改大量的先后端数据格式，只需修改服务器配置参数，与请求参数。json
2. 想要跨域获取数据与资源，必须由对方服务器开启 CORS 协议，经过认证或公开获取数据与资源。canvas
  - HTTP访问控制（CORS）
3. ajax跨域请求时，须要手动开启，跨区请求参数：crossDomain: true后端
```
$.ajax({
    beforeSend : function (xhr) {
    },
    error      : function () {
    },
    crossDomain: true,
    method     : "GET",
    url        : URL,
    dataType   : "json",
    timeout    : 3000
})
```
实例与经常使用类型转换跨域

主要思路：首先经过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');
};

启用了 CORS 的图片

基本经常使用转变方法整理并发

经过 url路径，返回image对象app

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

将image对象转变为canvas类型cors

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文档
- MDN文档 Blob()

将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});
};

数据上传与保存

使用FormData方法包装数据，支持blob类型，File 接口基于 Blob。
```
var fd = new FormData();
fd.append('indexKey',blod);
```

使用xhr上传

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

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

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

涉及点：

参考资料