JY.AppInterface.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. 
  2. function jyAppInterface(option) {
  3. this._init(option);
  4. }
  5. jyAppInterface.prototype = {
  6. _init (option) {
  7. var that = this;
  8. this.ImgStorage = [];
  9. this.url= option.url || "/MobileProblem/Base64UploadAndSave";
  10. this.App = option.myInterfaceName;
  11. this.LodjyAppInterface();
  12. },
  13. SaveUserImg(imgbase64) {
  14. var that = this;
  15. var toimgbase64="data:image/jpeg;base64," + imgbase64;
  16. var obj={size:3000};
  17. //this.compress(toimgbase64, obj, (base64) => {
  18. // that.showImgDetail(base64, that.randomn(5))
  19. //})
  20. that.showImgDetail(toimgbase64, that.randomn(5))
  21. //that.showImgDetail(that.compress("data:image/jpeg;base64," + imgbase64, "1200"), that.randomn(5))
  22. },
  23. LodjyAppInterface() {
  24. var that = this;
  25. document.getElementById('pickPhoto').addEventListener('tap', function () {
  26. that.TakePhoto();
  27. });
  28. document.getElementById('pickCamera').addEventListener('tap', function () {
  29. that.TakePhoto();
  30. });
  31. },
  32. //调用家医拍照接口
  33. TakePhoto () {
  34. this.App.takePhotoJS("1");
  35. },
  36. //压缩base64
  37. compress (base64String, obj,callback) {
  38. var img = new Image();
  39. img.src = base64String;
  40. img.onload = function () {
  41. var that = this;
  42. // 默认按比例压缩
  43. var w = that.width,
  44. h = that.height;
  45. if (Math.max(w, h) > obj.size) {
  46. if(w>h){
  47. w = obj.size;
  48. h = obj.size * h / w;
  49. }else{
  50. h = obj.size;
  51. w = obj.size * w / h;
  52. }
  53. }
  54. var quality = 1; // 默认图片质量为1
  55. //生成canvas
  56. var canvas = document.createElement('canvas');
  57. var ctx = canvas.getContext('2d');
  58. // 创建属性节点
  59. var anw = document.createAttribute("width");
  60. anw.nodeValue = w;
  61. var anh = document.createAttribute("height");
  62. anh.nodeValue = h;
  63. canvas.setAttributeNode(anw);
  64. canvas.setAttributeNode(anh);
  65. ctx.drawImage(that, 0, 0, w, h);
  66. // 图像质量
  67. if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
  68. quality = obj.quality;
  69. }
  70. // quality值越小,所绘制出的图像越模糊
  71. var base64 = canvas.toDataURL('image/jpeg', quality);
  72. canvas = null;
  73. // 回调函数返回base64的值
  74. callback(base64);
  75. }
  76. },
  77. //显示缩略图并存储
  78. showImgDetail(imgbase64, name) {
  79. var that = this;
  80. var $list = $("#ImgList");
  81. var src = 'src="' + imgbase64 + '"';
  82. var $li = '<li id=' + name + ' class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><img style="width: 100px;height: 100px;" ' + src + ' /> <button class="destory" ></button><p class="filep">' + name + '</p> </li>';
  83. $list.append($li);
  84. //存储到ImgStorage
  85. var im = { name: "img-" + name, dataURL: imgbase64 };
  86. this.ImgStorage.push(im);
  87. //删除照片监听
  88. $("#" + name).children(".destory").click(() => {
  89. that.delImg(name);
  90. });
  91. },
  92. ///删除照片
  93. delImg(ImgId) {
  94. var ImgKey = "img-" + ImgId;
  95. var r = this.ImgStorage.filter(function (item) {
  96. return item.name != ImgKey;
  97. })
  98. this.ImgStorage = r;
  99. $("#" + ImgId).remove();
  100. },
  101. //上传
  102. Upload (processId,callback) {
  103. var that = this;
  104. var count = 0;
  105. for(item of this.ImgStorage) {
  106. item.ProcessId = processId;
  107. $.ajax({
  108. type: "post",
  109. url: that.url,
  110. data: item,
  111. async: false,
  112. success: function (data) {
  113. if (data.code=200) {
  114. count++;
  115. }
  116. }
  117. });
  118. }
  119. callback(count);
  120. },
  121. randomn(n) {
  122. let res = '';
  123. for (; res.length < n; res += Math.random().toString(36).substr(2).toUpperCase()) { }
  124. return res.substr(0, n);
  125. }
  126. }