compress.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * APP端图片压缩
  3. * 参数说明:
  4. * img 图片url
  5. * scale缩放比例 1-100
  6. * callback 回调设置返回值
  7. */
  8. export function translateapp(img, scale, callback) {
  9. plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象
  10. entry.file((file) => { // 可通过entry对象操作图片
  11. console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
  12. if (file.size > 22400) { // 如果大于500Kb进行压缩
  13. plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例
  14. src: img, //src: 压缩原始图片的路径
  15. dst: img.replace('.png', 'yasuo.png').replace('.PNG',
  16. 'yasuo.PNG').replace('.jpg', 'yasuo.jpg')
  17. .replace('.JPG', 'yasuo.JPG'),
  18. width: '40%', //dst: (String 类型 )压缩转换目标图片的路径,这里先在后面原始名后面加一个yasuo区分一下
  19. height: '40%', //width,height: (String 类型 )缩放图片的宽度,高度
  20. quality: scale, //quality: (Number 类型 )压缩图片的质量
  21. overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
  22. // format:'jpg' //format: (String 类型 )压缩转换后的图片格式
  23. }, (event) => {
  24. console.log('压缩后图片信息:' + JSON.stringify(event));
  25. //返回压缩后的图片路径
  26. callback(event.target);
  27. }, function(err) {
  28. console.log('Resolve file URL failed: ' + err.message);
  29. });
  30. } else { //else小于500kb跳过压缩,直接返回现有的src
  31. callback(img);
  32. }
  33. });
  34. }, (e) => { // 返回错误信息
  35. console.log('Resolve file URL failed: ' + e.message);
  36. });
  37. }
  38. /**
  39. * H5端图片压缩
  40. * 参数说明:
  41. * imgSrc 图片url
  42. * scale缩放比例 0-1
  43. * type 返回图片类型 默认blob
  44. * callback 回调设置返回值
  45. */
  46. export function translate(imgSrc, scale, type , callback) {
  47. var img = new Image();
  48. img.src = imgSrc;
  49. img.onload = function() {
  50. var that = this;
  51. var h = that.height; // 默认按比例压缩
  52. var w = that.width;
  53. var canvas = document.createElement('canvas');
  54. var ctx = canvas.getContext('2d');
  55. var width = document.createAttribute("width");
  56. width.nodeValue = w;
  57. var height = document.createAttribute("height");
  58. height.nodeValue = h;
  59. canvas.setAttributeNode(width);
  60. canvas.setAttributeNode(height);
  61. ctx.drawImage(that, 0, 0, w,h);
  62. var base64 = canvas.toDataURL('image/jpeg', scale);//压缩比例
  63. canvas = null;
  64. if(type == 'base64'){
  65. callback(base64);
  66. }else{
  67. var blob = base64ToBlob(base64);
  68. var blobUrl = window.URL.createObjectURL(blob);//blob地址
  69. callback(blobUrl);
  70. }
  71. }
  72. }
  73. // base转Blob
  74. export function base64ToBlob(base64) {
  75. var arr = base64.split(','),
  76. mime = arr[0].match(/:(.*?);/)[1],
  77. bstr = atob(arr[1]),
  78. n = bstr.length,
  79. u8arr = new Uint8Array(n);
  80. while (n--) {
  81. u8arr[n] = bstr.charCodeAt(n);
  82. }
  83. return new Blob([u8arr], {
  84. type: mime
  85. });
  86. }