publicMethods.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. export default {
  2. //获取图片
  3. imgPreview(file, callback) {
  4. let self = this;
  5. //判断支不支持FileReader
  6. if (!file || !window.FileReader) return;
  7. if (/^image/.test(file.type)) {
  8. //创建一个reader
  9. let reader = new FileReader();
  10. //将图片转成base64格式
  11. reader.readAsDataURL(file);
  12. //读取成功后的回调
  13. reader.onloadend = function() {
  14. let result = this.result;
  15. let img = new Image();
  16. img.src = result;
  17. // self.imgSrc = result;
  18. img.onload = function() {
  19. let data = self.compress(img);
  20. let blob = self.dataURItoBlob(data);
  21. console.log(blob);
  22. var formData = new FormData();
  23. formData.append("file", blob);
  24. let config = {
  25. headers: { "Content-Type": "multipart/form-data" }
  26. };
  27. //图片预览,配置文件,formData数据;
  28. callback && callback(data,config,formData);
  29. // console.log(formData.file);
  30. // console.log(formData);
  31. // 数据结构请求
  32. };
  33. };
  34. }
  35. },
  36. // 压缩图片
  37. compress(img) {
  38. let canvas = document.createElement("canvas");
  39. let ctx = canvas.getContext("2d");
  40. // let initSize = img.src.length;
  41. let width = img.width;
  42. let height = img.height;
  43. canvas.width = width;
  44. canvas.height = height;
  45. // 铺底色
  46. ctx.fillStyle = "#fff";
  47. ctx.fillRect(0, 0, canvas.width, canvas.height);
  48. ctx.drawImage(img, 0, 0, width, height);
  49. //进行最小压缩
  50. let ndata = canvas.toDataURL("image/jpeg", 0.4);
  51. // console.log("*******压缩后的图片大小*******");
  52. // console.log(ndata)
  53. // console.log(ndata.length);
  54. return ndata;
  55. },
  56. // base64转成bolb对象
  57. dataURItoBlob(base64Data) {
  58. var byteString;
  59. if (base64Data.split(",")[0].indexOf("base64") >= 0)
  60. byteString = atob(base64Data.split(",")[1]);
  61. else byteString = unescape(base64Data.split(",")[1]);
  62. var mimeString = base64Data
  63. .split(",")[0]
  64. .split(":")[1]
  65. .split(";")[0];
  66. var ia = new Uint8Array(byteString.length);
  67. for (var i = 0; i < byteString.length; i++) {
  68. ia[i] = byteString.charCodeAt(i);
  69. }
  70. return new Blob([ia], { type: mimeString });
  71. },
  72. }