Ⅰ 【微信小程序】圖片裁剪 前端裁剪 後端裁剪
微信小程序裁剪組件,支持前端裁剪和後端裁剪兩種方式
1.前端裁剪:將裁剪框指定的區域,單獨生成圖片,獲取裁剪圖片的臨時文件路徑
2.後端裁剪:獲取裁剪框相對於原圖的像素坐標位置,將裁剪區域坐標以及原圖臨時文件路徑,傳到後端進行圖片裁剪
https://gitee.com/gnliscream/image-cropper
使用微信小程序自定義組件開發
小程序自定義組件官網: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
添加image-cropper標簽,如下
可以在image-cropper標簽內添加操作按鈕,如下
首先需要在onLoad方法中,設置裁剪標簽屬性
然後添加按鈕相應的綁定方法
獲取到的res如下
獲取到的裁剪參數的對應關系圖
獲取到裁剪參數後,將原圖以及裁剪參數傳到後台進行裁剪
2.獲取裁剪圖片地址
獲取到的res如下