apiCloud中图片裁剪模块FNImageClip的使用
生活随笔
收集整理的這篇文章主要介紹了
apiCloud中图片裁剪模块FNImageClip的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
思路
1.獲取需裁剪圖片的地址
2.跳轉到裁剪頁面
3.裁剪成功返回新圖片地址
4.替換原有圖片地址
增加修飾和事件
str += '<li class="tu image" id="'+imgType+'_'+i+'" style="background: url('+ret.list[i].path+')no-repeat;background-size:cover;" onclick="showClip(\''+imgType+'_'+i+'\',\''+ret.list[i].path+'\')"><input type="hidden" value="'+ret.list[i].path+'"><div class="badge" onclick="delPic(this,\''+imgType+'\')"><i class="aui-iconfont aui-icon-close"></i></div></li>';上面是動態生成的圖片html布局數據，增加一個id標識id="'+imgType+'_'+i+'",增加一個點擊事件onclick="showClip(\''+imgType+'_'+i+'\',\''+ret.list[i].path+'\')"
打開裁剪頁面，并傳入參數element_id和img_url
// 裁剪圖片 function showClip(element_id,img_url) {// 處理圖片裁剪openWinPro('clip','element_id:'+element_id+',img_url:'+img_url); }裁剪頁面進行處理
<!DOCTYPE html> <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"><title>圖片裁剪</title><link rel="stylesheet" type="text/css" href="../css/api.css"><link rel="stylesheet" type="text/css" href="../css/aui.2.0.css"><style>body{background: #fff;}.aui-btn{padding:0.3rem 2rem;}.footer{position: fixed;z-index: 999;bottom: 1rem;left:20%;}</style></head> <body> <header class="aui-bar aui-bar-nav aui-margin-b-15 header"><a class="aui-pull-left aui-btn" onclick="api.closeWin({});"><span class="aui-iconfont aui-icon-left"></span></a><div class="aui-title">圖片裁剪</div> </header><div class="aui-list-item-inner aui-list-item-center aui-list-item-btn footer"><div class="aui-btn aui-btn-info aui-margin-r-5" onclick="fnSave();">提交</div><div class="aui-btn aui-btn-danger aui-margin-l-5" onclick="fnReset();">重置</div> </div><script type="text/javascript" src="../script/api.js"></script> <script type="text/javascript" src="../script/common.js"></script> <script type="text/javascript">var FNImageClip;var element_id;apiready = function() {var header=$api.dom('header');$api.fixStatusBar(header);element_id = api.pageParam.element_id;var img_url = api.pageParam.img_url;// alert(element_id+"----"+img_url);FNImageClip = api.require('FNImageClip');FNImageClip.open({rect: {x: 0,y: document.querySelector('.header').offsetHeight,w: api.winWidth,h: api.winHeight - 150},srcPath: img_url,style: {mask: '#fff',clip: {w: 250,h: 250,x: 60,y: 80,borderColor: '#0f0',borderWidth: 1,appearance: 'rectangle'}}});};function fnSave(){FNImageClip.save({destPath: 'fs://image/temp'+new Date().getTime()+'.png',copyToAlbum: false,quality: 1},function(ret, err){if(ret) {// 提示裁剪成功toast("裁剪成功");// 發送事件監聽api.sendEvent({name: 'clip_success',extra: {element_id: element_id,new_img_url: ret.destPath}});// 關閉頁面setTimeout("api.closeWin({});",1000);} else{alert('裁剪失敗，請重試');}});}function fnReset(){FNImageClip.reset();} </script> </body> </html>裁剪頁面獲取參數，負責裁剪圖片，并發送事件監聽和傳遞參數
api.sendEvent({name: 'clip_success',extra: {element_id: element_id,new_img_url: ret.destPath} });原頁面增加監聽事件和處理
// 監聽圖片裁剪api.addEventListener({name: 'clip_success'}, function(ret, err) {if (ret) {$("#"+ret.value.element_id).css('background-image','url('+ret.value.new_img_url+')');$("#"+ret.value.element_id+" input").val(ret.value.new_img_url);}});一切都ok了
裁剪前
裁剪中
裁剪后
轉載于:https://www.cnblogs.com/jiqing9006/p/6208600.html
總結
以上是生活随笔為你收集整理的apiCloud中图片裁剪模块FNImageClip的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安全测试-抓包工具BurpSuite
- 下一篇： 基础知识《十》unchecked异常和c