PTT數位生活區 / Web_Design

Fw: [請問] JS 的小問題!!! 求救高手!!!!

看板Web_Design作者 (批踢踢特偵組)時間7年前 (2017/08/26 14:22), 7年前編輯推噓1(1推 0噓 25→)
留言26則, 3人參與, 最新討論串1/1
我用了 JCrop 來做圖片裁減 demo: https://jsfiddle.net/b0f91bnt/1/ 但是由於原始圖片區域我有設定 width=300 但擷取出來的圖片卻是原始大小 我有上網查，可以加入一個參數在 $('#Image1').Jcrop({ .... }); 裡面 trueSize: [原始長, 原始寬] 這樣就可以解決我的問題 但是我沒辦法在 $('#Image1').Jcrop 之前就拿到長寬，也就沒辦法設定 trueSize... 求救各位神人，我已經試了好幾個小時弄不出來 哭哭... -- ※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: ho2002 (114.136.100.157), 08/26/2017 14:22:11 ※ 編輯: ho2002 (114.136.100.157), 08/26/2017 14:22:48
推
08/26 16:40, , 1F
用naturalWidth取圖片原始寬(高也一樣)
08/26 16:40, 1F
→
08/26 16:40, , 2F
08/26 16:40, 2F
→
08/26 17:46, , 3F
我有成功抓到原始長寬，但沒辦法在觸發 Jcrop 前把長寬的
08/26 17:46, 3F
→
08/26 17:47, , 4F
值塞給 trueSize: [原始長, 原始寬] Q_Q
08/26 17:47, 4F
→
08/26 17:47, , 5F
導致會塞進 undefined 進去... orz|||||
08/26 17:47, 5F
→
08/26 18:09, , 6F
1樓已經告訴你啦 $('#Image1').prop('naturalHeight')
08/26 18:09, 6F
→
08/26 18:10, , 7F
在圖片讀取完成後可以直接抓到
08/26 18:10, 7F
→
08/26 18:34, , 8F
抱歉 小的 JS 屬只會改參數的等級... 沒試出來
08/26 18:34, 8F
→
08/26 18:34, , 9F
紅框處是調整後
08/26 18:34, 9F
→
08/26 18:34, , 10F
但還是沒作用 Q_Q
08/26 18:34, 10F
→
08/26 18:45, , 11F
你放在change裡面當然抓不到啊，你上傳圖片又不是1毫秒
08/26 18:45, 11F
→
08/26 18:46, , 12F
就傳完，你之後要用的時候再去抓就好啦
08/26 18:46, 12F
→
08/26 19:10, , 13F
感謝樓上大大說明，我做了微調，可以拿到長寬，但好像還是
08/26 19:10, 13F
→
08/26 19:10, , 14F
比觸發 11 行還來的慢? https://jsfiddle.net/b0f91bnt/2/
08/26 19:10, 14F
→
08/26 19:11, , 15F
如果 trueSize 那行正確的話，選取時右邊應該要出現預覽
08/26 19:11, 15F
→
08/26 19:25, , 16F
1.Jcrop沒有trueSize這個event
08/26 19:25, 16F
→
08/26 19:26, , 17F
08/26 19:26, 17F
→
08/26 19:27, , 18F
2.你要稍微搞清楚JS的scope，中文你可以搜尋變數範圍
08/26 19:27, 18F
→
08/26 19:38, , 19F
文件好像沒提到 trueSize 但我有測試過確實是 work 的
08/26 19:38, 19F
→
08/26 19:38, , 20F
http://jsfiddle.net/v2c7xzqg/ <--- 範例 第4行
08/26 19:38, 20F
→
08/26 19:39, , 21F
如果拿掉 trueSize 就會以原始比例進行擷取
08/26 19:39, 21F
→
08/26 19:41, , 22F
感謝第二點建議 我真的對 JS 的變數範圍完全不清楚 XD
08/26 19:41, 22F
→
08/26 19:44, , 23F
噢對我漏看了
08/26 19:44, 23F
→
08/26 19:47, , 24F
再請 jhnny97 大大指點一下哪裡有錯 寫JS好頭痛阿!!!
08/26 19:47, 24F
→
08/26 19:54, , 25F
你看完scope應該就沒問題啦，還有你的一二行沒有 ;
08/26 19:54, 25F
→
08/26 20:11, , 26F
感謝p大和j大指點 有試出來了QQ 但語法還是好難理解阿 XD
08/26 20:11, 26F
‣ 更多 ho2002 的文章
文章代碼(AID): #1PeHEK4F (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 ho2002 的文章
文章代碼(AID): #1PeHEK4F (Web_Design)