鍥剧墖瑁佸壀鍔熻兘瀛︿範鎬荤粨鏈€杩戦渶瑕佺敤鍒板浘鐗囪鍓姛鑳姐€傚湪浣跨敤鎻掍欢杩樻槸鑷繁鍐欒鍓粍浠朵箣闂寸姽璞簡寰堜箙銆傝嚜宸卞姩鎵嬶紝鍚冮ケ瀵逛笉瀵癸紵鍡紝馃挭馃徎馃挭馃徎馃挭馃徎鏄殑锛佹渶鍚庝娇鐢╤tml2canvas鎻掍欢鐢熸垚瑁佸壀鍚庣殑鍥剧墖锛屽疄鐜板浘鐗囩殑瑁佸壀鍔熻兘銆備絾鏄彂鐜伴渶姹備腑鏈夐渶瑕佽鍓狦IF鐨勶紝浣嗘槸鎴戠殑瑁佸壀缁勪欢涓嶈兘婊¤冻杩欎釜闇€姹傦紝鑰屼笖鍥剧墖鐨勬竻鏅板害杩樻槸鏈夐棶棰樸€備负浜嗗疄鐜拌繖涓渶姹傦紝鎴戝湪鍚庣浣跨敤浜嗕竴涓猲ode鎻掍欢杩涜鎴浘锛屼絾鏄病鏈夋壘鍒扮鍚堥渶姹傜殑鎻掍欢锛屾渶鍚庡喅瀹氫娇鐢ㄤ竷鐗涗簯鐨勯珮绾у浘鐗囧鐞嗘湇鍔°€傚湪瀹炵幇杩欎釜鍔熻兘鐨勮繃绋嬩腑锛屾€荤粨浜嗕竴浜涙彃浠讹紝鏂逛究璁板繂銆傚鏋滄湁浠€涔堜笉瀵圭殑鍦版柟锛屽笇鏈涘ぇ瀹跺澶氭寚鏁欙紒涓€銆佹彃浠跺睍绀?銆佸墠绔鍓彃浠?銆乭tml2canvashtml2canvas鍙互鍦ㄦ祻瑙堝櫒绔洿鎺ョ敓鎴愭暣涓〉闈㈡垨閮ㄥ垎椤甸潰鐨勬埅鍥撅紝灏咲OM缁撴瀯娓叉煋鎴愮敾甯冦€備娇鐢ㄦ柟娉曪細http://html2canvas.hertzen.co...閮ㄥ垎浠ｇ爜锛氶亣鍒扮殑闂锛氬師鍥狅細鍥剧墖璺ㄥ煙闂锛岃櫧鐒跺浘鐗囧彲浠ュ湪娌℃湁CORS鐨刢anvas涓娇鐢紝浣嗘槸杩欐牱浼氭薄鏌揷anvas銆備竴鏃︾敾甯冭姹℃煋锛屾偍灏辨棤娉曡鍙栧叾鏁版嵁銆備緥濡傦紝鎮ㄤ笉鑳藉啀浣跨敤Canvas鐨則oBlob()銆乼oDataURL()鎴杇etImageData()鏂规硶锛岃皟鐢ㄥ畠浠細寮曞彂瀹夊叏閿欒銆傝В鍐虫柟娉曪細鍦╤tml2canvas鐨勯厤缃」涓厤缃產llowTaint:true鎴杣seCORS:true锛堜袱鑰呬笉鑳藉悓鏃朵娇鐢級锛涗娇鐢ㄥ弽鍚戜唬鐞嗘垨鏈嶅姟鍣ㄦ坊鍔犲搷搴斿ごheader("Access-Control-Allow-Origin:*")2銆俲QueryJcrop鍥剧墖瑁佸壀Jcrop鏄竴娆惧姛鑳藉己澶х殑jQuery鍥剧墖瑁佸壀鎻掍欢锛岀粨鍚堝悗鍙扮▼搴忥紝鍙互蹇€熷疄鐜板浘鐗囪鍓姛鑳姐€傦紙娌＄敤杩囥€傘€傘€傦級浣跨敤鏂规硶锛歨ttp://code.ciaoca.com/jquery...3.vue-cropper鍩轰簬Vue鐨勮鍓粍浠朵娇鐢ㄦ柟娉曪細http://xyxiao.cn/vue-cropper/銆?.3銆傝妭鐐硅鍓彃浠?銆乬m绗竴娆￠渶瑕佸畨瑁匞raphicsMagick鎴朓mageMagick锛孧acOSX鍙互浣跨敤brew瀹夎銆備娇鐢ㄦ柟娉曪細瀹夎锛歜rewinstallimagemagickbrewinstallgraphicsmagicknpminstall--savegm瀵煎叆锛歷arfs=require('fs')vargm=require('gm').subClass({imageMagick:true})閮ㄥ垎浠ｇ爜gm(`./upload/${req.body.name}`).resize('300','468','^').gravity('Center').crop('200','400').write(`./upload/${cropName}`,function(e){//杈撳嚭鍥剧墖璺緞if(e){console.log(e.message)}else{res.send({stat:1,data:{mesg:'OK',url:`http://${req.headers.host}/upload/${cropName}`}})console.log('done')}浼樼偣鍜岀己鐐逛綘鍙互瑁佸壀GIF鍥剧墖锛屼絾鏄娇鐢╮ise鍔熻兘鏀惧ぇ鍚庯紝GIF鍥剧墖浼氬彉褰紝瑁佸壀鍚庣殑鍥剧墖鍜屽師鍥句竴鏍峰ぇ锛岄€変腑鐨勫尯鍩熻瑁佸壀锛屽叾浠栧湴鏂规槸閫忔槑鐨勩€傛晥鏋滃浘宸﹀浘涓虹缉鏀惧悗瑁佸壀鍚庣殑鍥剧墖锛屽彸鍥句负鍘熷浘3.濡備綍浣跨敤sharp瀹夎npminstall--savesharp瀵煎叆锛歷arsharp=require('sharp')閮ㄥ垎浠ｇ爜sharp('鍥剧墖璺緞').extract(top,left,width,height).resize(150,150).sharpen().quality(100).toFile('瑁佸壀鍚庝繚瀛樼殑璺緞',function(err){if(err)throwerr;console.log('done!')res.send({stat:1,data:{mesg:'OK',url:`http://${req.headers.host}/涓婁紶/${cropName}`}})});浼樼己鐐箂harp鍙兘瑁佸壀GIF鐨勭涓€甯э紝浣嗘槸鐢ㄨ捣鏉ユ洿鏂逛究鍙傝€僪ttp://shieldax.github.io/201...sharpcropping
