tailoring.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  9. <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
  10. <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
  11. <link rel="stylesheet" href="../../css/projeck.css">
  12. <style media="screen">
  13. .btn{
  14. position: absolute;;
  15. left: 0;
  16. bottom: 0;
  17. width: 100%;
  18. color: #fff;
  19. display: flex;
  20. justify-content: space-around;
  21. height: 50px;
  22. line-height: 50px;
  23. background: #000;
  24. }
  25. .btn span{
  26. display: block;
  27. padding: 0 20px;
  28. }
  29. </style>
  30. </head>
  31. <body style="background-color:#fff;">
  32. <div class="btn">
  33. <span tapmode="hover" onclick="fnClose()">取消</span>
  34. <span tapmode="hover" onclick="reset()">重置</span>
  35. <span tapmode="hover" onclick="saveFun()">确认</span>
  36. </div>
  37. </body>
  38. </html>
  39. <script type="text/javascript" src="../../script/api.js"></script>
  40. <script type="text/javascript">
  41. apiready=function () {
  42. var imgPath = api.pageParam.tailoring;
  43. openTailor(imgPath)
  44. };
  45. function openTailor(url) {
  46. var FNImageClip = api.require('FNImageClip');
  47. FNImageClip.open({
  48. rect: {
  49. x: 0,
  50. y: 0,
  51. w: api.frameWidth,
  52. h: api.frameHeight - 50 +'px'
  53. },
  54. highDefinition:true,
  55. srcPath: url,
  56. style: {
  57. mask: 'rgba(0,0,0,0.6)',
  58. clip: {
  59. w: 300,
  60. h: 300,
  61. x: 50,
  62. y: 50,
  63. borderColor: '#000',
  64. borderWidth: 1,
  65. appearance: 'rectangle'
  66. }
  67. },
  68. fixedOn: api.frameName,
  69. }, function(ret, err) {
  70. if (ret) {
  71. } else {
  72. }
  73. });
  74. }
  75. // 取消
  76. function fnClose() {
  77. var FNImageClip = api.require('FNImageClip');
  78. FNImageClip.close();
  79. api.closeFrame({
  80. });
  81. }
  82. // 保存
  83. function saveFun() {
  84. var FNImageClip = api.require('FNImageClip');
  85. var timestamp = new Date().getTime();
  86. FNImageClip.save({
  87. destPath: 'fs://image/' + timestamp + '.jpg',
  88. copyToAlbum: true,
  89. quality: 1
  90. }, function(ret, err) {
  91. if (ret) {
  92. // console.log(JSON.stringify(ret));
  93. api.execScript({
  94. frameName: 'frame4',
  95. script: 'uploadUrl("'+ ret.destPath +'");'
  96. });
  97. api.execScript({
  98. frameName: 'frame4',
  99. script: 'uploadHead("'+ ret.destPath +'");'
  100. });
  101. fnClose();
  102. } else {
  103. }
  104. });
  105. }
  106. // 重置
  107. function reset() {
  108. var FNImageClip = api.require('FNImageClip');
  109. FNImageClip.reset();
  110. }
  111. </script>