|
FNImageClip模块(图片裁剪)试用分享
[复制链接]
FNImageClip 模块封装了图片裁剪功能。
https://docs.apicloud.com/Client-API/Func-Ext/FNImageClip
支持widget:// , fs:// 两种目录下的图片。 也可以是其他拍照api或拍照模块获得的图片地址。可以保存为矩形或圆形图片。
附件有完整widget代码包。
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <style type="text/css">
- html, body {
- background-color: white;
- }
- header {
- border-bottom: 1px solid #ccc;
- padding: 25px 0;
- }
- span {
- padding: 10px 5px;
- margin: 5px;
- display: inline-block;
- background-color: #e8e8e8;
- }
- .hover {
- opacity: .4;
- }
- .btn {
- position: relative;
- left: 125px;
- top: -120px;
- width: 180px;
- }
- #img {}
- </style>
- </head>
- <body id="bd">
- <div class="main">
- <header>
- <h1>FNImageClip</h1>
- <mark>
- 使用前请详细阅读模块文档
- </mark>
- </header>
- <img src="../image/touxiang.png" id="img" width="120" />
- <div class="btn">
- <span tapmode="hover" onclick="fnOpen()">open</span>
- <span tapmode="hover" onclick="fnSave()">save</span>
- <span tapmode="hover" onclick="reset1()">reset</span>
- <span tapmode="hover" onclick="getPicture()">getPicture</span>
- </div>
- </div>
- </body>
- <script type="text/javascript">
- var FNImageClip;
- apiready = function() {
- FNImageClip = api.require('FNImageClip');
- };
- function fnOpen() {
- FNImageClip.open({
- rect: {
- x: 0,
- y: api.winHeight / 2,
- w: api.winWidth,
- h: 300
- },
- srcPath: 'widget://image/222.jpg',
- highDefinition: true,
- style: {
- mask: '#888',
- clip: {
- w: 120,
- h: 200,
- x: api.winWidth / 2 - 120,
- y: 20,
- borderColor: '#0f0',
- borderWidth: 5,
- //appearance: 'circular',
- appearance: 'rectangle'
- }
- },
- mode: "clip",
- fixedOn: api.frameName,
- fixed: false
- }, function(ret, err) {
- if (ret) {
- console.log(JSON.stringify(ret));
- } else {
- alert(JSON.stringify(err));
- }
- });
- }
- function fnSave() {
- var timestamp = new Date().getTime();
- FNImageClip.save({
- destPath: 'fs://image/' + timestamp + '.jpg',
- copyToAlbum: true,
- quality: 1
- }, function(ret, err) {
- if (ret) {
- console.log(JSON.stringify(ret));
- document.getElementById('img').src = api.fsDir + '/' + 'image' + '/' + +timestamp + '.jpg',
- fnClose();
- } else {
- alert(JSON.stringify(err));
- }
- });
- }
- function fnClose() {
- FNImageClip.close();
- }
- function reset1() {
- FNImageClip.reset();
- }
- function getPicture() {
- api.getPicture({
- sourceType: 'camera',
- encodingType: 'jpg',
- mediaValue: 'pic',
- destinationType: 'url',
- allowEdit: true,
- quality: 100,
- targetWidth: 500,
- targetHeight: 500,
- saveToPhotoAlbum: false
- }, function(ret, err) {
- if (ret) {
- //alert(JSON.stringify(ret));
- var FNImageClip = api.require('FNImageClip');
- FNImageClip.open({
- rect: {
- x: 0,
- y: 0,
- w: api.winWidth,
- h: api.winHeight
- },
- srcPath: ret.data,
- style: {
- mask: '#888',
- clip: {
- w: 300,
- h: 500,
- x: 50,
- y: 50,
- borderColor: '#0f0',
- borderWidth: 1,
- appearance: 'rectangle'
- }
- },
- fixedOn: api.frameName
- }, function(ret, err) {
- if (ret) {
- alert(JSON.stringify(ret));
- } else {
- alert(JSON.stringify(err));
- }
- });
- } else {
- alert(JSON.stringify(err));
- }
- });
- }
- </script>
- </html>
复制代码
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|