web前端開發規範 規範概述 一個人走的更快，一群人可以走的更遠，前提是統一的策略，還要不斷地反省和優化。不管有多少人共同參與同一項目，儘可能確保每一行代碼都像是同一個人編寫的 開發目錄規範 開發環境規範 開發編碼規範 一、目錄及文件命名規範 (一)、例靜態專題頁目錄 - src / html 源代 ...
在使用croptool.js時，如果圖片的解析度過低，則無法裁剪超過解析度的大小。比如說
function chooseImg(event){
var files = event.files || event.dataTransfer.files,
file = files[0] || files;
event.value = '';
window.clip = new Clip({
dragBoxClass: 'block', //裁剪框類名
clipRadio: 1 / 1, //裁剪比例 寬/高 傳0或空或不傳等於不設置比例
//單位px 僅為裁剪框的寬高 不等同裁剪後最終圖片寬高
initialHeight: 100, //裁剪框初始高度
initialWidth: 100, //裁剪框初始寬度
minHeight: 100, //裁剪框最小高度
minWidth: 100, //裁剪框最小寬度
maxWidth: 450, //裁剪框最大寬度 不會大於裁剪區域寬度 取值需大於最小寬高
maxHeight: 450, //裁剪框最大高度 不會大於裁剪區域高度
cornerColor: '#39f', //裁剪框顏色
encode: 'base64', //文件類型
type: 'png', //保存圖片類型
name: 'img', //文件名字
quality: 1, //壓縮質量
//裁剪完成
onDone: function (e) {
console.log(e);
//return false;
document.getElementById('previewImg').src = e;
},
onCancel: function(){
}
});
clip.setSize(file);
}
在上面這個函數中，明確說明裁剪框最大的高度和寬度為450，但是如果選擇圖片文件的解析度為180*180，那麼裁剪框的最大裁剪範圍也會變成180*180。
註意css樣式。此時裁剪框最大是180*180;
解決方法：打開croptool.js做以下修改 找到以下兩個三元運算_this.opt.maxWidth=parseInt(_this.opt.maxWidth>w?w:_this.opt.maxWidth);
_this.opt.maxHeight=parseInt(_this.opt.maxHeight>h?h:_this.opt.maxHeight);
修改為
_this.opt.maxWidth=parseInt(_this.opt.maxWidth>w?_this.opt.maxWidth:_this.opt.maxWidth);
_this.opt.maxHeight=parseInt(_this.opt.maxHeight>h?_this.opt.maxHeight:_this.opt.maxHeight);
修改後效果：
因為使用開發者工具所以裁剪區域變形，不使用開發者工具時是正常的。重點是css樣式。
