這段時間做一個公眾號項目的開發，其中有一個功能涉及到微信網頁調啟相機或者拍照 選擇圖片后進行裁剪 然后轉換 上傳服務器。

思路:

1. 在本頁面點擊拍照或相冊 調啟相機或者相冊 選擇圖片后 將圖片傳到裁剪頁面

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

3. 點擊裁剪按鈕 將裁剪的內容 利用 將裁剪的圖轉換

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

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

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

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

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

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