imgCompress.ts 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. *
  3. *
  4. * 图片压缩
  5. *
  6. *
  7. */
  8. /**
  9. * 给的文件资源是否小于LimitSize (M), 小于走lessCallBack, 大于走moreCallBack
  10. */
  11. export function imageSizeIsLessLimitSize(
  12. imagePath: string,
  13. limitSize: number,
  14. lessCallBack: () => void,
  15. moreCallBack: () => void
  16. ): void {
  17. uni.getFileInfo({
  18. filePath: imagePath,
  19. success(res) {
  20. console.log("压缩前图片大小:", res.size / 1024, 'kb');
  21. if (res.size > 1024 * 1024 * limitSize) {
  22. moreCallBack();
  23. } else {
  24. lessCallBack();
  25. }
  26. }
  27. });
  28. }
  29. // 主调用方法
  30. /**
  31. * 获取小于限制大小的Image, limitSize默认为1M,递归调用。
  32. */
  33. export function getLessLimitSizeImage(
  34. canvasId: string,
  35. imagePath: string,
  36. limitSize: number = 1,
  37. drawWidth: number,
  38. callBack: (path: string) => void
  39. ): void {
  40. imageSizeIsLessLimitSize(imagePath, limitSize,
  41. () => {
  42. callBack(imagePath);
  43. },
  44. () => {
  45. uni.getImageInfo({
  46. src: imagePath,
  47. success: function (imageInfo) {
  48. var maxSide = Math.max(imageInfo.width, imageInfo.height);
  49. //画板的宽高默认是windowWidth
  50. var windowW = drawWidth;
  51. var scale = 1;
  52. if (maxSide > windowW) {
  53. scale = windowW / maxSide;
  54. }
  55. var imageW = Math.floor(imageInfo.width * scale);
  56. var imageH = Math.floor(imageInfo.height * scale);
  57. console.log('调用压缩', imageW, imageH);
  58. getCanvasImage(canvasId, imagePath, imageW, imageH,
  59. (pressImgPath: string) => {
  60. getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth * 0.7, callBack);
  61. }
  62. );
  63. }
  64. });
  65. }
  66. );
  67. }
  68. /**
  69. * 获取画布图片
  70. */
  71. function getCanvasImage(
  72. canvasId: string,
  73. imagePath: string,
  74. imageW: number,
  75. imageH: number,
  76. getImgsuccess: (path: string) => void
  77. ): void {
  78. // TODO: UniApp 中 canvas 的使用方式与微信小程序不同,需要根据实际情况调整
  79. // const ctx = uni.createCanvasContext(canvasId);
  80. // ctx.drawImage(imagePath, 0, 0, imageW, imageH);
  81. // ctx.draw(false, () => {
  82. // uni.canvasToTempFilePath({
  83. // canvasId: canvasId,
  84. // x: 0,
  85. // y: 0,
  86. // width: imageW,
  87. // height: imageH,
  88. // quality: 1,
  89. // success(res) {
  90. // getImgsuccess(res.tempFilePath);
  91. // }
  92. // });
  93. // });
  94. console.warn('getCanvasImage 需要根据 UniApp 的 canvas API 进行调整');
  95. }