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

思路:

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

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

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

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

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

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

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

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

1. 選擇頁面 點擊拍照或相冊 都可以選擇圖片