微信小程序照片裁剪

最新推荐文章于 2025-06-07 16:37:14 发布

极品老大

最新推荐文章于 2025-06-07 16:37:14 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签：小程序图片裁剪

本文链接：https://blog.youkuaiyun.com/qq_38911839/article/details/89359635

本文介绍了如何在微信小程序中使用canvas和movable-view组件封装一个比例裁剪照片的功能，无需额外插件。作者提供了组件及引用页的代码，并阐述了实现思路，即通过movable-view确定裁剪区域，动态调整元素尺寸以保持图片正确比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间用小程序的canvas、movable-area、movable-view封装了一个按比例裁剪照片的组件，无需引用任何插件。废话不多说，直接贴代码：
组件代码
1.cut_photo.json

{
  "component": true
}

2.cut_photo.wxml

<view>
  <canvas class="fyj_canvas" canvas-id="myCanvas" style="width:100%;height:{
  
  {canvasHeight}}px">
    <movable-area class="fyj_movable_area text-center hidden" style="width:100%;height:{
  
  {canvasHeight}}px;">
      <movable-view wx:if="{
  
  {src}}" style="width:{
  
  {cutWidth}}px;height:{
  
  {cutHeight}}px" class="fyj_movable_view"
        x="{
  
  {x}}"
        y="{
  
  {y}}"
        direction="all"
        bindchange="movableChange"
      ></movable-view>
      <image  class="fyj_photo" id="fyj_photo" src="{
  
  {src}}" mode="widthFix"></image>
    </movable-area>
  </canvas>
  <view style="margin-top:20rpx;padding:0 20rpx;">
    <button class="pull-left" type="warn" size="mini" bindtap="getPhoto">选择照片/拍照</button>
    <button class="pull-right" type="primary" size="mini" bindtap="cut">裁剪</button>
    <view class="clearfix"></view>
  </view>
</view>

3.cut_photo.js

const app = getApp()
Component({
  options: {
    //multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    //宽高比
    aspectRatio: {