dai-siki / vue-image-crop-upload Goto Github PK

noCricle 控制是否显示圆形图片预览框的 应该是noCircle。

ERROR in ./~/vue-image-crop-upload/upload-2.vue
Module parse failed: node_modules/vue-image-crop-upload/upload-2.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|
|

没有暴露右上角关闭按钮和上传之前取消按钮的Event，这个在之后的版本会不会增加啊，现在有个需求，如果能监控到这个事件就完美了~

props noCricle 失效了

选择一张图片不点击保存直接关闭，再次打开选择相同图片不能成功

Some bugs I found when using iPhone

1. Cannot drag image to reposition
2. Wrong orientation (crop result) when selecting portrait photo
3. Cannot zoom in and zoom out (slider and +/- button doesn't work)

RT

您好，这个组件很炫酷，想问一下楼大大，什么时候支持移动端适配，基于vue的移动webApp现在比较流行。谢谢

上传成功点击关闭再次打开应该到第一步上传

• Choose one image，then turn off the network. It will show uploading error message
• Turn on network, it will upload success, and show success message
• Now, there are two message

Follows the screenshots:

We should be able to crop the image and not upload it directly to the server. Maybe by performing the upload only if url prop is evaluated to true.
The solution to the issue #21 is not acceptable in this case because the upload will still occur.
I can make a PR for this if needed.

图片比较复杂情况下，放大缩小或者拖动图片后会出现图片重叠

修改了下demo的写法好了

你好，我用的是cli的模板工具，引用你的插件


跟你推荐的写法一样的啊 但是引用报错，能劳烦帮忙看一下吗 谢谢啊

This is actually a feature request.
It will be nice to close the uploader when the Esc key is pressed.

Hello Dai-siki, thanks for this very nice plugin. Can i ask your help.

When i load an image it zooms unevenly from the side but in the preview the image looks fine.

Also, how and were do i load the translation files?

Finally, i am uploading all my data at the same time using a form, is there a way to handle the upload in another part of the page and not inside vue-image-crop-upload?

Thank you very much.

on upload-2.vue stlye section importing ./upload.css, but its loaded as localhost/upload.css

can you help me ?

<Code

IncorrectNumberOfFilesInPOSTRequest
</Code

<Message

POST requires exactly one file upload per request.
</Message

<RequestId

58A65252959D027D30BBF511
</RequestId

<HostId

tjdesigner.oss-cn-shanghai.aliyuncs.com
</HostId

on resizing big image canvas default algorithm makes images look very ugly and jagged. I found out you can use https://github.com/danschumann/limby-resize to resize it smoothly without any artifacts in resized image. here is a demo, select a fairly large image (4000px wide) and see how it looks, this algorithm is not as fast as canvas default but its output image is very clean.

Please see if you can incorporate this or give an option if the user has limby-resize installed use this instead.

你好，直接安装该组件后，找不到upload.css 文件：
Failed to load resource: the server responded with a status of 404 upload.css (Not Found)

什么原因呢？

楼大大您好，这个组件很不错，如果适配成移动端会更佳。谢谢

浏览器缩小到一定程度，这个组件会卡住浏览器

请问要怎么重新给上传按钮定义事件呢，我上传图片需要跨域？

从上面复制的代码，运行时报 [Vue warn]: Failed to resolve directive: el，弹框能正常弹出来。但是点上传的时候报Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" 错误。vue 版本是2.2.2 , vue-image-crop-upload版本是1.3.8

用vue的话基本上是前后端分离的，而且token一般放cookie的，所以应该自己来控制上传这块，只需要把base64数据得到就行了。

I get the following errors:

Cannot read property 'fileinput' of undefined
and
Cannot read property 'canvas' of undefined

What is the problem?

The style is not fit to the mobile phone. The width is set to a fixed number 600px. Why not use the responsive layout?

Is it possible to crop without uploading? I am using vuex so i want to dispatch an action from the component.

右面的图像预览可以关掉吗

First thank you for making this component.

Actually crop-success is triggered with the following arguments: createImgUrl, field and ki. I have a use case here where I want to display the cropped image and wait for the user to click on a button before performing the upload. The upload must be done as a normal upload so I'm gonna need to do something like what you did in upload()
fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);
Is it possible to change the arguments sent to crop-success handlers so that they can be used to do some like that and also display the cropped image?

Hi, i use jwt auth.
How to add custom headers?

method in :other-params="otherParams" or method in :params="otherParams" :

otherParams: {
    headers: {
        'Authorization': 'Bearer ...'
   }
}

not working :-(

vue 2.0.6

能否支持bower 安装和es5使用

[Vue warn]: "key" is a reserved attribute and cannot be used as component prop.
(found in component at vue-image-crop-upload\upload-2.vue)

Vue version 2.0.6

你好，如题

缩小浏览器后，组件会浮在上层，无法关闭，卡住页面，建议屏幕小于组件时启动关闭部分

How to add custom language?

IE9不支持的原因是什么？

使用vue单文件组件时upload组件窗体无法弹出，需要吧这个组件嵌套在model-dialog组件中，跟随dialog同时弹出才能显示。

Thanks for really beautiful and complete image crop uploader, If you can add a <slot> where we can add some text on the first step it will be great, currently it says nothing only a upload area. I wanted to add some text on the first step. like Please upload an image no more than 1 MB.

你好，现在一个需求是要求不仅仅是通过本地选择图片文件，还可以从其他地方选择一张图片裁剪上传，类似于微博那种从相册选择一张图片，然后裁剪，请问如果用这个插件，有什么办法实现吗？

I have find this component have bug in upload-2.vue

let client = new XMLHttpRequest();
                client.open('POST', url, true);
                client.onreadystatechange = function() {
                    if (this.readyState !== 4) {
                        return;
                    }
                    if (this.status === 200) {
                        resolve(JSON.parse(this.responseText));
                    } else {
                        reject(this.status);
                    }
                };
                client.upload.addEventListener("progress", uploadProgress, false); //监听进度
				// 设置header
	            if (typeof headers == 'object' && headers) {
	                Object.keys(headers).forEach((k) => {
	                    client.setRequestHeader(k, headers[k]);
	                })
	            }
                client.send(fmData);

the client.upload is Object- {} , find the addEventListener is undefined ,
but I delete upload to 'client.addEventListener("progress", uploadProgress,false)',the
progress not change.

Thank you, if you reply to me

<Avatar-upload field="avatar" @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess" @crop-upload-fail="cropUploadFail" v-model="uploadShow" :width="300" :height="300" url="/upload" :params="params" :headers="headers" img-format="png"></Avatar-upload>

import AvatarUpload from 'vue-image-crop-upload';
components: { 'Avatar-upload': AvatarUpload },

Webpack throws this error while uglifying the code.

ERROR in static/js/kite.4.76951c1af06af38f3f25.js from UglifyJs
Unexpected token: name (opts) [./~/vue-image-crop-upload/utils/effectRipple.js:9,0][static/js/kite.4.76951c1af06af38f3f25.js:3870,5]

In my opinion the library should not be using effectRipple because most of the users might not prefer it.

                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText));
                } else {
                    reject(this.status);
                }

只判断200，不全面。

1 上传图片背景为空 ， 裁剪时背景会变成黑色， 2 希望能够支持旋转功能