前言
如今的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。<