小程序?qū)崿F(xiàn)圖片裁剪上傳
更新時(shí)間：2022年05月24日 14:17:03 作者：隕石獵人
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)圖片裁剪上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)圖片裁剪上傳的具體代碼，供大家參考，具體內(nèi)容如下
<!--圖片展示 -->
<view bindtap='upEwm' data-which='1'>
? <view>第一個(gè)圖</view>
? <image style='width:200rpx;height:200rpx;background-color:red' src='{{headImg}}'></image>
</view>
<view bindtap='upEwm' data-which='2'>
? <view>第二個(gè)圖</view>
? <image style='width:200rpx;height:200rpx;background-color:red' src='{{ewmImg}}'></image>
</view>
?
<!--裁剪圖片浮層-->
<view class='fixed-upimg' wx:if="{{imageFixed}}">
? <view class="wx-content-info">
? ? <!-- <view class="wx-content-info" wx:if="{{imageSrc}}"> -->
? ? <view wx:if="{{isShowImg}}" class="wx-corpper" style="width:{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000">
? ? ? <view bindtap='upLoad' class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx">
? ? ? ? <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
? ? ? ? <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}rpx;height:{{cutH}}rpx;left:{{cutL}}rpx;top:{{cutT}}rpx">
? ? ? ? ? <view class="wx-cropper-view-box">
? ? ? ? ? ? <!-- <view class="wx-cropper-viewer">
? ? ? ? ? ? <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL - cutL}}rpx;top:{{cropperT - cutT}}rpx"></image>
? ? ? ? ? </view> -->
? ? ? ? ? ? <view class="wx-cropper-dashed-h"></view>
? ? ? ? ? ? <view class="wx-cropper-dashed-v"></view>
? ? ? ? ? ? <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
? ? ? ? ? ? <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
? ? ? ? ? </view>
? ? ? ? </view>
? ? ? </view>
? ? ? <!-- <view class="wx-cropper-drag-box"></view> -->
? ? </view>
? ? <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
? ? <button type="primary" bindtap="getImageInfo" style="position:fixed;bottom:120rpx;width:90%;left:50%;transform:translate3d(-50%,0,0)"> 確認(rèn)提交 </button>
?
? </view>
</view>js:
// pages/wx-cropper/index.js
// 手機(jī)的寬度
var windowWRPX = 750
// 拖動時(shí)候的 pageX
var pageX = 0
// 拖動時(shí)候的 pageY
var pageY = 0
?
var pixelRatio = wx.getSystemInfoSync().pixelRatio
?
// 調(diào)整大小時(shí)候的 pageX
var sizeConfPageX = 0
// 調(diào)整大小時(shí)候的 pageY
var sizeConfPageY = 0
?
var initDragCutW = 0
var initDragCutL = 0
var initDragCutH = 0
var initDragCutT = 0
?
// 移動時(shí) 手勢位移與 實(shí)際元素位移的比
var dragScaleP = 2
?
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? imageNum: '', //上傳的圖片id
? ? headImg: '', //頭像上傳
? ? ewmImg: '', //二維碼上傳
? ? imageFixed: false, //裁剪浮層
? ? // imageSrc: 'http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/images/testimg2.jpeg',
? ? imageSrc: '', //要裁剪的圖片
? ? returnImage: '',
? ? isShowImg: false,
? ? // 初始化的寬高
? ? cropperInitW: windowWRPX,
? ? cropperInitH: windowWRPX,
? ? // 動態(tài)的寬高
? ? cropperW: windowWRPX,
? ? cropperH: windowWRPX,
? ? // 動態(tài)的left top值
? ? cropperL: 0,
? ? cropperT: 0,
?
? ? // 圖片縮放值
? ? scaleP: 0,
? ? imageW: 0,
? ? imageH: 0,
?
? ? // 裁剪框 寬高
? ? cutW: 400,
? ? cutH: 400,
? ? cutL: 0,
? ? cutT: 0,
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onReady: function (options) {
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onLoad: function () {
? ? var _this = this
?
? ? // wx.showLoading({
? ? // ? title: '圖片加載中...',
? ? // })
?
? ? wx.getImageInfo({
? ? ? src: _this.data.imageSrc,
? ? ? success: function success(res) {
? ? ? ? var innerAspectRadio = res.width / res.height;
? ? ? ? console.log(innerAspectRadio)
? ? ? ? // 根據(jù)圖片的寬高顯示不同的效果 ? 保證圖片可以正常顯示
? ? ? ? if (innerAspectRadio >= 1) {
? ? ? ? ? _this.setData({
? ? ? ? ? ? cropperW: windowWRPX,
? ? ? ? ? ? cropperH: windowWRPX / innerAspectRadio,
? ? ? ? ? ? // 初始化left right
? ? ? ? ? ? cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
? ? ? ? ? ? cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
? ? ? ? ? ? // 裁剪框 ?寬高?
? ? ? ? ? ? // cutW: windowWRPX - 200,
? ? ? ? ? ? // cutH: windowWRPX / innerAspectRadio - 200,
? ? ? ? ? ? cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2),
? ? ? ? ? ? cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2),
? ? ? ? ? ? // 圖片縮放值
? ? ? ? ? ? scaleP: res.width * pixelRatio / windowWRPX,
? ? ? ? ? ? // 圖片原始寬度 rpx
? ? ? ? ? ? imageW: res.width * pixelRatio,
? ? ? ? ? ? imageH: res.height * pixelRatio
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? _this.setData({
? ? ? ? ? ? cropperW: windowWRPX * innerAspectRadio,
? ? ? ? ? ? cropperH: windowWRPX,
? ? ? ? ? ? // 初始化left right
? ? ? ? ? ? cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
? ? ? ? ? ? cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
? ? ? ? ? ? // 裁剪框的寬高
? ? ? ? ? ? // cutW: windowWRPX * innerAspectRadio - 66,
? ? ? ? ? ? // cutH: 400,
? ? ? ? ? ? cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2),
? ? ? ? ? ? cutT: Math.ceil((windowWRPX - 340) / 2),
? ? ? ? ? ? // 圖片縮放值
? ? ? ? ? ? scaleP: res.width * pixelRatio / windowWRPX,
? ? ? ? ? ? // 圖片原始寬度 rpx
? ? ? ? ? ? imageW: res.width * pixelRatio,
? ? ? ? ? ? imageH: res.height * pixelRatio
? ? ? ? ? })
? ? ? ? }
? ? ? ? _this.setData({
? ? ? ? ? isShowImg: true
? ? ? ? })
? ? ? ? wx.hideLoading()
? ? ? }
? ? })
? },
?
? // 拖動時(shí)候觸發(fā)的touchStart事件
? contentStartMove(e) {
? ? pageX = e.touches[0].pageX
? ? pageY = e.touches[0].pageY
? },
?
? // 拖動時(shí)候觸發(fā)的touchMove事件
? contentMoveing(e) {
? ? var _this = this
? ? // _this.data.cutL + (e.touches[0].pageX - pageX)
? ? // console.log(e.touches[0].pageX)
? ? // console.log(e.touches[0].pageX - pageX)
? ? var dragLengthX = (pageX - e.touches[0].pageX) * dragScaleP
? ? var dragLengthY = (pageY - e.touches[0].pageY) * dragScaleP
? ? var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
? ? var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
? ? var maxX = _this.data.cropperW - _this.data.cutW
? ? var maxY = _this.data.cropperH - _this.data.cutH
? ? this.setData({
? ? ? cutL: Math.min(maxX, minX),
? ? ? cutT: Math.min(maxY, minY),
? ? })
? ? console.log(`${maxX} ----- ${minX}`)
? ? pageX = e.touches[0].pageX
? ? pageY = e.touches[0].pageY
? },
?
? // 獲取圖片
? getImageInfo() {
? ? var _this = this
? ? console.log('shengcheng:' + _this.data.imageSrc)
? ? wx.showLoading({
? ? ? title: '圖片生成中...',
? ? })
? ? // wx.downloadFile({
? ? // ? url:_this.data.imageSrc, //僅為示例，并非真實(shí)的資源 ? ??
? ? // ? success: function (res) {
? ? // 將圖片寫入畫布 ? ? ? ? ? ??
? ? const ctx = wx.createCanvasContext('myCanvas')
? ? // ctx.drawImage(res.tempFilePath)
? ? ctx.drawImage(_this.data.imageSrc)
?
? ? ctx.draw(true, () => {
? ? ? // 獲取畫布要裁剪的位置和寬度 ? 均為百分比 * 畫布中圖片的寬度 ? ?保證了在微信小程序中裁剪的圖片模糊 ?位置不對的問題
? ? ? var canvasW = (_this.data.cutW / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
? ? ? var canvasH = (_this.data.cutH / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
? ? ? var canvasL = (_this.data.cutL / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
? ? ? var canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
? ? ? console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ?------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)
? ? ? wx.canvasToTempFilePath({
? ? ? ? x: canvasL,
? ? ? ? y: canvasT,
? ? ? ? width: canvasW,
? ? ? ? height: canvasH,
? ? ? ? destWidth: canvasW,
? ? ? ? destHeight: canvasH,
? ? ? ? canvasId: 'myCanvas',
? ? ? ? success: function (res) {
? ? ? ? ? wx.hideLoading()
? ? ? ? ? // 成功獲得地址的地方
? ? ? ? ? console.log('end:' + res.tempFilePath)
? ? ? ? ? // 判斷時(shí)上傳頭像還是二維碼
? ? ? ? ? _this.setData({
? ? ? ? ? ? imageFixed: false,
? ? ? ? ? })
? ? ? ? ? if (_this.data.imageNum == '1') {
? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? headImg: res.tempFilePath
? ? ? ? ? ? })
? ? ? ? ? } else if (_this.data.imageNum == '2') {
? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ewmImg: res.tempFilePath
? ? ? ? ? ? })
? ? ? ? ? }
?
? ? ? ? }
? ? ? })
? ? })
? ? // ? }
?
?
? ? // })
? },
?
? // 設(shè)置大小的時(shí)候觸發(fā)的touchStart事件
? dragStart(e) {
? ? var _this = this
? ? sizeConfPageX = e.touches[0].pageX
? ? sizeConfPageY = e.touches[0].pageY
? ? initDragCutW = _this.data.cutW
? ? initDragCutL = _this.data.cutL
? ? initDragCutT = _this.data.cutT
? ? initDragCutH = _this.data.cutH
? },
?
? // 設(shè)置大小的時(shí)候觸發(fā)的touchMove事件
? dragMove(e) {
? ? var _this = this
? ? var dragType = e.target.dataset.drag
? ? switch (dragType) {
? ? ? case 'right':
? ? ? ? var dragLength = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
? ? ? ? if (initDragCutW >= dragLength) {
? ? ? ? ? // 如果 移動小于0 說明是在往下啦 ?放大裁剪的高度 ?這樣一來 圖片的高度 ?最大 等于 圖片的top值加 當(dāng)前圖片的高度 ?否則就說明超出界限
? ? ? ? ? if (dragLength < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? cutW: initDragCutW - dragLength
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? // 如果是移動 大于0 ?說明在縮小 ?只需要縮小的距離小于原本裁剪的高度就ok
? ? ? ? ? if (dragLength > 0) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? cutW: initDragCutW - dragLength
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? else {
? ? ? ? ? ? return
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? return
? ? ? ? }
? ? ? ? break;
? ? ? case 'left':
? ? ? ? var dragLength = (dragLength = sizeConfPageX - e.touches[0].pageX) * dragScaleP
? ? ? ? console.log(dragLength)
? ? ? ? if (initDragCutW >= dragLength && initDragCutL > dragLength) {
? ? ? ? ? if (dragLength < 0 && Math.abs(dragLength) >= initDragCutW) return
? ? ? ? ? this.setData({
? ? ? ? ? ? cutL: initDragCutL - dragLength,
? ? ? ? ? ? cutW: initDragCutW + dragLength
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? return;
? ? ? ? }
? ? ? ? break;
? ? ? case 'top':
? ? ? ? var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
? ? ? ? if (initDragCutH >= dragLength && initDragCutT > dragLength) {
? ? ? ? ? if (dragLength < 0 && Math.abs(dragLength) >= initDragCutH) return
? ? ? ? ? this.setData({
? ? ? ? ? ? cutT: initDragCutT - dragLength,
? ? ? ? ? ? cutH: initDragCutH + dragLength
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? return;
? ? ? ? }
? ? ? ? break;
? ? ? case 'bottom':
? ? ? ? var dragLength = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
? ? ? ? // console.log(_this.data.cropperH > _this.data.cutT + _this.data.cutH)
? ? ? ? console.log(dragLength)
? ? ? ? console.log(initDragCutH >= dragLength)
? ? ? ? console.log(_this.data.cropperH > initDragCutT + _this.data.cutH)
? ? ? ? // 必須是 dragLength 向上縮小的時(shí)候必須小于原本的高度
? ? ? ? if (initDragCutH >= dragLength) {
? ? ? ? ? // 如果 移動小于0 說明是在往下啦 ?放大裁剪的高度 ?這樣一來 圖片的高度 ?最大 等于 圖片的top值加 當(dāng)前圖片的高度 ?否則就說明超出界限
? ? ? ? ? if (dragLength < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? cutH: initDragCutH - dragLength
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? // 如果是移動 大于0 ?說明在縮小 ?只需要縮小的距離小于原本裁剪的高度就ok
? ? ? ? ? if (dragLength > 0) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? cutH: initDragCutH - dragLength
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? else {
? ? ? ? ? ? return
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? return
? ? ? ? }
? ? ? ? break;
? ? ? case 'rightBottom':
? ? ? ? var dragLengthX = (sizeConfPageX - e.touches[0].pageX) * dragScaleP
? ? ? ? var dragLengthY = (sizeConfPageY - e.touches[0].pageY) * dragScaleP
? ? ? ? if (initDragCutH >= dragLengthY && initDragCutW >= dragLengthX) {
? ? ? ? ? // bottom 方向的變化
? ? ? ? ? if ((dragLengthY < 0 && _this.data.cropperH > initDragCutT + _this.data.cutH) || (dragLengthY > 0)) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? cutH: initDragCutH - dragLengthY
? ? ? ? ? ? })
? ? ? ? ? }
?
? ? ? ? ? // right 方向的變化
? ? ? ? ? if ((dragLengthX < 0 && _this.data.cropperW > initDragCutL + _this.data.cutW) || (dragLengthX > 0)) {
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? cutW: initDragCutW - dragLengthX
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? else {
? ? ? ? ? ? return
? ? ? ? ? }
? ? ? ? } else {
? ? ? ? ? return
? ? ? ? }
? ? ? ? break;
? ? ? default:
? ? ? ? break;
? ? }
? },
? // 圖片上傳
? upLoad: function () {
?
? },
? upEwm: function (e) {
? ? var _this = this
? ? wx.chooseImage({
? ? ? count: 1, // 默認(rèn)9
? ? ? sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
? ? ? sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
? ? ? success: function (res) {
? ? ? ? // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
? ? ? ? var tempFilePaths = res.tempFilePaths;
? ? ? ? // var mode = parseFloat(e.currentTarget.dataset.current);
? ? ? ? console.log('shangchuan:' + tempFilePaths)
? ? ? ? console.log(e.currentTarget.dataset.which);
? ? ? ? _this.setData({
? ? ? ? ? imageFixed: true,
? ? ? ? ? imageSrc: tempFilePaths.join(),
? ? ? ? ? imageNum: e.currentTarget.dataset.which
? ? ? ? })
? ? ? ? // start
? ? ? ? wx.getImageInfo({
? ? ? ? ? src: _this.data.imageSrc,
? ? ? ? ? success: function success(res) {
? ? ? ? ? ? var innerAspectRadio = res.width / res.height;
? ? ? ? ? ? console.log('bili' + innerAspectRadio)
? ? ? ? ? ? // 根據(jù)圖片的寬高顯示不同的效果 ? 保證圖片可以正常顯示
?
?
? ? ? ? ? ? if (innerAspectRadio == '1') {
? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? imageFixed: false,
? ? ? ? ? ? ? })
? ? ? ? ? ? ? // 判斷時(shí)上傳頭像還是二維碼
? ? ? ? ? ? ? if (_this.data.imageNum == '1') {
? ? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? ? headImg: tempFilePaths.join()
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? } else if (_this.data.imageNum == '2') {
? ? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? ? ewmImg: tempFilePaths.join()
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
?
? ? ? ? ? ? } else if (innerAspectRadio > 1) {
? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? cropperW: windowWRPX,
? ? ? ? ? ? ? ? cropperH: windowWRPX / innerAspectRadio,
? ? ? ? ? ? ? ? // 初始化left right
? ? ? ? ? ? ? ? cropperL: Math.ceil((windowWRPX - windowWRPX) / 2),
? ? ? ? ? ? ? ? cropperT: Math.ceil((windowWRPX - windowWRPX / innerAspectRadio) / 2),
? ? ? ? ? ? ? ? // 裁剪框 ?寬高?
? ? ? ? ? ? ? ? // cutW: windowWRPX - 200,
? ? ? ? ? ? ? ? // cutH: windowWRPX / innerAspectRadio - 200,
? ? ? ? ? ? ? ? cutL: Math.ceil((windowWRPX - windowWRPX + 340) / 2),
? ? ? ? ? ? ? ? cutT: Math.ceil((windowWRPX / innerAspectRadio - (windowWRPX / innerAspectRadio - 20)) / 2),
? ? ? ? ? ? ? ? // 圖片縮放值
? ? ? ? ? ? ? ? scaleP: res.width * pixelRatio / windowWRPX,
? ? ? ? ? ? ? ? // 圖片原始寬度 rpx
? ? ? ? ? ? ? ? imageW: res.width * pixelRatio,
? ? ? ? ? ? ? ? imageH: res.height * pixelRatio
? ? ? ? ? ? ? })
? ? ? ? ? ? } else {
? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? cropperW: windowWRPX * innerAspectRadio,
? ? ? ? ? ? ? ? cropperH: windowWRPX,
? ? ? ? ? ? ? ? // 初始化left right
? ? ? ? ? ? ? ? cropperL: Math.ceil((windowWRPX - windowWRPX * innerAspectRadio) / 2),
? ? ? ? ? ? ? ? cropperT: Math.ceil((windowWRPX - windowWRPX) / 2),
? ? ? ? ? ? ? ? // 裁剪框的寬高
? ? ? ? ? ? ? ? // cutW: windowWRPX * innerAspectRadio - 66,
? ? ? ? ? ? ? ? // cutH: 400,
? ? ? ? ? ? ? ? cutL: Math.ceil((windowWRPX * innerAspectRadio - (windowWRPX * innerAspectRadio - 20)) / 2),
? ? ? ? ? ? ? ? cutT: Math.ceil((windowWRPX - 340) / 2),
? ? ? ? ? ? ? ? // 圖片縮放值
? ? ? ? ? ? ? ? scaleP: res.width * pixelRatio / windowWRPX,
? ? ? ? ? ? ? ? // 圖片原始寬度 rpx
? ? ? ? ? ? ? ? imageW: res.width * pixelRatio,
? ? ? ? ? ? ? ? imageH: res.height * pixelRatio
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? isShowImg: true
? ? ? ? ? ? })
? ? ? ? ? ? wx.hideLoading()
? ? ? ? ? }
? ? ? ? })
?
? ? ? ? // end
? ? ? }
? ? })
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
?
? },
?
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
?
? },
?
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
?
? },
?
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {
?
? }
})css:
/* pages/wx-cropper/index.wxss */
.fixed-upimg{
? ? position: fixed;
? top: 0;
? left: 0;
? right: 0;
? bottom: 0;
? background-color: #fff;
}
.wx-content-info{
? position: fixed;
? top: 130rpx;
? left: 0;
? right: 0;
? bottom: 0;
?
}
?
.wx-corpper{
? position: relative;
? overflow: hidden;
? -webkit-user-select: none;
? -moz-user-select: none;
? -ms-user-select: none;
? user-select: none;
? -webkit-tap-highlight-color: transparent;
? -webkit-touch-callout: none;
? box-sizing: border-box;
}
?
.wx-corpper-content{
? ? position: absolute;
? ? top: 0;
? ? right: 0;
? ? bottom: 0;
? ? left: 0;
}
?
.wx-corpper-content image {
? ? display: block;
? ? width: 100%;
? ? min-width: 0 !important;
? ? max-width: none !important;
? ? height: 100%;
? ? min-height: 0 !important;
? ? max-height: none !important;
? ? image-orientation: 0deg !important;
? ? margin: 0 auto;
}
?
/* 移動圖片效果 */
.wx-cropper-drag-box{
? ? position: absolute;
? ? top: 0;
? ? right: 0;
? ? bottom: 0;
? ? left: 0;
? ? cursor: move;
? ? background: rgba(0,0,0,0.6);
? ? z-index: 1;
}
?
/* 內(nèi)部的信息 */
.wx-corpper-crop-box{
? ? position: absolute;
? ? width: 500rpx;
? ? height: 500rpx;
? ? background: rgba(255,255,255,0.3);
? ? z-index: 2;
}
?
.wx-corpper-crop-box .wx-cropper-view-box {
? ? position: relative;
? ? display: block;
? ? width: 100%;
? ? height: 100%;
? ? overflow: visible;
? ? outline: 1px solid #69f;
? ? outline-color: rgba(102, 153, 255, .75)
}
?
/* 橫向虛線 */
.wx-cropper-dashed-h{
? ? position: absolute;
? ? top: 33.33333333%;
? ? left: 0;
? ? width: 100%;
? ? height: 33.33333333%;
? ? border-top: 1px dashed rgba(255,255,255,0.5);
? ? border-bottom: 1px dashed rgba(255,255,255,0.5);
}
?
/* 縱向虛線 */
.wx-cropper-dashed-v{
? ? position: absolute;
? ? left: 33.33333333%;
? ? top: 0;
? ? width: 33.33333333%;
? ? height: 100%;
? ? border-left: 1px dashed rgba(255,255,255,0.5);
? ? border-right: 1px dashed rgba(255,255,255,0.5);
}
?
/* 四個(gè)方向的線 ?為了之后的拖動事件*/
.wx-cropper-line-t{
? ? position: absolute;
? ? display: block;
? ? width: 100%;
? ? background-color: #69f;
? ? top: 0;
? ? left: 0;
? ? height: 1px;
? ? opacity: 0.1;
? ? cursor: n-resize;
}
?
.wx-cropper-line-t::before{
? content: '';
? position: absolute;
? top: 50%;
? right: 0rpx;
? width: 100%;
? -webkit-transform: translate3d(0,-50%,0);
? transform: translate3d(0,-50%,0);
? bottom: 0;
? height: 41rpx;
? background: transparent;
? z-index: 11;
}
?
.wx-cropper-line-r{
? ? position: absolute;
? ? display: block;
? ? background-color: #69f;
? ? top: 0;
? ? right: 0px;
? ? width: 1px;
? ? opacity: 0.1;
? ? height: 100%;
? ? cursor: e-resize;
}
.wx-cropper-line-r::before{
? content: '';
? position: absolute;
? top: 0;
? left: 50%;
? width: 41rpx;
? -webkit-transform: translate3d(-50%,0,0);
? transform: translate3d(-50%,0,0);
? bottom: 0;
? height: 100%;
? background: transparent;
? z-index: 11;
}
?
.wx-cropper-line-b{
? ? position: absolute;
? ? display: block;
? ? width: 100%;
? ? background-color: #69f;
? ? bottom: 0;
? ? left: 0;
? ? height: 1px;
? ? opacity: 0.1;
? ? cursor: s-resize;
}
?
.wx-cropper-line-b::before{
? content: '';
? position: absolute;
? top: 50%;
? right: 0rpx;
? width: 100%;
? -webkit-transform: translate3d(0,-50%,0);
? transform: translate3d(0,-50%,0);
? bottom: 0;
? height: 41rpx;
? background: transparent;
? z-index: 11;
}
?
.wx-cropper-line-l{
? ? position: absolute;
? ? display: block;
? ? background-color: #69f;
? ? top: 0;
? ? left: 0;
? ? width: 1px;
? ? opacity: 0.1;
? ? height: 100%;
? ? cursor: w-resize;
}
.wx-cropper-line-l::before{
? content: '';
? position: absolute;
? top: 0;
? left: 50%;
? width: 41rpx;
? -webkit-transform: translate3d(-50%,0,0);
? transform: translate3d(-50%,0,0);
? bottom: 0;
? height: 100%;
? background: transparent;
? z-index: 11;
}
?
.wx-cropper-point{
? ? width: 5px;
? ? height: 5px;
? ? background-color: #69f;
? ? opacity: .75;
? ? position: absolute;
? ? z-index: 3;
}
?
.point-t{
? ? top: -3px;
? ? left: 50%;
? ? margin-left: -3px;
? ? cursor: n-resize;
}
?
.point-tr{
? ? top: -3px;
? ? left: 100%;
? ? margin-left: -3px;
? ? cursor: n-resize;
}
?
.point-r{
? ? top: 50%;
? ? left:100%;
? ? margin-left: -3px;
? ? margin-top: -3px;
? ? cursor: n-resize;
}
?
.point-rb{
? ? left: 100%;
? ? top: 100%;
? ? -webkit-transform: translate3d(-50%,-50%,0);
? ? transform: translate3d(-50%,-50%,0);
? ? cursor: n-resize;
? ? width: 24rpx;
? ? height: 24rpx;
? ? background-color: #69f;
? ? position: absolute;
? ? z-index: 1112;
? ? opacity: 1;
}
?
.point-b{
? ? left:50%;
? ? top: 100%;
? ? margin-left: -3px;
? ? margin-top: -3px;
? ? cursor: n-resize;
}
?
.point-bl{
? ? left:0%;
? ? top: 100%;
? ? margin-left: -3px;
? ? margin-top: -3px;
? ? cursor: n-resize;
}
?
.point-l{
? ? left:0%;
? ? top: 50%;
? ? margin-left: -3px;
? ? margin-top: -3px;
? ? cursor: n-resize;
}
?
.point-lt{
? ? left:0%;
? ? top: 0%;
? ? margin-left: -3px;
? ? margin-top: -3px;
? ? cursor: n-resize;
}
?
/* 裁剪框預(yù)覽內(nèi)容 */
.wx-cropper-viewer{
? position: relative;
? width: 100%;
? height: 100%;
? overflow: hidden;
}
?
.wx-cropper-viewer image{
? position: absolute;
? z-index: 2;
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于three.js歐拉角和四元數(shù)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
H5跳轉(zhuǎn)小程序按鈕不顯示(wx-open-launch-weapp)踩坑指南
這篇文章主要給大家介紹了關(guān)于H5跳轉(zhuǎn)小程序按鈕不顯示(wx-open-launch-weapp)踩坑的相關(guān)資料,文中介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當(dāng)檢測某個(gè)對象是否擁有某個(gè)屬性時(shí)，hasOwnProperty 是唯一可以完成這一任務(wù)的方法，在 for in 循環(huán)時(shí)，建議增加 hasOwnProperty 進(jìn)行判斷，可以有效避免擴(kuò)展本地原型而引起的錯(cuò)誤2013-06-06
重構(gòu)Javascript代碼示例(重構(gòu)前后對比)
回顧頭來看看那些Javascript腳本，有寫得不太理想，過于復(fù)雜。現(xiàn)抽取出來，重構(gòu)它們,想學(xué)習(xí)javascript重構(gòu)的朋友可以參考下啊，網(wǎng)本文可以幫助你的2013-01-01
這篇文章主要為大家詳細(xì)介紹了小程序表單認(rèn)證布局及驗(yàn)證的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
html判斷當(dāng)前頁面是否在iframe中的實(shí)例
下面小編就為大家?guī)硪黄猦tml判斷當(dāng)前頁面是否在iframe中的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片到服務(wù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
在父頁面得到zTree已選中的節(jié)點(diǎn)的方法
這篇文章主要介紹了在父頁面得到zTree已選中的節(jié)點(diǎn)的方法,實(shí)例分析了zTree針對節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能
這篇文章主要介紹了如何利用HTML和JavaScript實(shí)現(xiàn)監(jiān)控切屏功能，監(jiān)控是否離開當(dāng)前頁面，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-03-03
IE6-IE9使用JSON、table.innerHTML所引發(fā)的問題
這篇文章主要介紹了IE6-IE9使用JSON、table.innerHTML所引發(fā)的問題 ,需要的朋友可以參考下2015-12-12