前端截图摘录

282 阅读1分钟

使用html2canvas吐出base64格式,

html2canvas(document.body, {

  onrendered: function (canvas) {

  console.log('----测试-----', canvas.toDataURL("image/png"));

  },

});

上传oss:base64 -> blob -> File

var _fileBlob = dataURLtoBlob(base);

function dataURLtoBlob(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 });

}

最后把blob转换成file文件形式:

let fileOfBlob = new File([_fileBlob], new Date() + '.jpg');

//这里默认上传为jpg格式的

即可把这个ileOfBlob加到var request = new FormData();这里来:

request.append('file', fileOfBlob);

 

值得注意的是,好像oss上传有顺序规则

1.request.append('name', 'Picture_G_Balloon.jpg');

2.request.append('key', random_name);

3.request.append("policy", data.policy);//policy规定了请求的表单域的合法性

4.request.append("OSSAccessKeyId", data.ossaccessKeyId);//Bucket 拥有者的Access Key Id。

5.request.append("success_action_status", '200');// 让服务端返回200,不然,默认会返回204

6.request.append("Signature", data.signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性

7request.append('file', fileOfBlob);