前言

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

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

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

 

實(shí)現(xiàn)

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

圖片上傳

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

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

網(wǎng)友評論