vue 實現(xiàn)網(wǎng)頁截圖功能詳解

更新時間：2021年11月18日 17:31:20 作者：不愿禿頭的陽某

這篇文章主要介紹了通過vue實現(xiàn)網(wǎng)頁截圖的功能，有興趣的童鞋可以了解一下

最近項目有一個需求，需要上傳圖片，但是客戶上傳的圖片大小不一，所以我們需要規(guī)定客戶的圖片比例，但又需要是客戶所需的，所以就想到了截圖

實現(xiàn)效果

我們的架構(gòu)是vue，所以用的是一個vue的截圖插件

安裝插件：npm install vue-cropper --save-dev

引入組件

 import Vue from 'vue';
 import { VueCropper } from "vue-cropper";

 Vue.use(VueCropper)

核心代碼

 <div>
            <span class="spanStyle">產(chǎn)品圖片：</span>
            <!--整個圖片預(yù)覽的div-->
            <div style="display:flex;padding-left: 300px;">
              <div class="info-item" style="flex:1;margin-left:-160px;margin-top: -25px">
                <label class="btn btn-orange theme-bg-gray theme-white w90" for="uploads" style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;" >選擇圖片</label>
                <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
                <div class="line" style="margin-left: -280px;margin-top: 85px;">
                  <div class="cropper-content" style="margin-top:-60px;margin-left:160px;">
                    <div class="cropper">
                      <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :outputSize="option.size"
                        :outputType="option.outputType"
                        :info="true"
                        :full="option.full"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :original="option.original"
                        :autoCrop="option.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :fixedBox="option.fixedBox"
                        @realTime="realTime"
                      ></vueCropper>
                    </div>
                    <!--截取完的圖片展示div-->
                    <div style="margin-left:700px;">
                      <div class="show-preview" :style="{'width': '300px', 'height':'150px',  'overflow': 'hidden', 'margin-left': '-650px'}">
                        <div :style="previews.div" >
                          <img :src="previews.url" :style="previews.img">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

預(yù)覽的方法

data (){
	return{
		 headImg:'',
                //剪切圖片上傳
                crap: false,
                previews: {},
                option: {
                    img: '',
                    outputSize:1, //剪切后的圖片質(zhì)量（0.1-1）
                    full: false,//輸出原圖比例截圖 props名full
                    outputType: 'png',
                    canMove: true,
                    original: false,
                    canMoveBox: true,
                    autoCrop: true,
                    autoCropWidth: 300,
                    autoCropHeight: 150,
                    fixedBox: true
                },
                fileName:'',  //本機文件地址
                downImg: '#',
                imgFile:'',
                uploadImgRelaPath:'', //上傳后的圖片的地址（不帶服務(wù)器域名）
	}
},
methods:{
	// 實時預(yù)覽函數(shù)
   realTime(data) {
       console.log('realTime')
       this.previews = data
   },
   //選擇本地圖片
   uploadImg(e, num) {
       console.log('uploadImg');
       var _this = this;
       //上傳圖片
       var file = e.target.files[0]
       _this.fileName = file.name;
       if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
           alert('圖片類型必須是.gif,jpeg,jpg,png,bmp中的一種')
           return false
       }
       var reader = new FileReader();
       reader.onload =(e) => {
           let data;
           if (typeof e.target.result === 'object') {
               // 把Array Buffer轉(zhuǎn)化為blob 如果是base64不需要
               data = window.URL.createObjectURL(new Blob([e.target.result]))
           }
           else {
               data = e.target.result
           }
           if (num === 1) {
               _this.option.img = data
           } else if (num === 2) {
               _this.example2.img = data
           }
       }
       // // 轉(zhuǎn)化為blob
       reader.readAsArrayBuffer(file);
   }
}

然后我們要獲取截取完之后的圖片，是通過Cropper的回調(diào)函數(shù)來獲取它的圖片，這里我們獲取的是我們轉(zhuǎn)為blob格式的圖片（不轉(zhuǎn)顯示不了）
這邊是因為后臺就是用file類型接收的，所以我需要再把blob轉(zhuǎn)為file，然后才用formData上傳文件

productAdd(){
this.$refs.cropper.getCropBlob((data) => {
	  //這個data就是我們截取后的blob圖片
	  let formData = new FormData();
	  //獲取文件名，因為在轉(zhuǎn)成file里面不能用this.所以需要用一個變量來賦值
      var name=this.fileName
       var file = new File([data], name, {type: data.type, lastModified: Date.now()});
       formData.append("files",file)
       new Promise((resolve, reject) => {
           productAdd(formData).then(response => {
               if (response.code == 20000) {
                   Dialog.alert({
                       title: '提示',
                       message: '保存成功！'
                   }).then(() => {
                       this.back('/productInfo')
                   });

               }
           }).catch(error => {
               reject(error)
           })
       })
   })
}

實際運用到自己的項目中還需改動，比如編輯圖片還需回顯，上傳多張剪切的圖片等等…

以上就是vue 實現(xiàn)網(wǎng)頁截圖功能詳解的詳細內(nèi)容，更多關(guān)于vue 網(wǎng)頁截圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: