7.微信小程序做按比例截取图片

最新推荐文章于 2024-03-30 11:41:09 发布
最新推荐文章于 2024-03-30 11:41:09 发布
阅读量1.4k 收藏 5
点赞数 2
分类专栏： 小程序 文章标签： 小程序 canvas js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43544841/article/details/119886948
版权

项目需求是需要做一个上传图片按1:1，16:9 ，3:4一个图片截取，网上查了好久，找到一个cropper截取组件 ，现在把接入以及修改步骤记录一下
截取组件原地址找不到了，贴一下代码吧（谢谢大佬分享了！！！)
wxml

<view class="wx-cropper-info" wx:if="{{isShowCropper}}">
    <view class='cropper-content'>
        <view class="wx-corpper" style="width:{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000">
            <view class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx">
                <image class="img" src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
                <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing"
                    bindtouchend="contentTouchEnd" style="left:{{cutL}}rpx;top:{{cutT}}rpx;right:{{cutR}}rpx;bottom:{{cutB}}rpx">
                    <view class="wx-cropper-view-box">
                        <view class="wx-cropper-dashed-h"></view>
                        <view class="wx-cropper-dashed-v"></view>
                        <!-- catchtouchmove="dragMove" -->
                        <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" catchtouchend="dragEnd"></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>
    </view>
    <view class="cropper-configs" wx:if="{{!isDefault}}">
        <button type="primary reverse" class="btn" bindtap="changeSome" data-index="1" style='margin-top: 30rpx;'> 1:1 </button>
        <button type="primary reverse" class="btn" bindtap="changeSome" data-index="0.75"style='margin-top: 30rpx;'> 3:4 </button>
        <button type="primary reverse" class="btn" bindtap="changeSome" data-index="0.5625" style='margin-top: 30rpx;'> 9:16 </button>
    </view>
    <view class='cropper-config'>
        <button type="primary reverse" class="btn" bindtap="cancelCropper" style='margin-top: 30rpx;'> 取消 </button>
        <button type="primary" class="cropper-confirm btn" bindtap="confirmCropper" style='margin-top: 30rpx;'>  确认 </button>
    </view>
    <canvas wx:if="{{!isCircleCrop}}" canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{qualityWidth}}px;height:{{qualityWidth/innerAspectRadio}}px;top:-9999px;left:-9999px;"></canvas>
    <canvas wx:else canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{canvasW}}px;height:{{canvasH}}px;top:-9999px;left:-9999px;"></canvas>
</view>

js

const defaultData = {
    isShowCropper:false,
    // 初始化的宽高
    cropperInitW: 750,
    cropperInitH: 750,
    // 动态的宽高
    cropperW: 750,
    cropperH: 750,
    // 动态的left top值
    cropperL: 0,
    cropperT: 0,

    transL: 0,
    transT: 0,

    // 图片缩放值
    scaleP: 0,
    imageW: 0,
    imageH: 0,

    // 裁剪框 宽高
    cutL: 0,
    cutT: 0,
    cutB: 0,
    cutR: 0,

    qualityWidth: '',
    innerAspectRadio: 750 / wx.getSystemInfoSync().windowWidth,
    
    C_CONSTANTS:{
        SCREEN_WIDTH : 750,
        PAGE_X:0, // 手按下的x位置
        PAGE_Y:0, // 手按下y的位置
        PR : wx.getSystemInfoSync().pixelRatio, // dpi
        T_PAGE_X:{}, // 手移动的时候x的位置
        T_PAGE_Y:{}, // 手移动的时候Y的位置
        CUT_L:0, // 初始化拖拽元素的left值
        CUT_T:0, // 初始化拖拽元素的top值
        CUT_R:0, // 初始化拖拽元素的
        CUT_B:0, // 初始化拖拽元素的
        CUT_W:0, // 初始化拖拽元素的宽度
        CUT_H:0, //  初始化拖拽元素的高度
        IMG_RATIO:0, // 图片比例
        IMG_REAL_W:0, // 图片实际的宽度
        IMG_REAL_H:0, // 图片实际的高度
        IMG_TYPE:'',//图片的格式
        DRAFG_MOVE_RATIO : 750 / wx.getSystemInfoSync().windowWidth //移动时候的比例
    }
};
let data = {};

try{
    data = JSON.parse(JSON.stringify(defaultData));
}catch(e){console.log(e)};

Component({
    properties: {
        imageSrc:{
            type:String,
            value:'',
            observer(newVal, oldVal) {
                if(newVal !== oldVal){
                    this.setData({
                        isShowCropper:true
                    },() => {
                        this.loadImage();
                    })
                }
                
            }
        },
        isCircleCrop:{
            type:Boolean,
            value:false
        },
        isDefault: {
            type: Boolean,
            value: false
        },
        enableScale:{
            type:Boolean,
            value:false
        },
        ratio:{
            type:Number,
            value:1,
        }
    },
    observers:{
        ratio(val) {
            let that = this;
            console.log(val,'1111')
            that.loadImage()
        }
    },
    data,
    ready(){
        if(this.data.isCircleCrop){
            //圆形裁剪 强制比例为1
            this.setData({
                ratio:1
            })
        }
    },
    methods: {
        // 修改裁剪比例
        changeSome(e){
            let that = this;
            // console.log(e.currentTarget.dataset.index)
            that.triggerEvent('changeScale', {
                'scale': e.currentTarget.dataset.index
              })
            // that.setData({
            //     ratio:e.currentTarget.dataset.index,
            // })
        },
        loadImage() {
            let {ratio,imageSrc} = this.data;
            let {IMG_REAL_W,IMG_REAL_H,IMG_RATIO,SCREEN_WIDTH,IMG_TYPE} = this.data.C_CONSTANTS;
            wx.getImageInfo({
                src: imageSrc,
                success: res => {
                    IMG_REAL_W = res.width;
                    IMG_REAL_H = res.height;
                    IMG_RATIO = IMG_REAL_W / IMG_REAL_H;
                    IMG_TYPE = res.type === 'png' ? 'png' : 'jpg';
                    // 根据图片的宽高显示不同的效果   保证图片可以正常显示
                    let temp = {};
                    let cropperData = {};
                    if (IMG_RATIO >= 1) {
                        cropperData = {
                            cropperW: SCREEN_WIDTH,
                            cropperH: SCREEN_WIDTH / IMG_RATIO,
                            // 初始化left right
                            cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
                            cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2)
                        }
                        if(ratio > 1){
                            temp = {
                                cutL: (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2,
                                cutT: (SCREEN_WIDTH / IMG_RATIO - SCREEN_WIDTH / IMG_RATIO / ratio ) / 2,
                                cutR: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2 - SCREEN_WIDTH / IMG_RATIO,
                                cutB: SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - SCREEN_WIDTH / IMG_RATIO / ratio ) / 2 - SCREEN_WIDTH / IMG_RATIO / ratio
                            }
                        }else{
                            temp = {
                                cutT:0,
                                cutB:0,
                                cutL:(SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO * ratio) / 2,
                                cutR: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO * ratio) / 2 - SCREEN_WIDTH / IMG_RATIO * ratio
                            }
                        }
                    } else {
                        cropperData = {
                            cropperW: SCREEN_WIDTH * IMG_RATIO,
                            cropperH: SCREEN_WIDTH,
                            // 初始化left right
                            cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
                            cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2)
                        }
                        if(ratio > 1){
                            temp = {
                                cutL:0,
                                cutR:0,
                                cutT: (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO / ratio) / 2,
                                cutB: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO / ratio) / 2 - SCREEN_WIDTH * IMG_RATIO / ratio
                            }
                        }else{
                            temp = {
                                cutL: (SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO * ratio) / 2,
                                cutR: SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO * ratio) / 2 - SCREEN_WIDTH * IMG_RATIO * ratio,
                                cutT: (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2,
                                cutB: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2 - SCREEN_WIDTH * IMG_RATIO
                            }
    
                        }
                    }
                    this.setData({
                        C_CONSTANTS:Object.assign({},this.data.C_CONSTANTS,{
                            IMG_REAL_W,
                            IMG_REAL_H,
                            IMG_RATIO,
                            IMG_TYPE
                        }),
                        isShowCropper: true,
                        // 图片缩放值
                        scaleP: IMG_REAL_W / SCREEN_WIDTH,
                        qualityWidth: IMG_REAL_W,
                        innerAspectRadio: IMG_RATIO,
                        ...temp,
                        ...cropperData
                    })
                }
            });
            
        },
        contentStartMove(e) {
            this.setData({
                'C_CONSTANTS.PAGE_X':e.touches[0].pageX,
                'C_CONSTANTS.PAGE_Y':e.touches[0].pageY
            })
        },
        // 拖动时候触发的touchMove事件
        contentMoveing(e) {
            let {PAGE_X,PAGE_Y,DRAFG_MOVE_RATIO} = this.data.C_CONSTANTS;
            let {cutL,cutR,cutT,cutB} = this.data;
            let dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
            let dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
            // 左移
            if (dragLengthX > 0) {
                if (cutL - dragLengthX < 0) dragLengthX = cutL
            } else {
                if (cutR + dragLengthX < 0) dragLengthX = -cutR
            }
    
            if (dragLengthY > 0) {
                if (cutT - dragLengthY < 0) dragLengthY = cutT
            } else {
                if (cutB + dragLengthY < 0) dragLengthY = -cutB
            }
            this.setData({
                cutL: cutL - dragLengthX,
                cutT: cutT - dragLengthY,
                cutR: cutR + dragLengthX,
                cutB: cutB + dragLengthY,
                'C_CONSTANTS.PAGE_X':e.touches[0].pageX,
                'C_CONSTANTS.PAGE_Y':e.touches[0].pageY
            });
        },
        // 设置大小的时候触发的touchStart事件
        dragStart(e) {
            let {cutL,cutR,cutT,cutB} = this.data;
            this.setData({
                C_CONSTANTS:Object.assign({},this.data.C_CONSTANTS,{
                    T_PAGE_X : e.touches[0].pageX,
                    T_PAGE_Y : e.touches[0].pageY,
                    CUT_L : cutL,
                    CUT_R : cutR,
                    CUT_B : cutB,
                    CUT_T : cutT
                })
            })
            
        },
        // 设置大小的时候触发的touchMove事件
        dragMove(e) {
            let dragType = e.target.dataset.drag
            let {ratio,cropperW,cropperH,cutL,cutT,cutR,cutB,enableScale} = this.data;
            let {CUT_R,CUT_L,CUT_T,CUT_B,T_PAGE_X,T_PAGE_Y,DRAFG_MOVE_RATIO} = this.data.C_CONSTANTS;
            let dragLength;
            switch (dragType) {
                case 'right':
                    dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
                    if (CUT_R + dragLength < 0) dragLength = -CUT_R
                    cutR = CUT_R + dragLength;
                    if(enableScale){
                        cutT = CUT_T + dragLength / ratio;
                    }
                    if(cutR < 0 || cutT < 0 || cutT > cropperH || cutR > cropperW) return;
                    break;
                case 'left':
                    dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
                    if (CUT_L - dragLength < 0) dragLength = CUT_L
                    if ((CUT_L - dragLength) > (this.data.cropperW - this.data.cutR)) dragLength = CUT_L - (this.data.cropperW - this.data.cutR)
                    cutL = CUT_L - dragLength;
                    if(enableScale){
                        cutT = CUT_T - dragLength / ratio;
                    }
                    if(cutL < 0 || cutT < 0 || cutT > cropperH || cutL > cropperW) return;
                    break;
                case 'top':
                    dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
                    if (CUT_T - dragLength < 0) dragLength = CUT_T
                    if ((CUT_T - dragLength) > (this.data.cropperH - this.data.cutB)) dragLength = CUT_T - (this.data.cropperH - this.data.cutB)
                    cutT = CUT_T - dragLength;
                    if(enableScale){
                        cutR = CUT_R - dragLength * ratio;
                    }
                    break;
                case 'bottom':
                    dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
                    if (CUT_B + dragLength < 0) dragLength = -CUT_B
                    cutB = CUT_B + dragLength;
                    if(enableScale){
                        cutR = CUT_R + dragLength * ratio;
                    }
                    if(cutR < 0 || cutT < 0 || cutT > cropperH || cutR > cropperW) return;
                    break;
                default:'';
            }
            this.setData({
                cutL,
                cutT,
                cutR,
                cutB
            });
        },
        contentTouchEnd(){},  
        // 获取图片
        confirmCropper() {
            const isCircleCrop = this.data.isCircleCrop;
            if(isCircleCrop){
                this.circleCrop()
            }else{
                this.normalCropper();
            }
        },

        normalCropper(){
            let {imageSrc,cropperW,cropperH,cutL,cutT,cutR,cutB} = this.data;
            let {IMG_REAL_W,IMG_REAL_H,IMG_TYPE} = this.data.C_CONSTANTS;
            // 将图片写入画布
            const ctx = wx.createCanvasContext('cropper',this)
            ctx.drawImage(imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
            ctx.draw(true, () => {
                // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
                let canvasW = ((cropperW - cutL - cutR) / cropperW) * IMG_REAL_W
                let canvasH = ((cropperH - cutT - cutB) / cropperH) * IMG_REAL_H
                let canvasL = (cutL / cropperW) * IMG_REAL_W
                let canvasT = (cutT / cropperH) * IMG_REAL_H
                wx.canvasToTempFilePath({
                    x: canvasL,
                    y: canvasT,
                    width: canvasW,
                    height: canvasH,
                    destWidth: canvasW,
                    destHeight: canvasH,
                    fileType:IMG_TYPE || 'jpg',
                    canvasId: 'cropper',
                    success: (res) => {
                        //图片裁剪成功
                        this.cancelCropper();
                        this.triggerEvent('cropperDone', {
                            src:res.tempFilePath,
                            cropperData:{
                                x: canvasL,
                                y: canvasT,
                                width: canvasW,
                                height: canvasH
                            }
                        })
                    },
                    fail:err =>{
                        this.triggerEvent('cropperFail',err)
                    }
                },this);
            })
        },

        circleCrop(){
            console.log('圆角切割')
            let {imageSrc,cropperW,cropperH,cutL,cutT,cutR,cutB} = this.data;
            let {IMG_REAL_W,IMG_REAL_H,IMG_TYPE} = this.data.C_CONSTANTS;
            // 将图片写入画布
            const ctx = wx.createCanvasContext('cropper',this)
            let canvasW = ((cropperW - cutL - cutR) / cropperW) * IMG_REAL_W
            let canvasL = (cutL / cropperW) * IMG_REAL_W
            let canvasT = (cutT / cropperH) * IMG_REAL_H
            this.setData({
                canvasW:canvasW,
                canvasH:canvasW
            },() => {
                ctx.arc(canvasW / 2,canvasW / 2,canvasW / 2,0,2 * Math.PI);
                ctx.clip();
                ctx.drawImage(imageSrc, canvasL, canvasT, canvasW, canvasW,0,0,canvasW,canvasW);
                ctx.draw(true, () => {
                    wx.canvasToTempFilePath({
                        fileType:IMG_TYPE || 'jpg',
                        canvasId: 'cropper',
                        success: (res) => {
                            //图片裁剪成功
                            this.cancelCropper();
                            this.triggerEvent('cropperDone', {
                                src:res.tempFilePath,
                                cropperData:{
                                    x: canvasL,
                                    y: canvasT,
                                    width: canvasW,
                                    height: canvasW
                                }
                            })
                        },
                        fail:err =>{
                            this.triggerEvent('cropperFail',err)
                        }
                    },this);
                })
            })
        },

        cancelCropper(){
            let originData = {}
            try{
                originData = JSON.parse(JSON.stringify(defaultData))
            }catch(e){};

            this.setData({
                ...originData
            });
            this.triggerEvent('cropperCancel')
        }
    }
})

1.引入组件

//.json文件
"usingComponents": {
    "cropper":"../../components/cropper"
  }
//.wxml文件
<!-- 图片截取 -->
<view class="btn" bindtap="choiceImageCropper">冲冲冲</view>
<cropper imageSrc="{{imageSrc}}" enableScale="{{true}}" isDefault="{{}}" isCircleCrop="{{false}}"
  ratio="{{proportion}}" bind:changeScale='changeScale' bind:cropperDone="cropperDone"
  bind:cropperCancel="cropperCancel" bind:cropperFail="cropperFail"></cropper>
  <!-- 
  imageSrc:需要截取的图片地址
  enableScale:是否限制比例，true为用户不能随意调整比例 
  isDefault:是否限定默认尺寸为1:1且不显示其他比例选项 默认flase
  isCircleCrop：是否显示圆角切割 （用于切割头像）
  ratio:为传入截取比例尺（组件默认为1） 
  changeScale:组件传递比例事件
  cropperDone：用户确认截取图片事件
  cropperCancel：用户取消截取 
  cropperFail：截取报错
  -->
//

2.js事件

  //组件触发取消截取方法
  cropperCancel(e){
    console.log('用户截取取消了')
  },
  // 组件触发截取确认方法
  cropperDone(e) {
    console.log(e);
    let that = this;
    that.setData({
      src:e.detail.src
    })
  },
  // 修改比例
  changeScale(e) {
    let that = this;
    that.setData({
      proportion: e.detail.scale,
    })
  },
  // 上传需要裁剪图片
  choiceImageCropper(){
    let that = this;
    wx.chooseImage({
      count: 1,
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      success(res) {
        console.log(res);
        that.setData({
          imageSrc:res.tempFilePaths[0]
        })
      },
      fail(err) {}
    })
  },

以上代码贴下来可以直接使用，也可根据自身需求去添加功能及修改，组件有一点问题就是切圆形头像的时候截取框还是矩形不是圆形，但是截取出来的还是圆形的图片的，因为项目不需要截取圆形图片就没做修改，代码也添加了项目需求的一部分功能，总的来说这个组件还是挺好的。

希望能帮到大家，也便于自己记录（如果有帮助到大家可以点下赞哦~）！！！
如有疑问或者不对的地方可以下方评论留言讨论哦~会积极回复大家的！！！
在这里插入图片描述

爱吃鱼的宇
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小程序 图片剪切
02-05
这是一个关于小程序剪切 里面是js和布局
Android按屏幕比例截图,Android实现屏幕截图并保存截图到指定文件
weixin_35513543的博客
05-26 189
Android屏幕截图并保存截取屏幕的图片到指定文件，具体内容如下注意要添加权限：完整代码：package zhangphil.test;import android.app.Activity;import android.content.Context;import android.content.res.Resources;import android.graphics.Bitmap;impo...
微信小程序——设定图片固定比例
2401_83916241的博客
03-30 1124
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。，非无偿）**给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。[外链图片转存中…(img-hIIA20ZO-1711770030923)][外链图片转存中…(img-ANjYxxrq-1711770030923)]{{src}}
按比例裁剪图片
yflxc的专栏
01-21 1122
//需要用到的jar包http://download.csdn.net/detail/mijinghjb/7520385#comment /** * 压缩图片 * @param inputDir 图片源文件 * @param width 宽度 * @param height 高度 * @param gp * @param picName 图片名称 * @return */ pu
微信小程序剪切图片的功能
肖肖肖丽珠的博客
07-27 4052
sizeType['original','compressed'],//可以指定是原图还是压缩图,默认二者都有。sourceType[type],//可以指定来源是相册还是相机,默认二者都有。count1,//最多还能上传的图片数,这里最多可以上传1张。borderColor'#fff',//裁剪框边框颜色。首选下载下来wechat这个文件夹。result'',//裁剪结果地址。//console.log("图片信息0",e)......
微信小程序拍照截取指定区域图片(话不多说，直接上代码)
mukang
12-07 4695
效果图 wxml <camera wx:if='{{isShowCamera}}' class="camera-box" devic-position="width" flash="off" style='width:{{windowWidth}}px; height:{{windowHeight}}px;'> <cover-view class='camerabgImage'> <cover-view class="active"> &lt
微信小程序 图片裁剪功能 (完整源码)
03-01
微信小程序源码，完整实现图片裁剪功能。 可以自由拖动裁剪框和手动调整裁剪尺寸，实时显示裁剪尺寸大小，准确完成图片裁剪功能，并且能够恢复原始图片，不会丢失原图。 提供完整源码，能够直接在小程序里正常运行，...
基于微信小程序的点餐系统设计与实现 毕业论文.docx
04-30
2.5 数据库 7 3．可行性与需求分析 9 3.1 系统可行性分析 9 3.2 系统功能需求分析 10 3.3 系统性能需求分析 11 3.5 系统业务流程分析 11 3.6 开发环境与开发工具 12 4.系统设计 13 4.1系统功能结构设计 13 4.1.1 ...
微信小程序-小熊日记.zip
最新发布
05-11
微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记.微信小程序-小熊日记....
微信小程序源码-仿美团外卖.zip
03-24
微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖....
微信小程序源码-美食菜谱.zip
03-24
微信小程序源码-美食菜谱.zip微信小程序源码-美食菜谱.zip微信小程序源码-美食菜谱.zip微信小程序源码-美食菜谱.zip微信小程序源码-美食菜谱.zip微信小程序源码-美食菜谱.zip微信小程序源码-美食菜谱.zip微信小程序...
小程序图片裁剪代码包
11-26
前几天写的项目涉及到图片裁剪：到相册选完图片需要裁剪固定的宽高，看了博客园里面的博客，基本上都是有问题的，要么就是地址失效的，但是有很着急使用，所以今天项目做完，我赶紧来写一个完整版本的；
微信小程序图片选择区域裁剪实现方法
08-28
本篇文章主要介绍了微信小程序图片选择区域屏裁剪实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序图片裁剪功能的实现
jimojianghu的专栏
03-08 9295
本文详细讲述了在小程序中实现一个图片裁剪功能的过程，可以看出和在浏览器Web端的实现差别并不大。在核心的图片适配、裁剪框绘制与缩放事件处理上，基本两边可以通用，在小程序中的实现逻辑可以完整在移到web浏览器上，反之亦然。区别可能只只在于图片的加载和保存上，可以使用小程序提供的多种内置接口方法，能教方便的完成。
微信小程序之 image图片自适应宽度比例显示
weixin_43789261的博客
12-08 1754
微信小程序——image图片自适应宽度比例显示，使用bindload绑定函数动态自适应
按比例裁剪图片，1:1、3:4、4:3为例，比例可以任意设置
程序袁的博客
07-26 1万+
1、依赖引入： compile 'com.edmodo:cropper:1.0.1' 2、布局引入： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h...
一分钟解决微信小程序截图（截屏问题）
热门推荐
冲冲冲
10-21 2万+
近期 忙着新产品的开发，已经很久没更新了。这次又来跟大家送福利的，这次是关于小程序截图的问题。相信有的小伙伴又遇到产品经理要求做一个截图功能的，结果大家搜了半天还是一无所获。这就带你们了解微信小程序的前因后果，话不多说上干货。 第一，首先微信是没有提供小程序直接截图的api的，只提供了监听截图事件 ...
微信小程序，画布中，根据需要展示的图片比例，获取能截取原图中的最大图片尺寸，并且不变形展示
大梦的博客
01-26 3059
在微信小程序中，想要做一个分享海报，就需要用到画布，在画布上绘制图片时就会遇到图片变形的情况，下面我会给出我的解决办法。 先画个图片意思意思下： 1. 先根据传入图片地址获取原图片的尺寸； // 获取图片的 w，h function getImgInfo(src,callback){   wx.getImageInfo({     src: src,     success(res)...
小程序排拍照后，出现裁剪框，拖动裁剪框裁剪指定区域的图片！
weixin_45473986的博客
07-13 1234
首先给大家展示一下效果，以免看完之后不是大家想要的效果！ 实现这个效果需要使用一个库，不用担心，只需要克隆下来，映入一下就ok了！ git地址：https://github.com/wx-plugin/image-cropper 可以按照里面的步骤一步一步来！ ...
下列关于微信小程序说法正确的是( ) A.微信小程序无须安装下载，运行在微信环境下 B.微信小程序与 WebApp 应用的进入方式完全相同 C.微信小程序具有开发周期短、开发成本比较低等优点 D.微信小程序可以跨平台(支持 Android、iOS)
06-08
微信小程序是运行在微信环境下的应用程序，无须安装下载，用户可以直接使用。与 WebApp 应用不同，微信小程序具有更佳的用户体验和更高的性能，可以在微信环境下快速加载和运行。同时，微信小程序具有开发周期短、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值