V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
DreamCMS
V2EX  ›  问与答

vue 的 js 代码如何改造成正常的 js 代码脱离 vue

  •  
  •   DreamCMS · 2020-03-02 21:50:40 +08:00 · 1325 次点击
    这是一个创建于 1710 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <script>
    import html2canvas from 'html2canvas'
    import Exif from 'exif-js'
    export default {
    data () {
    return {
    curIndex: 0,
    imgArr: [
    require('../assets/imgs/temp1.png'),
    require('../assets/imgs/temp2.png'),
    require('../assets/imgs/temp3.png')
    ],
    imgUrl: '',
    initTouchX: 0,
    initTouchY: 0,
    changeTouchX: 0,
    changeTouchY: 0,
    reviewImgDom: '',
    lastTouchX: 0,
    lastTouchY: 0,
    previewImg: '',
    myImg: {
    position: {
    x: 0,
    y: 0
    },
    scale: 1,
    lastScale: 1
    }
    }
    },
    mounted () {
    this.previewImg = document.querySelector('#preview-img')
    document.addEventListener('touchstart',function (event) {
    if(event.touches.length>1){
    event.preventDefault();
    }
    })
    var lastTouchEnd=0;
    document.addEventListener('touchend',function (event) {
    var now=(new Date()).getTime();
    if(now-lastTouchEnd<=300){
    event.preventDefault();
    }
    lastTouchEnd=now;
    },false)
    },
    methods: {
    getPhoto () {
    var imageInput = document.querySelector('#image-input')
    var that = this
    imageInput.addEventListener('change', function (e) {
    let 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);
    });
    })
    })
    })
    },
    changeIndex (index) {
    this.curIndex = index
    },
    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')
    let 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('请上传图片')
    }

    }
    }
    }
    </script>


    ___________

    譬如这个
    import html2canvas from 'html2canvas'
    import Exif from 'exif-js'

    对应应该是

    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.min.js"></script>

    但这个
    export default {
    data () {
    return {
    curIndex: 0,
    imgArr: [
    require('../assets/imgs/temp1.png'),
    require('../assets/imgs/temp2.png'),
    require('../assets/imgs/temp3.png')
    ],
    imgUrl: '',
    initTouchX: 0,
    initTouchY: 0,
    changeTouchX: 0,
    changeTouchY: 0,
    reviewImgDom: '',
    lastTouchX: 0,
    lastTouchY: 0,
    previewImg: '',
    myImg: {
    position: {
    x: 0,
    y: 0
    },
    scale: 1,
    lastScale: 1
    }
    }
    },
    应该如何改造。我想把 function 单独写

    function getPhoto() {
    var imageInput = document.querySelector('#image-input')
    var that = this
    imageInput.addEventListener('change', function (e) {
    let 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
    譬如这样
    loading
        1
    loading  
       2020-03-02 22:13:08 +08:00 via Android
    为啥要这样干,是不兼容吗?
    DreamCMS
        2
    DreamCMS  
    OP
       2020-03-02 22:21:12 +08:00
    @loading 不喜欢用 vue,但代码 vue 代码,现在就是 return {

    myImg: {
    position: {
    x: 0,
    y: 0
    },
    scale: 1,
    lastScale: 1
    }
    }

    这个东西不知道如何改造,是 var 声明的意思吗
    DOLLOR
        3
    DOLLOR  
       2020-03-02 22:25:34 +08:00   ❤️ 1
    我还以为楼主是想说把 vue 操作改造成 DOM API 操作。
    结果一看,其实是想把 ES Modules 改写成浏览器 script 吧?
    DreamCMS
        4
    DreamCMS  
    OP
       2020-03-02 22:27:43 +08:00
    @DOLLOR 是的,兄弟咋弄呢。看了二小时。头晕~~~
    shintendo
        5
    shintendo  
       2020-03-02 22:39:46 +08:00
    不明白,你脱离 vue 的话这些代码没有意义啊,跟你重新写一遍有什么区别
    rockjike
        6
    rockjike  
       2020-03-02 22:39:51 +08:00 via Android   ❤️ 1
    直接 script 引 vuejs 的 cdn,再 const vm = new Vue({..}),用其他包也用 scrpt 就行了
    gaobing
        7
    gaobing  
       2020-03-02 22:42:24 +08:00 via Android   ❤️ 1
    你直接说你的需求,说不定有人就给你个现成的了,不用改写了。大概看了一下在旋转图片?这有个旋转并压缩图片的纯 js 方法: https://github.com/gaoice/js-utils/blob/master/rotate-compress-img/rotate-compress-img.js
    DreamCMS
        8
    DreamCMS  
    OP
       2020-03-02 23:10:49 +08:00
    @rockjike 我调试老是报错,你能给我一个简单例子吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1010 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 20:35 · PVG 04:35 · LAX 12:35 · JFK 15:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.