前言

如今的H5運(yùn)營(yíng)活動(dòng)中，有很多都是讓用戶拍照或者上傳圖片，然后對(duì)照片加濾鏡、加貼紙、評(píng)顏值之類的。尤其是一些拍照軟件公司的運(yùn)營(yíng)活動(dòng)幾乎全部都是這樣的。

博主也做過(guò)不少，為了省事就封裝了一個(gè)簡(jiǎn)單的圖片拖拽、裁剪的插件。其實(shí)網(wǎng)上也有很多類似的插件，只不過(guò)有的功能冗余體積大，有的甚至還依賴jquery。索性自己搞一個(gè)輕量的，只是不支持縮放功能。

DEMO（手機(jī)上看效果比較好，PC上沒有兼容處理），原碼

 

實(shí)現(xiàn)

這里簡(jiǎn)略說(shuō)下實(shí)現(xiàn)過(guò)程，只截取部分代碼片段，有興趣的可以看下原碼，反正也很簡(jiǎn)單。

圖片上傳

這個(gè)DEMO里使用的上傳方式是HTML5的 File Input，但是很多運(yùn)營(yíng)活動(dòng)需要調(diào)用微信的上傳&拍照接口，由于以前踩過(guò)坑這里就啰嗦兩句，幫助新人繞開。

· 在 wx.config 中的 jsApiList 屬性中添加 chooseImage 和 uploadImage API。<