acccccccb / vue-img-cutter Goto Github PK

**bug tried the demo on mobile and cannot adjust the sliders

bug描述
详细描述bug是在什么操作下出现的，最好带上截图，如果可以线上预览，请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

bug描述
上传4K图片进行剪裁，点击scale后，无法快速缩小图片。

``
版本号
2.2.5
浏览器版本
Chrome

在项目中使用时，若固定裁剪框位置，当鼠标置于裁剪框区域内时，无法拖拽图片

建议在固定裁剪框位置时，给裁剪框容器增加：pointer-events: none 以便于拖拽图片

bug描述
如果上传图片的width和height小于等于组件设置的 宽度和高度就会报错：

Uncaught TypeError: Cannot set property name of # which has only a getter

版本号
2.2.5
浏览器版本
Chrome

你好，源码在template中使用props中的值时某些前面加了this(截图只是一个变量，还有其它的一些)，使用时运行不了，去掉就可以运行，麻烦看一下可以吗？谢谢

你好，我在代码中发现了这些内容：
组件有originalGraph和cuttingOriginal两个属性但是cuttingOriginal并没有被使用，请问是冗余字段还是我个人理解偏差？
然后想了解下originalGraph的具体内涵是什么？为什么会有裁剪原图的选项？

如题：Chrome游览器在 在线demo(3.0.4)中填写阿里os的图片链接 提示图片加载失败

现在要打开webp格式的文件，要手动选择“所有文件”，对用户来说非常麻烦

请问插件的标题，”图片裁剪“ 这几个字可以传插槽吗或者是可以配置国际化吗，没找到在哪可以配置

bug描述
完成截图：cutDown 回调，能够加入是否上传并且裁剪判断，我测试发现一个问题就是我没有上传图片直接可以点击确定按钮，并且在回调函数能取到值，只是没有fileName参数，我没有上传就不应该触发裁剪功能。这里我通过判断fileName能够阻止他的上传。但是有种情况就是我上传图片但是取消本次裁剪，因为浏览器的机制原因，input的files队列没有被清空，我再次打开裁剪，并且不上传图片，我点击裁剪的确定按钮过后获取的对象就会有fileName，这里我就没办反判断是否上传本次结果了，因为我没有办法监听input的change事件，所以我的图片裁剪我是没办法是否判断是否是有效裁剪。如果出现我上述问题就会出现一张空白图片.
版本号
最新版
浏览器版本
IE/Edge/Firefox/Chrome

I have a problem in dynamically change a cut width and cut height. pls help to solve, and where is the demo code?

I have used Vue js

<ImgCutter
      ref="imgCutterModal"
      class="ImgCutterBox"
      :label="$t('system.selectIMG')"
      :crossOrigin="true"
      crossOriginHeader="*"
      rate=""
      :tool="true"
      toolBgc="none"
      :cutWidth="cutWidth"
      :cutHeight="cutHeight"
      :sizeChange="false"
      :originalGraph="false"
      :boxWidth="modelWidth"
      :boxHeight="boxHeight"
      :isModal="false"
      :showChooseBtn="true"
      :moveAble="true"
      @cutDown="cutDown"
      @onClearAll="onClearAll"
      @onChooseImg="onChooseImg">
          <span class="btn btn-primary" slot="cancel" style="margin-right:10px;">
              <el-button>{{$t('system.cancel')}}</el-button>
          </span>
          <span class="btn btn-primary" slot="confirm">
              <el-button type="primary">{{$t('system.confirm')}}</el-button>
          </span>
</ImgCutter>

in props, I have received cut width and cut height. it will dynamically change.

bug描述
确认裁剪图片时，按钮type为primary，这是element按钮type，会导致button按钮触发默认事件。应该是在组件传递参数的时候没有把type放入props内部，导致$attrs直接赋值在了button的原生type上，导致type默认为submit事件，如果裁剪框在form表单内部就会导致提交默认事件，页面会被刷新。
因为没有给出能够监听选中图片到裁剪框的钩子，所以使用“插槽”替换掉按钮之后没办法改变按钮颜色，只能用默认颜色。不能像原代码那样从白色变为蓝色。
版本号
2.1.3
浏览器版本
IE/Edge/Firefox/Chrome

您好作者，首先感谢您的辛苦开发，我最近遇到一个需要国际化的网站要用到您的作品，能否开发一个支持i18n或者中英甚至多语言的版本呢？谢谢啦。

如果支持传入网络图片的方式请在使用文档中描述下使用方式、万分感谢~

bug描述
详细描述bug是在什么操作下出现的，最好带上截图，如果可以线上预览，请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

线上还用着呢 就是canvas截图的那个file文件没有返回 显示的是not support

bug描述
设置：originalGraph: true // 是否直接裁剪原图
操作：上传4K图片，滚动缩小图片发现像素框并非固定值(像素异常变大)。

版本号
2.2.5
浏览器版本
Chrome

首先感谢提供这么好用的插件。
标题情况大多数情况下用在头像上传的时候。
我自己改的。参数名什么的随便加的。就不提pr了。

smallToUpload: {
  // 选择的图片宽高均小于裁剪宽高度时候直接上传原图
  type: Boolean,
  default: false,
  required: false,
},

if (reader.readyState == 2) {
  if ( !_this.sizeChange && _this.smallToUpload && img.width <= _this.cutWidth && img.height <= _this.cutHeight) {
    _this.handleClose()
    _this.$emit('cutDown', {
        filename: file.name,
        file: file,
    })
    return;
  }
  _this.putToolBox(); // 挪进来或许更好一些
  //......
}

顺便说个别的事情，确认按钮的事件建议加上执行括号来做兼容

<span @click="cropPicture">
<!-- 更换为 -->
<span @click="cropPicture()">

该方法会因为传递了$event做第一个参数判断时隐形转为true从而不触发cutDown事件

cropPicture: function (doNotReset) {
}

比如裁剪区的图片 横向3等分，一张图片裁剪成3份？

bug描述
组件选择图片以后，点击确认按钮，无任何效果：
仔细查看源代码以后，您采用“doNotReset”字段作为判断是cutDown还是onPrintImg事件，但是这个字段在确定按钮代码部分未传值。导致产生bug。

 <span @click="cropPicture">
         <slot name="confirm">
             <button type="button" class="btn btn-primary" style="margin-left:15px;" :disabled="!drawImg.img">确定 </button>
          </slot
</span>

版本号
2.1.6
浏览器版本
IE/Edge/Firefox/Chrome

bug描述
自定义rate比例为宽比高小时，例如3:4，截图不全，底部丢失
版本号
2.1.2版本
浏览器版本
Chrome

bug描述
详细描述bug是在什么操作下出现的，最好带上截图，如果可以线上预览，请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

作者你好，我现在困扰如何才能添加调用摄像头拍摄的照片进行编辑，请问有解决的办法吗？

怎么引用js 来写 我的vue是引用js的。。。。 不是npm 安装的

Error in v-on handler: "SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

found in

---> at node_modules/_vue-img-cutter@2.2.4@vue-img-cutter/src/components/ImgCutter.vue

不是点击选择图片有一定几率刷新页面, 而是每次点击都刷新页面

需要原图裁剪，并且还要旋转功能，要怎么实现？救救这可怜的前端......

imgCutterModal.value.handleOpen({
name: imgData.name,
src: imgData.url
});

使用这个赋值以后 有个回调知道成功了 loading消失

请问怎么才能加载一张默认图片呢

runtime-core.esm-bundler.js?5c40:218 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

bug描述
不是bug，我想问下 我想记录用户最后拖动裁剪框的位置，下次裁剪会记录下来，但是我总找不到x 和 y的公用值，要么就是裁剪框位置变化了 但是截取的图像位置没有变化
版本号
此bug出现在哪个版本
最新版本

bug描述
弹出裁剪框后浏览器报：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at VueComponent.cropPicture
版本号
2.2.3版本
浏览器版本
Chrome

bug描述
详细描述bug是在什么操作下出现的，最好带上截图，如果可以线上预览，请附上链接
版本号
此bug出现�弹窗模式下选择图片按钮隐藏不了在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

bug描述
详细描述bug是在什么操作下出现的，最好带上截图，如果可以线上预览，请附上链接
版本号
此bug出现在哪个版本
浏览器版本
IE/Edge/Firefox/Chrome

bug描述
项目初始化的时候，运行起来报调用组件的loader问题

ERROR in ./node_modules/vue-img-cutter/src/components/ImgCutter.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

|

| <div @click="handleOpen" v-if="showChooseBtn === true && isModal === true">

版本号
3.0.0
浏览器版本
Chrome

关键源码 /src/components/ImgCutter.vue

整个项目是插件 + 插件展示页面的代码

复制的时候，把里面的import盖掉就好

你好，我想问一下这个兼容IE9嘛？

现在的裁剪框都可以超出画布大小，这样的裁剪毫无意义啊

有没有vue3的