vue2.2.6 怎么只有裁剪框没有图片

xyxiao001 / vue-cropper

A simple picture clipping plugin for vue

https://github.xyxiao.cn/vue-cropper/docs/vue3.html

MIT License

4.27k stars 695 forks source link

vue2.2.6 怎么只有裁剪框没有图片 #1

Closed 617450941 closed 7 years ago

617450941 commented 7 years ago

vue2.2.6 怎么只有裁剪框没有图片

xyxiao001 commented 7 years ago

贴代码

xyxiao001 commented 7 years ago

图片支持url 和 base64传入

617450941 commented 7 years ago

我看到img 那个标签有个display:none的属性

617450941 commented 7 years ago

xyxiao001 commented 7 years ago

<vueCropper ref="cropper2" :img="example2.img" :outputSize="example2.size" :outputType="example2.outputType" :info="example2.info" :canScale="example2.canScale" :autoCrop="example2.autoCrop" :autoCropWidth="example2.width" :autoCropHeight="example2.height"

需要传入img 你传入没

617450941 commented 7 years ago

确定传了img url

617450941 commented 7 years ago

<vueCropper
  ref="cropper2"
  :img="example.img"
  :outputSize="example.size"
  :outputType="example.outputType"
  :info="example.info"
  :canScale="example.canScale"
  :autoCrop="example.autoCrop"
  :autoCropWidth="example.width"
  :autoCropHeight="example.height"
></vueCropper>

    example: {
      img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
      info: false,
      size: 1,
      outputType: 'jpeg',
      canScale: false,
      autoCrop: true,
      autoCropWidth: 300,
      autoCropHeight: 250,
    }

xyxiao001 commented 7 years ago

页面截图看看，还有控制台有错吗

617450941 commented 7 years ago

截图如下 http://wxyx.hbgeek.com/issues/1.png http://wxyx.hbgeek.com/issues/2.png http://wxyx.hbgeek.com/issues/3.png http://wxyx.hbgeek.com/issues/4.png

617450941 commented 7 years ago

已经是按照demo复制过来还是一样不行

xyxiao001 commented 7 years ago

容器需要设置高度和宽度

xyxiao001 commented 7 years ago

你把外层容器设置个高度

617450941 commented 7 years ago

可以了谢谢

xyxiao001 commented 7 years ago

好的

617450941 commented 7 years ago

再问个问题执行this.$refs.cropper.getCropDate() 浏览器报这个错误Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 是怎么回事

xyxiao001 commented 7 years ago

这个是图片跨域的问题我看看去

617450941 commented 7 years ago

有解决办法吗

617450941 commented 7 years ago

貌似给img标签增加crossOrigin="anonymous"属性就可以解决

xyxiao001 commented 7 years ago

我等下推送个新版本上去，你到时更新下就好，等会我告诉你，

617450941 commented 7 years ago

好谢谢 npm同步更新的吗?

xyxiao001 commented 7 years ago

已经解决了 this.$refs.cropper.getCropDate((data) => { // do something console.log(data)
}) 你现在需要异步获取截图的数据需要更新到0.09版本

617450941 commented 7 years ago

不行还是报Access to Image at 'http://localhost:81/Public/Uploads/Model/Album/2017-06-13/593f632d64911.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. 这个错误

617450941 commented 7 years ago

已经是升到0.09版本问题依然存在

xyxiao001 commented 7 years ago

你不能这样用本地的图片因为图片跨域是需要后台允许，你要使用本地图片，请用上传的方式

xyxiao001 commented 7 years ago

第一个例子里面有上传的例子和写法

xyxiao001 commented 7 years ago

点错关了

xyxiao001 commented 7 years ago

https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image 你必须有一个可以对图片响应正确 Access-Control-Allow-Origin 响应头的服务器。你可以使用以下片段 (来自 HTML5 Boilerplate Apache server configs) 实现正确响应头。所以不能直接使用本地地址

xyxiao001 / vue-cropper

vue2.2.6 怎么只有裁剪框 没有图片 #1

vue2.2.6 怎么只有裁剪框没有图片 #1