需求：
類似一些美圖軟體中的給照片加相框的操作
1. 使用者選擇照片，照片可以移動、可以放大縮小
2. 選擇海報模版
3. 生成海報
最後生成的海報效果圖類似下圖

使用的技術棧是：vue+html2canvas+exif-js
具體思路和程式碼：

html部分，思路和邏輯在程式碼下面寫著

<template>
    <section>
        <div id='posterwrap' v-show='!sharing' ref="wrap">
            <div  ref='posterwrap-inner'
 
 class="posterwrap-inner">
                <p v-show='!temp.imgsrc'   @click='chooseimg'></p>
                <!-- 照片預覽區 -->
                <div class="preview-img-wrap">
                    <img @touchstart.prevent.stop='touchStart($event, 0)' @touchmove.prevent.stop='touchMove($event, 0,  -1)'
 
 @touchend.prevent.stop='touchEnd($event, 0)' :style='{width: 99 * myphoto.scale + "%", height: 99 * myphoto.scale + "%", left: myphoto.x + "px", top: myphoto.y + "px"}' :src="myphoto.imgsrc" id='preview' alt="" ref="img" >
                </div>
                <!-- 選擇的海報模版 -->
                <img
 
 @touchstart.prevent.stop='touchStart($event, 0)' @touchmove.prevent.stop='touchMove($event, 0)' @touchend.prevent.stop='touchEnd($event, 0)'  :src="temp" alt="" class="tag-item">
            </div>
        </div>
        <!-- 海報模版區 -->
        <div class="footer">
            <div id="tags-preview">
                <img class="tag-item" @click='addTag' src="@/assets/img/temp1.png" alt="">
                <img class="tag-item" @click='addTag' src="@/assets/img/temp2.png" alt="">
            </div>
            <!-- 按鈕區 -->
            <div class="banner">
                <div @click='rephoto' data-xeslog-params="key=click-upload-img" class="rephoto footer-btn">重新選圖</div>
                <div class="share footer-btn" @click='screenshots' data-xeslog-params="key='click-finish-share'">製作完成</div>
            </div>
        </div>
        </div>
        <!-- canvas區  僅用作工具 -->
        <canvas id='canvas'></canvas>
        <canvas id='canvas2'></canvas>
        <canvas id='canvas3' style="display:none"></canvas>
        <!-- 默默調起使用者圖片的input -->
        <input type="file" value="" accept="image/*" id='chooseimg' @change='previewFile'>
        <!-- 最終生成的海報 -->
        <div v-if='share' data-xeslog-params="key=click-share-img" class="result">
                <p class="share-tit">長按儲存海報</p>
                <p >分享到朋友圈，有機會返還學費哦</p>
                <div class="myposter-wrap">
                    <img v-if="this.$route.query.isapp == 0" id='myposter' :src="myposterlast" alt="">
                </div>
        </div>
        <!-- 提示層區 -->
        <div class="shadow"   v-if="finish">
            <div class="post-doing" v-if="finish">
                <img src ="@/assets/img/loading.gif" alt="">
                <p>{{shadow}}</p>
            </div>
        </div>
    </section>
</template>

1.點選’選擇圖片’的按鈕時候，實際觸發的是<input type="file">,在input的change事件裡面，使用new FileReader()讀取圖片的bsae64，如果調起的是使用者的相機拍照照片，在各別機型上傳出來的照片會有90度或180度旋轉的現象，解決這一問題使用的是exif-js來將旋轉了的圖片放正。然後得到正確位置的圖片的base64賦給圖片預覽區的img
2. 通過上面的步驟，我們可以在預覽區生成了預覽的圖片，接下來要實現的是點選需要的海報模版相框，這個邏輯比較簡單，就是將點選的模版src賦給模版img
3. 模版選擇好了，接下來要進行照片的編輯了，照片的縮放和移動，相對還是比較難寫一些的，通過touchstart事件的e.touches來判斷是否為多指操作和兩指之間的距離判斷來判定是縮放還是移動。如果是縮放，需要計算放大的比例。如果是移動，需要計算移動的比例，具體程式碼如下

_getDistance (xLen, yLen) {//計算距離
       return Math.sqrt(xLen * xLen + yLen * yLen)
      },
touchStart (e, index) {//縮放或者移動
        if (e.touches.length > 1) {
            let point1 = e.touches[0]
            let point2 = e.touches[1]
            let xLen = Math.abs(point2.pageX - point1.pageX)
            let yLen = Math.abs(point2.pageY - point1.pageY)
            this.myphoto.touchDistance = this._getDistance(xLen, yLen)
          } else {
            this.myphoto.move = 1
            this.myphoto.sx = e.touches[0].pageX
            this.myphoto.sy = e.touches[0].pageY
          }
        }
    },
    touchMove (e, index, direction) {//拖動
        direction = direction == -1 ? -1 : 1
        if (e.touches.length > 1) {
          let xLen = Math.abs(e.touches[0].pageX - e.touches[1].pageX)
          let yLen = Math.abs(e.touches[1].pageY - e.touches[1].pageY)
          let touchDistance = this._getDistance(xLen, yLen) - this.myphoto.touchDistance
          if (this.myphoto.touchDistance) {
            let scale = Math.abs(this.myphoto.scale + touchDistance / 3000)
            this.myphoto.scale = (scale > 3 ? 3 : scale < 0.5 ? 0.5 : scale)
          }
    } else {
        this.myphoto.x -= (this.myphoto.sx - e.touches[0].pageX) * direction
        this.myphoto.y -= (this.myphoto.sy - e.touches[0].pageY) * direction
        this.myphoto.sx = e.touches[0].pageX
        this.myphoto.sy = e.touches[0].pageY
    }
    },
    touchEnd (e, index) {//行為結束
        this.myphoto.touchDistance = 0
        this.myphoto.move = 0
        if (e.touches.length) {
            this.myphoto.move = 1
            this.myphoto.sx = e.touches[0].pageX
            this.myphoto.sy = e.touches[0].pageY
        }
    },

4.再接下來就是截圖來，將有了照片的模版使用html2canvas截圖

screenshots () {
            var _this = this
            var wrap = document.getElementById('posterwrap')
            var canvas = document.getElementById('canvas')
            _this.finish = 1
            _this.shadow = '正在努力製作海報'
            canvas.width = wrap.offsetWidth * 2 + 5
        canvas.height = wrap.offsetHeight * 2 
        canvas.style.width = wrap.offsetWidth + 'px'
          canvas.style.height = wrap.offsetHeight + 'px'
          console.log(canvas)
          var context = canvas.getContext('2d')
          context.scale(2, 2)
          context.translate(-20, -10)
      html2canvas(_this.$refs['posterwrap-inner'], {
          allowTaint: true,
          taintTest: false,
          backgroundColor: null,
        //   dpi: 3000,
          scale: 2,
          canvas: canvas,
          width: canvas.width,
          height:   canvas.height,
          removeContainer: false,
          useCORS: true,      
          onrendered: function (canvas) {//將截圖圖片的base64給生成區
            var dataUrl = canvas.toDataURL('image/jpg')
                    _this.sharing = 1
                    _this.myposterlast = dataUrl
            _this.share = 1
            _this.myphoto = {
                touchDistance: 0,
                scale: 1,
                move: 0,
                x: 0,
                y: 0,
                sx: 0,
                sy: 0,
                imgsrc: ''
            }
            _this.taglist = _this.myphoto
          }
            })
        },

其中有遇到一個很坑的問題：html2canvas截圖圖片有白邊/黑邊 的問題