cdn方式使用vue-cropper及直接使用

cdn方式使用vue-cropper首先要引入

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="{{asset('js/cos-js-sdk-v5.min.js')}}"></script>   // 騰訊雲的sdk
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>

vue-cropper官方屬性文檔地址

https://github.com/xyxiao001/vue-cropper

因爲使用 cdn引用vue-cropper，vue-cropper屬性要改寫爲auto-crop格式因爲html不支持駝峯式語法

   <div>
      <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
               <el-form-item v-show="!isonSiteMap" label="封面圖" required>
							<div class='el-select'  style=" margin-right: 65px">
								<el-upload
									class="avatar-uploader"
									action
									list-type='picture'
									data-sdfsd="nihao"
									:show-file-list="false"
									:http-request="customUpload"
									>
									<img v-if="ruleForm.article_image" :src="ruleForm.article_image" class="avatar" />
									<i v-else @click="before_img(1)" class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
                 <div class="el-upload__text">推薦尺寸222*222</div>
							</div>
          </el-form-item>
       </el-form>
       	<el-dialog title="裁剪圖片" width="1000px" :visible.sync="dialogFormVisible_two_img">
            <div style="height:500px">
            <vue-cropper
              ref="cropper2"
              :img="example2.img"
              :output-size="example2.size"
              :output-type="example2.outputType"
              :info="example2.info"
              :can-move='example2.canMove'
              :fixed-box="example2.fixedBox"
              :center-box="example2.centerBox"
              :can-scale="example2.canScale"
              :auto-crop="example2.autoCrop"
              :auto-crop-width="example2.autoCropWidth"
              :auto-crop-height="example2.autoCropHeight"
              :fixed="example2.fixed"
              :fixed-number="example2.fixedNumber"
              ></vue-cropper>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_two_img = false">取 消</el-button>
                <el-button type="primary" @click="dfjgdjgdjvgd">確 定</el-button>
            </div>
        </el-dialog>
   </div>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
 <script>
   Vue.use(window['vue-cropper'].default.VueCropper)
   let app = new Vue({
    el: "#app",
    data() {
      return {
        ruleForm: {
          head_image: "",
        },
        dialogFormVisible_two_img:false, //截圖彈框控制
		example2: {
		    img: "",                    // 裁剪圖片的地址	可選值：url 地址 || base64 || blob
			info: true,                 // 裁剪框的大小信息	可選值：true || false
			size: 1,                    // 裁剪生成圖片的質量    可選值：0.1 - 1
			outputType:'png',           // 裁剪生成圖片的格式    可選值：jpeg || png || webp
			canScale: true,             // 圖片是否允許滾輪縮放     可選值：true || false
			autoCrop: true,             // 是否默認生成截圖框
			canMove:true,	              // 上傳圖片是否可以移動 可選值：true | false
			fixedBox:false,             // 固定截圖框大小 不允許改變  可選值：true | false
			centerBox:false,            // 截圖框是否被限制在圖片裏面
			// 只有自動截圖開啓 寬度高度才生效
			autoCropWidth: 500,
			autoCropHeight: 500,
			fixed: false,                // 開啓寬度和高度比例
			fixedNumber: [1, 1]
		},
	},
	methods:{
	  		customUpload(res){
                console.log("上傳")
				let that = this
				var reader = new FileReader();
                reader.readAsArrayBuffer(res.file);
                reader.onload=function(e){
		            var bf = this.result;
		            var blob = new Blob([bf],{type:"text/plain"});
		            var str = URL.createObjectURL(blob);
		            that.dialogFormVisible_two_img = true
		            that.example2.img = str
                },
            dfjgdjgdjvgd(){
				  let that = this
				  this.$refs.cropper2.getCropBlob(res=>{
				         //res  爲裁剪後的圖片課用來上傳到服務器或者騰訊雲  ， 這裏實例用的騰訊雲
				          let Bucket = "";   // 騰訊雲的參數
				          let Region = "";  // 騰訊雲的參數
				          let cos = new COS({
				            getAuthorization: function (options, callback) {
				              // 異步獲取臨時密鑰
				              $.get(
				                "url", {    //url爲上傳的騰訊雲地址 具體課以看騰訊雲文檔
				                bucket: options.Bucket,
				                region: options.Region
				              },
				                function (data) {
				                  callback({
				                    TmpSecretId: data.data.tmpSecretId,
				                    TmpSecretKey: data.data.tmpSecretKey,
				                    XCosSecurityToken: data.data.sessionToken,
				                    ExpiredTime: data.data.expiredTime
				                  });
				                }
				              );
				            }
				          });
				          let rand = "";
				          for (var i = 0; i < 3; i++) {
				            let r = Math.floor(Math.random() * 10);
				            rand += r;
				          }
				          let name = +new Date() + rand;
				          cos.sliceUploadFile({
				            Bucket: Bucket,
				            Region: Region,
				            Key: name,
				            Body: res
				          },
				            function (err, data) {
				              console.log(data)
				              if (data.Location) {
				                if(that.isImg == 1){
				                  that.ruleForm.article_image = "https://"+data.Location
				                  that.dialogFormVisible_two_img = false;
				                }else if(that.isImg == 2){
				                  that.ruleForm.head_image = "https://"+data.Location;
				                  that.dialogFormVisible_two_img = false;
				                }
				              } else {
				                app.$message.warning(JSON.stringify(err));
				              }
				            }
				          );
				})
			},
      },
	}
   })
 </script>

vue構建項目中使用

main.js裏面使用
import VueCropper from 'vue-cropper' 
Vue.use(VueCropper)
組件內
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},
然後就像使用普彭插件一樣就行

<el-dialog title="裁剪圖片" width="1000px" :visible.sync="dialogFormVisible_two_img">
            <div style="height:500px">
			<vueCropper
				ref="cropper2"
				:img="example2.img"
				:outputSize="example2.size"
				:outputType="example2.outputType"
				:info="example2.info"
				:canMove='example2.canMove'
				:fixedBox="example2.fixedBox"
				:centerBox="example2.centerBox"
				:canScale="example2.canScale"
				:autoCrop="example2.autoCrop"
				:autoCropWidth="example2.autoCropWidth"
				:autoCropHeight="example2.autoCropHeight"
				:fixed="example2.fixed"
				:fixedNumber="example2.fixedNumber"
				></vueCropper>
			</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_two_img = false">取 消</el-button>
                <el-button type="primary" @click="dfjgdjgdjvgd">確 定</el-button>
            </div>
        </el-dialog>

如有看不懂可聯繫作者進行一對一輔導如果幫助到了你請點個贊