摘要：所以需要在這里做一個(gè)判斷。使用的內(nèi)聯(lián)樣式時(shí)遇上的寫(xiě)法問(wèn)題直接使用手機(jī)拍照得到的圖片方向有問(wèn)題

原文鏈接：鏈接描述
使用vue+html2canvas+exif-js
github地址
線上demo

上傳圖片

對(duì)圖片進(jìn)行操作：移動(dòng)、放大、縮小

合成海報(bào)

html:

js

getPhoto () {
    var imageInput = document.querySelector("#image-input")
    var that = this
    imageInput.addEventListener("change", function (e) {
        reads = new FileReader()
        reads.readAsDataURL(this.files[0])
        reads.addEventListener("load", function (e) {
            that.imgUrl = this.result
            that.myImg.position.x = 0
            that.myImg.position.y = 0
            that.myImg.scale = 1
            var orientation
            that.previewImg.addEventListener("load", function () {
                Exif.getData(that.previewImg, function() { // 獲取圖像的數(shù)據(jù)
                Exif.getAllTags(this); // 獲取圖像的全部數(shù)據(jù)，值以對(duì)象的方式返回
                orientation = Exif.getTag(this, "Orientation"); // 獲取圖像的拍攝方向
                var rotateCanvas = document.createElement("canvas"),
                rotateCtx = rotateCanvas.getContext("2d");
                 // 針對(duì)圖像方向進(jìn)行處理
                switch (orientation) {
                    case 1 :
                        rotateCanvas.width = that.previewImg.width;
                        rotateCanvas.height = that.previewImg.height;
                        rotateCtx.drawImage(that.previewImg, 0, 0, that.previewImg.width, that.previewImg.height);
                        break;
                    case 6 : // 順時(shí)針 90 度
                        rotateCanvas.width = that.previewImg.height;
                        rotateCanvas.height = that.previewImg.width;
                        rotateCtx.translate(0, 0);
                        rotateCtx.rotate(90 * Math.PI / 180);
                        rotateCtx.drawImage(that.previewImg, 0, -that.previewImg.height, that.previewImg.width, that.previewImg.height);
                        break;
                    case 8 :
                        rotateCanvas.width = that.previewImg.height;
                        rotateCanvas.height = that.previewImg.width;
                        rotateCtx.translate(0, 0);
                        rotateCtx.rotate(-90 * Math.PI / 180);
                        rotateCtx.drawImage(that.previewImg, -that.previewImg.width, 0, that.previewImg.width, that.previewImg.height);
                        break;
                    case 3 : // 180 度
                        rotateCanvas.width = that.previewImg.width;
                        rotateCanvas.height = that.previewImg.height;
                        rotateCtx.translate(0, 0);
                        rotateCtx.rotate(Math.PI);
                        rotateCtx.drawImage(that.previewImg, -that.previewImg.width, -that.previewImg.height, that.previewImg.width, that.previewImg.height);
                        break;
                    default :
                        rotateCanvas.width = that.previewImg.width;
                        rotateCanvas.height = that.previewImg.height;
                        rotateCtx.drawImage(that.previewImg, 0, 0, that.previewImg.width, that.previewImg.height);
                    }
                    var rotateBase64 = rotateCanvas.toDataURL("image/jpeg", 0.5);
                });
            })
        }) 
    })
}

對(duì)圖片和相框綁定@touchstart @touchmove @touchend

getInitPosition (e) {
    event.preventDefault()
    if (this.imgUrl) {
        var length = e.touches.length
         if (length > 1) {
            let pointOne = e.touches[0]
            let pointTwo = e.touches[1]
            this.initTouchX = pointOne.clientX - pointTwo.clientX
            this.initTouchY = pointOne.clientY - pointTwo.clientY
        } else {
            var touches = e.touches[0]
            this.initTouchX = touches.clientX
            this.initTouchY = touches.clientY
        }   
    }
},
 getMovePosition (e) {
    event.preventDefault()
    if (this.imgUrl) {
        var length = e.touches.length
        if (length > 1) {
            let pointOne = e.touches[0]
            let pointTwo = e.touches[1]
            this.changeTouchX = pointOne.clientX - pointTwo.clientX
            this.changeTouchY = pointOne.clientY - pointTwo.clientY
            var scale = (this.changeTouchX - this.initTouchX) > (this.changeTouchY - this.initTouchY) ? (this.changeTouchX / this.initTouchX) : (this.changeTouchY / this.initTouchY) 
            scale *= this.myImg.lastScale
            this.myImg.scale = scale > 3 ? 3 : scale < 0.5 ? 0.5 : scale
        } else {
            var touches = e.touches[0]
            this.changeTouchX = touches.clientX - this.initTouchX
            this.changeTouchY = touches.clientY - this.initTouchY
            this.myImg.position.x = this.lastTouchX + (this.changeTouchX / this.myImg.scale)
            this.myImg.position.y = this.lastTouchY + (this.changeTouchY / this.myImg.scale)
        }   
    }
},
getLeavePosition (e) {
    this.myImg.lastScale = this.myImg.scale
    if (e.touches.length > 0) {
        var touches = e.touches[0]
        this.initTouchX = touches.clientX
        this.initTouchY = touches.clientY
    }
    this.lastTouchX = this.myImg.position.x
    this.lastTouchY = this.myImg.position.y
},

createPhoto () {
    if (this.imgUrl) {
        let photoBox = document.querySelector(".photo-box")
        newImgWidth = photoBox.style.offsetWidth
        let newImgHeight = photoBox.style.offsetHeight
        let scale = window.devicePixelRatio
        let that = this
        html2canvas(photoBox, {
            width: newImgWidth,
            height: newImgHeight,
            scale: scale,
            useCORS: true
        }).then(function (canvas) { 
            var dataUrl = canvas.toDataURL("image/jpg")
            localStorage.imgData = dataUrl
            that.$router.push({
                name: "share",
                params: {
                    storage: "imgData"
                }
            })
        })
    } else {
        alert("請(qǐng)上傳圖片")
    }
}

1) 在瀏覽器上阻止縮放的問(wèn)題

在tounchmove時(shí)使用event.preventDefault()

2) 合成圖片的清晰度

在html2canvas寫(xiě)參數(shù)時(shí)，scale = window.devicePixelRatio

3) 對(duì)圖片進(jìn)行縮放時(shí)，對(duì)距離的判斷

這里需要區(qū)分兩種情況：
- 兩指縮放
- 一指移動(dòng)  
在兩指縮放后會(huì)有一個(gè)手放手另一個(gè)手繼續(xù)操作的情況。這樣在touchend時(shí)，e.touches還存在一個(gè)元素。所以需要在這里做一個(gè)判斷。

4) 使用vue的:style="內(nèi)聯(lián)樣式"時(shí)遇上的寫(xiě)法問(wèn)題

:style="{transform:"scale("+ myImg.scale+ ") translate("+myImg.position.x+"px,"+myImg.position.y+"px)"}"

5）直接使用手機(jī)拍照得到的圖片方向有問(wèn)題