移动端上传图片进行平移放大缩小操作后生成海报

栏目: Html5 · 发布时间: 6年前

内容简介:html:js对图片和相框绑定@touchstart @touchmove @touchend

使用vue+html2canvas+exif-js

github地址

主要功能

  • 上传图片
  • 对图片进行操作:移动、放大、缩小
  • 合成海报

具体功能:

上传图片

html:

<input type="file" value="" accept="image/*" @click="getPhoto" id="image-input">
复制代码

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() { // 获取图像的数据
                Exif.getAllTags(this); // 获取图像的全部数据,值以对象的方式返回
                orientation = Exif.getTag(this, "Orientation"); // 获取图像的拍摄方向
                var rotateCanvas = document.createElement("canvas"),
                rotateCtx = rotateCanvas.getContext("2d");
                 // 针对图像方向进行处理
                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 : // 顺时针 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);
                });
            })
        }) 
    })
}
复制代码

移动图片

对图片和相框绑定@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('请上传图片')
    }
}
复制代码

遇到的问题

  1. 在浏览器上阻止缩放的问题
    在tounchmove时使用event.preventDefault()
  2. 合成图片的清晰度 在html2canvas写参数时,scale = window.devicePixelRatio
  3. 对图片进行缩放时,对距离的判断
    这里需要区分两种情况:
    • 两指缩放
    • 一指移动
      在两指缩放后会有一个手放手另一个手继续操作的情况。这样在touchend时,e.touches还存在一个元素。所以需要在这里做一个判断。
  4. 使用vue的:style="内联样式"时遇上的写法问题
    :style="{transform:'scale('+ myImg.scale+ ') translate('+myImg.position.x+'px,'+myImg.position.y+'px)'}"
    复制代码

以上所述就是小编给大家介绍的《移动端上传图片进行平移放大缩小操作后生成海报》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web API的设计与开发

Web API的设计与开发

[日] 水野贵明 / 盛荣 / 人民邮电出版社 / 2017-6 / 52.00元

本书结合丰富的实例,详细讲解了Web API的设计、开发与运维相关的知识。第1章介绍Web API的概要;第2章详述端点的设计与请求的形式;第3章介绍响应数据的设计;第4章介绍如何充分利用HTTP协议规范;第5章介绍如何开发方便更改设计的Web API;第6章介绍如何开发牢固的Web API。 本书不仅适合在工作中需要设计、开发或修改Web API的技术人员阅读,对想了解技术细节的产品经理、运维人......一起来看看 《Web API的设计与开发》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具