newbieyoung / simple-crop Goto Github PK

微信小程序版组件在IOS系统中（部分手机不行），选择图片尺寸超过1024*1024图片不能正常显示（如图）。

按照微信小程序的引入步骤加入
调用chooseCropImage选择好图片后 报错 this.$cropContent.node is not a functiong

Demo页面，选择一张不是方形的图片 ，旋转过程中图片先变大后变小，旋转180度后图片比原始要大并且无法缩小

问题:选择图片后，组件获取的临时图片Type类型为text/plain，裁剪图片未显示
麻烦了！
代码片段:https://developers.weixin.qq.com/s/qvTAYimZ7ngI

分辨率越高越模糊。载入是正常显示，生成的base64模糊了

微信版本：7.0.20， 设备从SE2到12pm，均出现在上传图片或者拍照图片出现以下错误：

1、一直显示”正在加载图片...“的loading
2、图片无法正常加载

暂时找到可能的问题所在：
1、查看源码的以及本地调试，image.onload方法未触发。

期待结果同安卓，正常上传图片后编辑。

环境 :小程序
版本：最新版本
现象:

页面一开始加载图片，图片会被压缩变形这个怎么解决

以下是一些代码片段
`
Page({
data:{
src: null, // 裁剪图片地址
visible: false, // 是否显示
size: { //裁剪尺寸
width: 112,
height: 140
},
cropSizePercent: 0.9, //裁剪框显示比例
borderColor: '#fff', //裁剪框边框颜色
result: '', //裁剪结果地址
},

upload_logo() {
var that = this;
wx.chooseImage({
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
that.setData({
visible: true,
src: tempFilePaths[0],
})
}
})
},
//选取裁剪图片成功回调
uploadCallback: function (event) {
console.log(event);
},
//裁剪图片回调
cropCallback: function (event) {
var that = this;
console.log(event);
this.setData({
visible: false,
result: event.detail.resultSrc,
});
wx.uploadFile({
url: 'https://domain.com/apidocs/upload/singlefile',
filePath: event.detail.resultSrc,
name: 'file',
formData: {
token: '123',
wxapp_id: '456',
type: 'cardPhoto',
},
success: function (res) {
console.log(res);
var data = JSON.parse(res.data);
if (data.code == 200) {
that.setData({
'formData.logo': data.data.fileUrl,
})
}
}
})
},
//关闭回调
closeCallback: function (event) {
console.log(event);
this.setData({
visible: false,
});
},
})

`

非常不错的实现，微信小程序下完美运行，但QQ小程序运行错误。对canvas不太熟，能帮忙修改兼容下QQ小程序不？

加载时间很长，而且也卡，最后在裁剪页面啥都没有，用不了

这样的，重启微信，然后从相机获取照片裁剪正常，然后最小化程序，再打开，再次使用从相机获取就不会出现照片了，从相册获取一直正常，ios系统，谢谢大佬解答。

Any way to crop a circle just using script for browser? QR and URL are dead btw. Thanks!

依赖的exif-js中
function getStringFromDB(buffer, start, length) {
var outstr = "";
for ( n = start; n < start+length; n++) {
outstr += String.fromCharCode(buffer.getUint8(n));
}
return outstr;
}
在webpack打包后，会报n is not defined，只能引用静态js文件将该地方改成var n = start

开发者工具可以，但安卓真机不行

//加载图片
    load: function () {
      var self = this;
      var src = this.data.src;

      wx.showLoading({
        title: '正在加载图片...',
      })
      
      wx.getImageInfo({
        src: src,
        success(res) {
          console.log("获取图片成功")
          self.originImage = res;
          self._orientation = self.orientationToNumber(res.orientation);
          self.getRealCotentSize();
          setTimeout(function () {
            var image = self.$cropContent.createImage();
           //开发者工具打印的是dom， 安卓真机打印的是空object
            console.log("image======", image);
            image.onerror =function (err) { console.log('image加载失败', err, image) }
            image.onload = function () {
              console.log("image onLoad")
              self.transformCoordinates(image);
              self.init();
            }
            image.src = src;
            
          }, 50) // ios delay 保证 canvas style 尺寸生效
        },
        fail(res) {
          console.log("获取图片失败", res)
        }
      })
    },

定位到transformCoordinates中的canvasToTempFilePath报错
canvasToTempFilePath:fail：convert native buffer parameter fail.native buffer exceed size limit.
demo的小程序也有这个问题
机型 Galaxy S8+ Android 9

裁剪框拉不动

以 webpack 为例，jsx 文件需要使用 babel-loader 另外 babel 需要使用 react presets。

/* package.json */
"babel": {
    "presets": [
      "env",
      "react"
    ]
  },

/* webpack.config.js */
{
    test: /\.jsx?$/,
    use: ['babel-loader'],
    exclude: /node_modules/
 }

想要禁用边界判断的功能，如何配置

一般剪裁的都是照片个数jpg，如果是png图片格式是不是太大。或者添加一个属性默认是jpg，也可设置成png。

请问裁剪图片模糊怎么解决

913行，cropWidth / contentWidth > cropHeight > contentHeight，是不是写错了，应该是cropWidth / contentWidth > cropHeight / contentHeight

根据前面的经验，把图改小，但也出现偶有无法加载的情况。

vx小程序中，传入远程的图片url后，初始化后一直到transformCoordinates这个方法下的image都是清晰的，裁剪后变得很模糊，后面我在transformCoordinates这个方法下，把调用wx.canvasToTempFilePath的destWidth和destHeight都放大到wx.getSystemInfoSync().pixelRatio倍数，才好那么一点点，但是还是模糊，求解，基础库为2.11.1，机型安卓和iOS都模糊

希望能有taro-vue3版本

在android端，图片方向显示不正确，应该怎么调整呢？

现在裁剪区域固定成了矩形，虽然支持自由旋转，但是对于有些因拍摄角度而导致的两边长度不一样的图片，不能进行精确的裁剪，是否可以支持自由描边，类似于PS中的描边抠图的效果?

插件禁止了touchmove事件吗

我重开了一个issues，这里是代码片段，发现wx.canvasToTempFilePath传入的宽高是有限制的，传原图上去是3000*4000，无法转换，缩小2倍就可以，不知是不是这个API本身原因，上面的片段初始化被压缩一次，裁剪被压缩一次，出来的图就很糊了，复测过程：上传-拍照-选择原图-完成-点击图片裁剪-完成裁剪

我微信版本是 7.0.3 ，从相册选择完图片上传上去之后不显示图片，目前是必现

我是将传入的src 通过input的file 类型进行上传，然后转换成base64在img 中进行显示，移动、旋转功能都没有问题，但是最后裁剪出来的跟裁剪前放到可视区域中的不一样；
还有个小问题是rotateSlider设为false 时，再点击旋转会报错。

微信开发者工具可以显示，但部分真机无法显示，不显示的机型包括： iphone xs， iphone11 pro max，反复测试后，不管是杀死微信还是移除小程序，安卓与ios均会出现拍照后上传图片至组件，回调函数不被调用。以上问题均未出现任何报错与错误日志，望解决

支持手动调整截图框的大小

此版本在ipad这样的尺寸，横屏使用的场景，没有得到很好的兼容，希望作者尽快能优化一下

hello大神 有没有支持vue3的版本

比如 裁切框为固定的 1:1, 2:1 等~

写得不错。包装成vue然后发布到Npm应该会更多星

当前react 版本无法直接在 taro中使用