這段時(shí)間做一個(gè)公眾號(hào)項(xiàng)目的開(kāi)發(fā)，其中有一個(gè)功能涉及到微信網(wǎng)頁(yè)調(diào)啟相機(jī)或者拍照 選擇圖片后進(jìn)行裁剪 然后轉(zhuǎn)換 上傳服務(wù)器。

思路:

1. 在本頁(yè)面點(diǎn)擊拍照或相冊(cè) 調(diào)啟相機(jī)或者相冊(cè) 選擇圖片后 將圖片傳到裁剪頁(yè)面

2. 在裁剪頁(yè)面顯示選擇的圖片 使用插件進(jìn)行裁剪

3. 點(diǎn)擊裁剪按鈕 將裁剪的內(nèi)容 利用 將裁剪的圖轉(zhuǎn)換

4. 在預(yù)覽頁(yè)面 展示裁剪后的圖片（ 可直接在img 的src中使用）

最開(kāi)始呢 想著微信有現(xiàn)成的js-sdk 可以使用，配合前端的 插件 應(yīng)該很容易就實(shí)現(xiàn)選擇圖片裁剪功能，然而。。我真是太單純了?。。?其中涉及到的問(wèn)題有好大一堆。。emmm 想哭，最關(guān)鍵的問(wèn)題就是跨域，關(guān)于跨域大家可以了解一下這篇博客跨域總結(jié)與解決辦法，寫(xiě)的很詳細(xì) ，原因 以及一些解決辦法，這是我看過(guò)大概比較全面的一篇博客了。下面羅列一下遇到的問(wèn)題

1. 微信選擇圖片然后進(jìn)行裁剪 使用 無(wú)法顯示選擇的圖片，原因是使用了微信選擇的圖片 某種程度上屬于跨域。。

2. 裁剪后的圖片進(jìn)行轉(zhuǎn)換，然而按照百度的方法 補(bǔ)充添加多種跨域解決辦法都無(wú)法成功的進(jìn)行. ("/jpg", 1)，因?yàn)榈?即時(shí)能夠在畫(huà)布上正常的顯示裁剪的圖片 也會(huì)因?yàn)榭缬蚨鵁o(wú)法獲取到圖畫(huà)數(shù)據(jù)（ : to '' on '': may not be .），百度后的解釋是 畫(huà)布污染 ，而百度后很多的解決辦法是補(bǔ)充img.="";然并卵，這種方式只適用于子域名可能會(huì)有效果，詳細(xì)的原因可以看這篇博客生成圖片報(bào)錯(cuò)的原因和解決方法

今天來(lái)了繼續(xù)百度，想著或許可以換一種思路，于是使用了原始的 type=file的選擇圖片，雖然這種方式效果并不好 但是好歹功能出來(lái)了，比起解決跨域問(wèn)題顯得更為便捷（關(guān)鍵是跨域問(wèn)題太難解決了，沒(méi)有找到好的解決方案，ε=(′ο｀*)))唉），上代碼：

1. 選擇頁(yè)面 點(diǎn)擊拍照或相冊(cè) 都可以選擇圖片