{"action":"created","issue":{"url":"https://api.github.com/repos/xyxiao001/vue-cropper/issues/205","repository_url":"https://api.github.com/repos/xyxiao001/vue-cropper","labels_url":"https://api.github.com/repos/xyxiao001/vue-cropper/issues/205/labels{/name}","comments_url":"https://api.github.com/repos/xyxiao001/vue-cropper/issues/205/comments","events_url":"https://api.github.com/repos/xyxiao001/vue-cropper/issues/205/events","html_url":"https://github.com/xyxiao001/vue-cropper/issues/205","id":374273134,"node_id":"MDU6SXNzdWUzNzQyNzMxMzQ=","number":205,"title":"图片加载不成功  老是跨域， 但服务端设置了跨域，烦请看看","user":{"login":"GrowingMonkey","id":24692542,"node_id":"MDQ6VXNlcjI0NjkyNTQy","avatar_url":"https://avatars1.githubusercontent.com/u/24692542?v=4","gravatar_id":"","url":"https://api.github.com/users/GrowingMonkey","html_url":"https://github.com/GrowingMonkey","followers_url":"https://api.github.com/users/GrowingMonkey/followers","following_url":"https://api.github.com/users/GrowingMonkey/following{/other_user}","gists_url":"https://api.github.com/users/GrowingMonkey/gists{/gist_id}","starred_url":"https://api.github.com/users/GrowingMonkey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GrowingMonkey/subscriptions","organizations_url":"https://api.github.com/users/GrowingMonkey/orgs","repos_url":"https://api.github.com/users/GrowingMonkey/repos","events_url":"https://api.github.com/users/GrowingMonkey/events{/privacy}","received_events_url":"https://api.github.com/users/GrowingMonkey/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-10-26T08:11:38Z","updated_at":"2018-10-26T08:44:39Z","closed_at":null,"author_association":"NONE","body":"`<template>\r\n  <div class=\"image-croppy-container\">\r\n    <div class=\"header\">\r\n      <h1>选择封面</h1>\r\n    </div>\r\n    <div class=\"center\">\r\n      <div class=\"left\" @mouseup=\"moveMouse()\">\r\n        <div class=\"croppy-title\">封面展示区域</div>\r\n        <vueCropper\r\n          class=\"croppy-box\"\r\n          ref=\"cropper2\"\r\n          :img=\"example2.img\"\r\n          :outputSize=\"example2.size\"\r\n          :outputType=\"example2.outputType\"\r\n          :info=\"example2.info\"\r\n          :canScale=\"example2.canScale\"\r\n          :autoCrop=\"example2.autoCrop\"\r\n          :autoCropWidth=\"example2.autoCropWidth\"\r\n          :autoCropHeight=\"example2.autoCropHeight\"\r\n          :fixed=\"example2.fixed\"\r\n          :fixedNumber=\"example2.fixedNumber\"\r\n          @realTime=\"realTime\"\r\n        ></vueCropper>\r\n      </div>\r\n      <div class=\"right\">\r\n        <div class=\"yulan-item1\" style=\"position: relative\">\r\n          <img :src=\"modelSrc?modelSrc:cover\" alt=\"\" class=\"-img\" style=\"width: 210px;height: 118px\"\r\n               crossOrigin=\"Anonymous\">\r\n          <div class=\"info-box\">\r\n            <h1>图文封面（16：9）</h1>\r\n            <span>客户端首页显示此封面</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"yulan-item2\">\r\n          <img :src=\"modelSrc?modelSrc:cover\" alt=\"\" class=\"-img\" crossOrigin=\"Anonymous\">\r\n          <div class=\"info-box\">\r\n            <h1>图文封面（1 ：1）</h1>\r\n            <span>分享微信，QQ等第三方平台，用户看到此封面</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"footer\">\r\n      <span class=\"cancle\" @click.stop.prevent=\"showImgUp\">取消</span>\r\n      <span class=\"sure\" @click.stop.prevent=\"sureFilish\">确定</span>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import VueCropper from 'vue-cropper'\r\n\r\n  export default {\r\n    props: ['cover'],\r\n    name: 'imageCropper',\r\n    data() {\r\n      return {\r\n        mobileCover:'',\r\n        coverName: '',\r\n        crap: false,\r\n        previews: {},\r\n        modelSrc: '',\r\n        lists: [\r\n          {\r\n            img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'\r\n          },\r\n          {\r\n            img: 'http://ofyaji162.bkt.clouddn.com/touxiang.jpg'\r\n          }\r\n        ],\r\n        downImg: '#',\r\n        example2: {\r\n          img: window.sessionStorage.getItem('articleCover'),\r\n          info: true,\r\n          size: 1,\r\n          outputType: 'jpeg',\r\n          canScale: false,\r\n          autoCrop: true,\r\n          canMoveBox: true,\r\n          // 只有自动截图开启 宽度高度才生效\r\n          autoCropWidth: 266,\r\n          autoCropHeight: 133,\r\n          // 开启宽度和高度比例\r\n          fixed: true,\r\n          fixedNumber: [16, 9]\r\n        }\r\n      }\r\n    },\r\n    beforeMount(){\r\n      console.log(this.cover);\r\n      this.example2.img=window.sessionStorage.getItem('articleCover');\r\n    },\r\n    mounted() {\r\n      // this.example2.img = this.cover;\r\n      this.coverName = new Date().getTime();\r\n      // this.finish('base64');\r\n    },\r\n    components: {\r\n      VueCropper\r\n    },\r\n    methods: {\r\n      showImgUp() {\r\n        this.$store.commit({type: 'SHOW_DIALOG', dialogType: 4})\r\n      },\r\n      moveMouse() {\r\n        console.log(1111111);\r\n        this.finish('base64')\r\n      },\r\n      realTime(data) {\r\n        this.previews = data;\r\n      },\r\n      canvasEg() {\r\n        var that = this;\r\n        var image = new Image();\r\n        var canvas = document.createElement('canvas');\r\n        var ctx = canvas.getContext(\"2d\");\r\n        var $img = document.querySelector('.-img');\r\n        image.crossOrigin = \"anonymous\";\r\n        image.onload = function () {\r\n          var width = this.width;\r\n          var height = this.height;\r\n          var dataUrl;\r\n          ctx.drawImage(image, that.previews.w / 2, that.previews.h / 2, width, height, 0, 0, width, height);\r\n          dataUrl = canvas.toDataURL(\"image/png\");\r\n          $img.src = dataUrl;\r\n        }\r\n        console.log(that.cover);\r\n        image.src = this.example2.img;\r\n      },\r\n      finish(type) {\r\n        // 输出\r\n        // var test = window.open('about:blank')\r\n        // test.document.body.innerHTML = '图片生成中..'\r\n        if (type === 'blob') {\r\n          this.$refs.cropper2.getCropBlob((data) => {\r\n            var img = window.URL.createObjectURL(data)\r\n            this.model = true;\r\n            this.modelSrc = img;\r\n          })\r\n        } else {\r\n          this.$refs.cropper2.getCropData((data) => {\r\n            this.model = true;\r\n            console.log(data);\r\n            this.modelSrc = data;\r\n          })\r\n        }\r\n      },\r\n      sureFilish() {\r\n\r\n        let file =this.dataURLtoFile(this.modelSrc,this.cover);\r\n        console.log(file);\r\n        let filename = this.coverName;\r\n        let param = new FormData();  // 创建form对象\r\n        param.append('pictures', file, filename);  // 通过append向form对象添加数据\r\n        param.append('uid', this.$store.state.userInfo.uid);\r\n        // 添加form表单中其他数据\r\n        console.log('上传图片');\r\n        this.$store.dispatch({\r\n          type:'upload_img',\r\n          params:param,\r\n          isCover:true,\r\n        }).then((res) => {\r\n          console.log(res);\r\n          if(parseInt(res.data.code)!==0){\r\n            this.$message({\r\n              showClose: true,\r\n              message: res.data.msg,\r\n              type: 'error'\r\n            });\r\n          }\r\n          this.$store.commit('HIDDEN_DIALOG', {\r\n            dialogType: 4\r\n          })\r\n        })\r\n      },\r\n      dataURLtoFile(dataurl, filename) {//将base64转换为文件\r\n        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],\r\n          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);\r\n        while (n--) {\r\n          u8arr[n] = bstr.charCodeAt(n);\r\n        }\r\n        return new File([u8arr], filename, {type: mime});\r\n      }\r\n      // down (type) {\r\n      //   // event.preventDefault()\r\n      //   var aLink = document.createElement('a')\r\n      //   aLink.download = 'demo'\r\n      //   // 输出\r\n      //   if (type === 'blob') {\r\n      //     this.$refs.cropper.getCropBlob((data) => {\r\n      //       this.downImg = data\r\n      //       aLink.href = data\r\n      //       aLink.click()\r\n      //     })\r\n      //   } else {\r\n      //     this.$refs.cropper.getCropData((data) => {\r\n      //       this.downImg = data\r\n      //       aLink.href = data\r\n      //       aLink.click()\r\n      //     })\r\n      //   }\r\n      // },\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"less\" scoped>\r\n  .image-croppy-container {\r\n    width: 808px;\r\n    height: 638px;\r\n    border-radius: 10px;\r\n    background: #ffffff;\r\n    .header {\r\n      padding: 30px;\r\n      border-bottom: 1px solid #f7f7f7;\r\n      box-sizing: border-box;\r\n      h1 {\r\n        font-size: 20px;\r\n        color: #2c2a25;\r\n      }\r\n    }\r\n    .center {\r\n      display: flex;\r\n      .left {\r\n        max-width: 387px;\r\n        padding: 43px 60px 0 60px;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        .croppy-title {\r\n          font-size: 16px;\r\n          color: #8f8f8f;\r\n          margin-bottom: 30px;\r\n        }\r\n        .croppy-box {\r\n          width: 266px;\r\n          height: 212px;\r\n        }\r\n      }\r\n      .right {\r\n        .yulan-item1 {\r\n          margin-bottom: 18px;\r\n          display: flex;\r\n          height: 168px;\r\n          overflow: hidden;\r\n          align-items: center;\r\n          justify-content: center;\r\n          img {\r\n            width: 210px;\r\n            height: 168px;\r\n          }\r\n          .info-box {\r\n            width: 210px;\r\n            height: 168px;\r\n            padding-left: 20px;\r\n            padding-top: 38px;\r\n            box-sizing: border-box;\r\n            h1 {\r\n              font-size: 18px;\r\n              color: #2c2a25;\r\n              margin-bottom: 20px;\r\n            }\r\n            span {\r\n              font-size: 14px;\r\n              color: #8f8f8f;\r\n            }\r\n          }\r\n        }\r\n        .yulan-item2 {\r\n          display: flex;\r\n          height: 210px;\r\n          overflow: hidden;\r\n          align-items: center;\r\n          justify-content: center;\r\n          img {\r\n            width: 210px;\r\n            height: 210px;\r\n          }\r\n          .info-box {\r\n            width: 210px;\r\n            height: 210px;\r\n            padding-left: 20px;\r\n            padding-top: 8px;\r\n            box-sizing: border-box;\r\n            h1 {\r\n              font-size: 18px;\r\n              color: #2c2a25;\r\n              margin-bottom: 20px;\r\n            }\r\n            span {\r\n              font-size: 14px;\r\n              color: #8f8f8f;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n    .footer {\r\n      margin-top: 60px;\r\n      display: flex;\r\n      justify-content: center;\r\n      span {\r\n        border-radius: 10px;\r\n        display: inline-block;\r\n        width: 118px;\r\n        height: 44px;\r\n        line-height: 44px;\r\n        text-align: center;\r\n        cursor: pointer;\r\n      }\r\n      .cancle {\r\n        margin-right: 50px;\r\n        background: #eeeeee;\r\n        font-size: 22px;\r\n        color: #8f8e8e;\r\n      }\r\n      .sure {\r\n        background: #fef450;\r\n        font-size: 22px;\r\n        color: #2c2a25;\r\n      }\r\n      .cancle:hover {\r\n        opacity: 0.6;\r\n      }\r\n      .sure:hover {\r\n        opacity: 0.6;\r\n      }\r\n    }\r\n  }\r\n</style>\r\n`"},"comment":{"url":"https://api.github.com/repos/xyxiao001/vue-cropper/issues/comments/433334556","html_url":"https://github.com/xyxiao001/vue-cropper/issues/205#issuecomment-433334556","issue_url":"https://api.github.com/repos/xyxiao001/vue-cropper/issues/205","id":433334556,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMzMzNDU1Ng==","user":{"login":"GrowingMonkey","id":24692542,"node_id":"MDQ6VXNlcjI0NjkyNTQy","avatar_url":"https://avatars1.githubusercontent.com/u/24692542?v=4","gravatar_id":"","url":"https://api.github.com/users/GrowingMonkey","html_url":"https://github.com/GrowingMonkey","followers_url":"https://api.github.com/users/GrowingMonkey/followers","following_url":"https://api.github.com/users/GrowingMonkey/following{/other_user}","gists_url":"https://api.github.com/users/GrowingMonkey/gists{/gist_id}","starred_url":"https://api.github.com/users/GrowingMonkey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GrowingMonkey/subscriptions","organizations_url":"https://api.github.com/users/GrowingMonkey/orgs","repos_url":"https://api.github.com/users/GrowingMonkey/repos","events_url":"https://api.github.com/users/GrowingMonkey/events{/privacy}","received_events_url":"https://api.github.com/users/GrowingMonkey/received_events","type":"User","site_admin":false},"created_at":"2018-10-26T08:44:39Z","updated_at":"2018-10-26T08:44:39Z","author_association":"NONE","body":"不是canvas 而是使用的img标签回显的   而且这个跨域是偶尔引起的   \r\n![image](https://user-images.githubusercontent.com/24692542/47555313-0f23bc00-d93e-11e8-96de-df77497beb37.png)\r\n移动选框4次就好了\r\n![image](https://user-images.githubusercontent.com/24692542/47555407-5a3dcf00-d93e-11e8-96f2-dea944e1870b.png) 截图成功\r\n"}}
{"actor":{"display_login":"GrowingMonkey"}}