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

[DreamCMS]

<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]

为啥要这样干，是不兼容吗？

[DreamCMS]

@loading 不喜欢用 vue，但代码 vue 代码，现在就是 return {

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

这个东西不知道如何改造，是 var 声明的意思吗

[DOLLOR]

我还以为楼主是想说把 vue 操作改造成 DOM API 操作。
结果一看，其实是想把 ES Modules 改写成浏览器 script 吧？

[DreamCMS]

@DOLLOR 是的，兄弟咋弄呢。看了二小时。头晕～～～

[shintendo]

不明白，你脱离 vue 的话这些代码没有意义啊，跟你重新写一遍有什么区别

[rockjike]

直接 script 引 vuejs 的 cdn，再 const vm = new Vue({..}),用其他包也用 scrpt 就行了

[gaobing]

你直接说你的需求，说不定有人就给你个现成的了，不用改写了。大概看了一下在旋转图片？这有个旋转并压缩图片的纯 js 方法： https://github.com/gaoice/js-utils/blob/master/rotate-compress-img/rotate-compress-img.js

[DreamCMS]

@rockjike 我调试老是报错，你能给我一个简单例子吗