we-plugin / we-cropper

微信小程序图片裁剪工具

we-cropper

一款灵活小巧的canvas图片裁剪器

Usage

克隆至本地处理

git clone https://github.com/we-plugin/we-cropper.git

npm方式引入

npm install we-cropper --save

Links

• 文档 · Document

• 变更 · ChangeLog

• 示例 · Example

• 开源协议 · The MIT License

• 在WePY框架中实现“自定义组件”

• 在mpvue中实现“自定义裁剪组件”

• 常见问题 · FAQ

• 贡献指南 · Contributing

Online demo

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

we-cropper's Issues

小程序官方论坛canvas相关问题跟踪

点击查看

更新频次：每5分钟

小程序编辑器和手机上都在按钮和画布之间有一个白条

Description

编辑器中正好差50px，手机上则小于50px（vivo x6）。
尝试去掉屏幕高度-50，电脑上似乎可以了，但是手机上就变成全屏的，按不了按钮了。

Environment

• Platform: [开发者工具/Andriod]
• Platform version: [开发者工具v1.01.1712150/Andriod 5.1.1]
• Wechat version: [微信版本号6.5.23]
• we-cropper version: [1.1.5]

Reproduce

[如何重现问题]

[How to reproduce the issue]
单独取出局部切割图片文件，style，we-copper。功能没问题，但是按钮和画布间多了个白条

Observed Results

[实际表现]

[Observed Results]

Expected Results

[期望表现]

[Expected Results]
不想要白条

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

选择原图（2.9M）的文件，发现画布显示不了图片

选择原图（2.9M）的文件，发现画布显示不了图片

想在new weCroper()时调用pushOrign将图片显示出来该如何处理

new weCropper(data)
  .on('ready', function (ctx) {
    console.log(`wecropper is ready for work!`)
  })
  .on('beforeImageLoad', (ctx) => {
    console.log(`before picture loaded, i can do something`)
    console.log(`current canvas context:`, ctx)
    wx.showToast({
      title: '上传中',
      icon: 'loading',
      duration: 20000
    })
  })
  .on('imageLoad', (ctx) => {
    console.log(`picture loaded`)
    console.log(`current canvas context:`, ctx)
    wx.hideToast()
  })

请教大神，怎么生成bmp格式的8位图，看到有封装，但是我不知道怎么用（尴尬~）。

提交ISSUE前请确保已认真阅读以下内容

Please read the following information carefully before you open an issue.

在提交issue之前必须确认以下问题：

Please make sure you understand the following points:

• 必须是一个bug或者功能新增。

• It must be a bug or a feature request

• 必须是we-cropper相关问题，原生小程序问题去开发者论坛。

• It must be a we-cropper issue.

• 已经在issue中搜索过，并且没有找到相似的issue或者解决方案。

• I searched issue already but I did't find any relevant issues or solutions.

• 完善下面模板中的信息

• Please filled out the following template

阅读完后请在提交的issue中删除以上内容，包括分割线

DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE

---

Description

[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]

Environment

• Platform: [开发者工具/iOS/Andriod/Web]
• Platform version: [对应工具或者iOS或者Andriod的版本号]
• Wechat version: [微信版本号]
• we-cropper version: [在package.json里]
• other version: [如果是插件问题，请列出问题插件的版本号]

Reproduce

[如何重现问题]

[How to reproduce the issue]

Observed Results

[实际表现]

[Observed Results]

Expected Results

[期望表现]

[Expected Results]

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

真机上底部的按钮总是被canvas遮住

而且高度总是跟底部差一块

头像上传

大牛 我想问下头像上传后裁剪的图片上半部分裁剪下来的 下半部分是灰色的，而且图片的有拉伸的变化，，怎么设置解决这个问题？

-

oppo R9直接拍照剪裁图片不行，直接选择拍照图片可以

如题

1.1.4版本真机使用Demo中局部裁剪功能后生成的图很模糊

截图大小自适应&

根据wx的官方文档 canvasToTempFilePath api是可以自适应的,是否可以考虑在调用api时候使用自适应来达到截图自适应,而且现在确实出现了截图后宽高失真的情况

wx.canvasToTempFilePath(OBJECT)

把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

OBJECT参数说明：

参数 类型 必填 说明 最低版本
x Number 否 画布x轴起点（默认0） 1.2.0
y Number 否 画布y轴起点（默认0） 1.2.0
width Number 否 画布宽度（默认为canvas宽度-x） 1.2.0
height Number 否 画布高度（默认为canvas高度-y） 1.2.0
destWidth Number 否 输出图片宽度（默认为width） 1.2.0
destHeight Number 否 输出图片高度（默认为height） 1.2.0
canvasId String 是 画布标识，传入 的 cavas-id
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

示例代码
wx.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success: function(res) {
console.log(res.tempFilePath)
}
})

如何循环裁剪图片？

我上传多张，请问如何循环去裁剪每一张图片？

局部剪裁在苹果手机上异常地卡

是我操作不对还是什么？？？

能不能增加越界回弹

这是一个很必要的功能，没有这个各种不方便的说。
还有，使用开发工具生成的图片比例不对

好像超出边界也能截到，这里要做处理

你好，请问可以在拖动的过程中自定义宽高吗？

今天更新的最新版微信，貌似不能用这个裁剪插件，原来的版本可以的

有什么紧急解决办法么？谢谢

wepy

提交ISSUE前请确保已认真阅读以下内容

Please read the following information carefully before you open an issue.

在提交issue之前必须确认以下问题：

Please make sure you understand the following points:

• 必须是一个bug或者功能新增。

• It must be a bug or a feature request

• 必须是we-cropper相关问题，原生小程序问题去开发者论坛。

• It must be a we-cropper issue.

• 已经在issue中搜索过，并且没有找到相似的issue或者解决方案。

• I searched issue already but I did't find any relevant issues or solutions.

• 完善下面模板中的信息

• Please filled out the following template

阅读完后请在提交的issue中删除以上内容，包括分割线

DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE

---

Description

[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]

Environment

• Platform: [开发者工具/iOS/Andriod/Web]
• Platform version: [对应工具或者iOS或者Andriod的版本号]
• Wechat version: [微信版本号]
• we-cropper version: [在package.json里]
• other version: [如果是插件问题，请列出问题插件的版本号]

Reproduce

[如何重现问题]

[How to reproduce the issue]

Observed Results

[实际表现]

[Observed Results]

Expected Results

[期望表现]

[Expected Results]

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

裁切生成的图片尺寸问题

1. 在微信web开发工具上，裁切出来的图片尺寸有点Bug，在使用cutInside功能，切出来的图片被压成了设定尺寸的一半高；
2. 在真机上切出来的图，实际是2倍尺寸，例如设定裁切100x100，切出来保存的尺寸是200x200像素，应该是px 和 rpx 没有很好的限定

感谢作者，希望越做越好

手动添加水印时，需要移动图片才能添加成功

【设备】
苹果6

【问题现象】
1、页面添加了一个手动加水印的按钮

添加水印

2、函数定义
addMark() {
this.wecropper.on('beforeDraw', (ctx) => {
console.log(before canvas draw,i can do something)
console.log(current canvas context:, ctx)
// 那就尝试在图片上加个水印吧
ctx.setFontSize(14)
ctx.setFillStyle('#990033')
ctx.fillText('@greatwe-cropper', 20, 350)
})
},

3、点击添加水印按钮，图片上不能立刻显示水印，移动下图片，水印添加成功，显示正常

在苹果6手机和电脑模拟器上都有这个问题，安卓手机未测试

上传图片我设置sizeType只能是原图后，图片如果太大（2M）,会显示不出来

`
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success (res) {
const src = res.tempFilePaths[0]
// 获取裁剪图片资源后，给data添加src属性及其值
self.wecropper.pushOrign(src)
}
})

`

请问能否支持获取图片的base64？还有能否支持把图片裁剪成圆形？

wepy框架能用么？有具体用法？

wepy框架能用么？有具体用法？

裁剪的尺寸 不能在onload里面指定么？

现在都是全局变量写死的 如果要在onload里面 获得需要裁剪的宽高，肿么办呢？

还不是特别好使啊。感谢开源~~

我的画布很大，需要在正方形图片下面加文字，这个能改造吗？

我的画布裁切图片的区域是个正方形，下面还要画几行文字，这个we-cropper.js支持吗？

选中图片后，只要移动图片就会黑屏，安卓苹果必现

Description

[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]
选择图片后，拖动图片马上黑屏，点击生成是空白，安卓苹果必现

Environment

• Platform: [开发者工具/iOS/Andriod/Web]
  1.02.1801081

• Platform version: [对应工具或者iOS或者Andriod的版本号]
  android 7.0，ios11

• Wechat version: [微信版本号]
  6.6.1.1220
  Wechatlib1.9.5

• we-cropper version: [在package.json里]
  "libVersion": "1.9.1",

• other version: [如果是插件问题，请列出问题插件的版本号]

Reproduce

[如何重现问题]

手动拖动必现

Observed Results

[实际表现]

黑屏

Expected Results

[期望表现]

正常显示并选中

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

苹果手机剪切生成的图片及水印模糊

【设备】
苹果6

【问题】
图片剪切后，也添加了水印，保存图片，生成的图片及水印看上去比保存前要模糊

安卓手机未测试

iOS11 中 缩放移动被裁剪对象非常卡顿，但在IOS10就不会，大家也是吗

iOS11 中 缩放移动被裁剪对象非常卡顿，但在IOS10就不会，大家也是吗
在Android机也不会卡顿，就是在iOS11 中非常卡顿
微信客户端的版本都是6.6.3最新版的

你的鼓励作者的那个二维码扫了半天没反应呢~~~

提交ISSUE前请确保已认真阅读以下内容

Please read the following information carefully before you open an issue.

在提交issue之前必须确认以下问题：

Please make sure you understand the following points:

• 必须是一个bug或者功能新增。

• It must be a bug or a feature request

• 必须是we-cropper相关问题，原生小程序问题去开发者论坛。

• It must be a we-cropper issue.

• 已经在issue中搜索过，并且没有找到相似的issue或者解决方案。

• I searched issue already but I did't find any relevant issues or solutions.

• 完善下面模板中的信息

• Please filled out the following template

阅读完后请在提交的issue中删除以上内容，包括分割线

DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE

---

Description

[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]

Environment

• Platform: [开发者工具/iOS/Andriod/Web]
• Platform version: [对应工具或者iOS或者Andriod的版本号]
• Wechat version: [微信版本号]
• we-cropper version: [在package.json里]
• other version: [如果是插件问题，请列出问题插件的版本号]

Reproduce

[如何重现问题]

[How to reproduce the issue]

Observed Results

[实际表现]

[Observed Results]

Expected Results

[期望表现]

[Expected Results]

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

图片上传之后怎么变成加了个红色滤镜一样？

RT

2.0版本意见收集

由于工作原因（懒惰/逃），开源的事情搁置了很久，很多存在的问题也一直没有解决。
最近打算重拾起来，计划开发2.0版本，希望得到大家的积极反馈。
内容不限，可以是新功能，可以是批评...谢谢大家支持！

为什么裁剪完后的图片变模糊了，有办法保证图片清晰度不变吗

动态修改裁切框宽高 可以吗？

cropperOpt 里面的宽高能不能动态修改。
或者是清空画布内容，重新开始初始化。

支持旋转吗

苹果5s上面选择图片上传不了

苹果5s上面选择图片上传不了
getCropperImage:function() {
this.wecropper.getCropperImage((src) => {
if (src) { //src是空的
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [src] // 需要预览的图片http链接列表
})
} else {
console.log('获取图片地址失败，请稍后重试')
}
})
},

新增wx.canvasGetImageData接口，是不是已经可以实现获取base64数据了

能否给支持下😙

ios裁剪图片的时候 确定按钮点击无效，重新选择是可以的

ios裁剪图片的时候 确定按钮点击无效，重新选择是可以的，想问问这是因为什么，之前用着是没有问题的

为什么我裁剪之后的图片会变模糊，看到您在四楼给了链接，但是失效了，能否重新发一下

提交ISSUE前请确保已认真阅读以下内容

Please read the following information carefully before you open an issue.

在提交issue之前必须确认以下问题：

Please make sure you understand the following points:

• 必须是一个bug或者功能新增。

• It must be a bug or a feature request

• 必须是we-cropper相关问题，原生小程序问题去开发者论坛。

• It must be a we-cropper issue.

• 已经在issue中搜索过，并且没有找到相似的issue或者解决方案。

• I searched issue already but I did't find any relevant issues or solutions.

• 完善下面模板中的信息

• Please filled out the following template

阅读完后请在提交的issue中删除以上内容，包括分割线

DELETE THE INFORMATION ABOVE(INCLUDE THE SEPARATION LINE) BEFORE YOU OPEN AN ISSUE

---

Description

[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
[Description of the issue]

Environment

• Platform: [开发者工具/iOS/Andriod/Web]
• Platform version: [对应工具或者iOS或者Andriod的版本号]
• Wechat version: [微信版本号]
• we-cropper version: [在package.json里]
• other version: [如果是插件问题，请列出问题插件的版本号]

Reproduce

[如何重现问题]

[How to reproduce the issue]

Observed Results

[实际表现]

[Observed Results]

Expected Results

[期望表现]

[Expected Results]

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

ios真机测试的时候，裁剪后的图片无法获取

例子页面中的avatarUpload/upload页面的wecropper.getCropperImage()方法没用，在页面内new了weCropper(cropperOpt)一个新对象，但是ios真机打印出来，对象里面没有了方法

你好，我下载了你的demo，运行时报错，不知道这个错是啥意思，看起来像是跨域

VM122:2 Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Error (native)
at Object.invokeCanvasToDataUrl_100088 (http://1397529163.debug.open.weixin.qq.com/example/network/network.html:24:10842)
at u (:1:2257)
at :1:4644

支持图片旋转这个功能后续会增加吗

后续后支持图片旋转这个功能吗

iOS 中 缩放移动被裁剪对象有些卡顿，大家也是吗？

iOS 中 缩放移动被裁剪对象有些卡顿，大家也是吗？
在 Android 中的流畅度 高于 iOS，大家也是吗？
谢谢~~

iPhone5s上面获取的图片路径是null

this.wecropper.getCropperImage((src) => {
console.log(src) ; //该值是null

  if (src) {
    wx.previewImage({
      current: '',
      urls: [src] 
    })
  } else {
    console.log('获取图片地址失败，请稍后重试')
  }
})

上传图片之后要手指移动才显示裁剪框

首先是全部显示图片 要手指移动一下才能显示裁剪框

我试过在上传图片更新canvas 但是不成功 还是会先全部显示

但是用手指移动一下就好了 我觉得是不是 self.updateCanvas(); 添加错地方了

啥时候能加上旋转~~~

或者有啥办法旋转已写入画布的图片吗

使用 getCropperImage 后, canvas 中的图片放大了一倍

代码如下:

import weCropper from '../../we-cropper/dist/weCropper.js';
var app = getApp();
const device = wx.getSystemInfoSync() // 获取设备信息
const width = 350;
const height = 300;
Page({
  data: {
      "choseImg": "choseImageBtn.png",
      "chosenImg": "",
      "indexBk": "index-bk.png",
      wecropper: null,
      cropperOpt: {
        id: 'cropper',
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: 0,
          y: 0,
          width: 350,
          height: 300
        }
      }
  },
  onLoad: function() {
    var that = this;
    // 页面加载时初始化画布
    const { data } = this
    // 若同一个页面只有一个裁剪容器，在其它Page方法中可通过this.wecropper访问实例
    var wecropper = new weCropper(that)
      .on('ready', (ctx) => {
      })
      .on('beforeImageLoad', (ctx) => {
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      });
    // 加载页面请求用户数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        "userInfo": userInfo,
        "wecropper": wecropper,
        "date": ((new Date).getDate() + "." + ((new Date).getMonth() + 1) + "." + (new Date).getFullYear())
      });
    });
  },
  // 选择图片函数
  choseImg: function(evt) {
    var that = this;
    console.log("点击按钮!");
    // 选择完毕后,显示等待提示
    wx.chooseImage({
      count: 1,
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        wx.showLoading({
          title: "加工中",
          complete: function() {
            setTimeout(function() {wx.hideLoading()}, 500);
          }
        });
        that.setData({
          "chosenImg": tempFilePaths,
          "showBtnLine": "block",
          "showChose": "none"
        });
      },
      fail: function(errInfo) {
        wx.showLoading({
          title: "加工失败",
          complete: function() {
            setTimeout(function() {wx.hideLoading()}, 1000);
          }
        });
      }
    });
  },
  // 剪切图片
  modifyImg: function() {
    var that = this,
      src = that.data.chosenImg[0];
    this.wecropper.pushOrign(src);
    this.wecropper.getCropperImage((src) => {
      that.setData({
        "chosenImg": src
      });
    });
    // 保存图片到服务器
    //that.saveImg();
  }
});

如何设置截图之后的图片格式是jpg或png？

无法截图getImageInfo:fail download image fail

你们出现过这错误吗？

getImageInfo:fail download image fail

工具上和真机上返回路径不一样

工具上返回的是http的路径，但是真机上是返回‘wxfile://tmp...’