canvas绘图
- 对canvas设置宽高，只能通过属性设置。
使用css设置宽高会让canvas变形
let gameCanvas = document.getElementById('gameCanvas')
this.ctxWidth = document.documentElement.clientWidth
this.ctxHeight = document.documentElement.clientHeight
gameCanvas.width = this.ctxWidth
gameCanvas.height = this.ctxHeight
- 开发手机端页面，需要考虑在canvas绘制图片的清晰度问题。可以使用
hidpi-canvas插件。
该插件对于在canvas中绘制各种形状会自动进行高清处理，但是图片需要自己手动乘以设备像素比（devicePixelRatio）
npm地址：https://www.npmjs.com/package/hidpi-canvas
import 'hidpi-canvas/dist/hidpi-canvas.min.js'
data () {
return {
pixelRatio:1 //通过计算获取设备像素比
}
}
mounted(){
this.getPixelRatio()
}
methods: {
getPixelRatio(){
let backingStore = this.ctx.backingStorePixelRatio ||
this.ctx.webkitBackingStorePixelRatio ||
this.ctx.mozBackingStorePixelRatio ||
this.ctx.msBackingStorePixelRatio ||
this.ctx.oBackingStorePixelRatio ||
this.ctx.backingStorePixelRatio || 1
this.pixelRatio = (window.devicePixelRatio || 1) / backingStore
},
drawImg(){
// 绘制矩形框
this.drawDashRect(this.ctx,item.x-1,item.y-1,item.width+2,item.height+2)
// 绘制图片
this.ctx.drawImage(this.clearIcon, (item.x - 12) * this.pixelRatio, (item.y - 12) * this.pixelRatio, 24 * this.pixelRatio, 24 * this.pixelRatio)
}
}
- 对canvas需要进行touch事件处理时，需要禁止页面滚动和一些浏览器默认行为（比如微信的顶部下拉，ios浏览器的橡皮筋效果等）
mounted(){
document.body.addEventListener('touchmove' , (e) => {
e.preventDefault()
})
}
<style scoped lang="scss">
.wrapper{
position: fixed;
right:0;
top:0;
left:0;
bottom:0;
}
</style>
手机端调用相机
通过input type='file'来唤起相机，通过该标签的change事件处理图片
<span><input id="upload" type="file" accept="image/*" capture="camera" @click="clearFile" @change="getCameraFile">与冰淇淋合影</span>
methods: {
clearFile(){ //点击的时候就清空input，防止上传图片不变清空触发不了change事件
let file = document.getElementById('upload')
file.value = ''
},
getCameraFile(){
let fileInput = document.getElementById('upload')
if (fileInput.files && fileInput.files[0]) {
let vue_this = this
// Exif插件用来获取图片的详细信息
Exif.getData(fileInput.files[0], function() {
Exif.getAllTags(this)
let Orientation = Exif.getTag(this, 'Orientation') //Orientation是图片的旋转类型
let reader = new FileReader()
reader.onload = (e) => {
// 此处写后续的相关处理
vue_this.cameraImg.src = e.target.result
vue_this.createPhoto(Orientation)
vue_this.createIce()
}
reader.readAsDataURL(fileInput.files[0])
})
}
}
}
Exif插件处理手机拍照图片的旋转问题
在使用手机竖屏拍照时，把拍的照片直接拿过来用，发现图片经常是旋转的。可以通过Exif插件来处理一下。
npm地址：https://www.npmjs.com/package/exif-js
import Exif from 'exif-js'
methods: {
getCameraFile(){
let fileInput = document.getElementById('upload')
if (fileInput.files && fileInput.files[0]) {
let vue_this = this
// Exif插件用来获取图片的详细信息
Exif.getData(fileInput.files[0], function() {
Exif.getAllTags(this)
let Orientation = Exif.getTag(this, 'Orientation') //Orientation是图片的旋转类型
let reader = new FileReader()
reader.onload = (e) => {
// 此处写后续的相关处理
vue_this.cameraImg.src = e.target.result
vue_this.createPhoto(Orientation)
vue_this.createIce()
}
reader.readAsDataURL(fileInput.files[0])
})
}
},
// 针对不同的旋转角度进行绘图
createPhoto(Orientation){
this.cameraImg.onload = () => {
let canvas = document.getElementById('cameraCanvas')
canvas.width = this.ctxWidth
canvas.height = this.ctxHeight
this.photoCtx = canvas.getContext('2d')
this.photoCtx.save()
if(Orientation && Orientation != 1){
switch(Orientation){
case 6: // 旋转90度
this.photoHeight = parseInt (this.ctxWidth * (this.cameraImg.width / this.cameraImg.height))
canvas.width = this.photoHeight
canvas.height = this.ctxWidth
this.photoCtx.rotate(Math.PI / 2)
// (0,-imgHeight) 从旋转原始图那里获得的起始点
this.photoCtx.drawImage(this.cameraImg, 0, -this.photoHeight, this.ctxWidth, this.photoHeight)
this.photoCtx.restore()
break
case 3: // 旋转180度
this.photoHeight = parseInt (this.ctxWidth * (this.cameraImg.height / this.cameraImg.width))
canvas.height = this.photoHeight
this.photoCtx.rotate(Math.PI)
this.photoCtx.drawImage(this.cameraImg, -this.ctxWidth, -this.photoHeight, this.ctxWidth, this.photoHeight)
this.photoCtx.restore()
break
case 8: // 旋转-90度
this.photoHeight = parseInt (this.ctxWidth * (this.cameraImg.width / this.cameraImg.height))
canvas.width = this.photoHeight
canvas.height = this.ctxWidth
this.photoCtx.rotate(3 * Math.PI / 2)
this.photoCtx.drawImage(this.cameraImg, -this.ctxWidth, 0, this.ctxWidth, this.photoHeight)
this.photoCtx.restore()
break
}
} else{
this.photoHeight = this.ctxHeight
this.photoCtx.drawImage(this.cameraImg, 0, 0, this.ctxWidth*this.pixelRatio, this.ctxHeight*this.pixelRatio)
}
this.photoImg.src = canvas.toDataURL()
}
},
}
上传图片到后台
直接向后台传base64格式的图片会因为图片太大等原因而报错，可以通过传附件的形式向后台传输。
methods：{
save(){
if (this.isSaved) {
Toast('请扫描二维码保存图片！')
return
}
// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
let imgdata=this.finalImg.split(',')[1]
imgdata = window.atob(imgdata)
let ia = new Uint8Array(imgdata.length)
for (var i = 0; i < imgdata.length; i++) {
ia[i] = imgdata.charCodeAt(i)
}
// canvas.toDataURL 返回的默认格式就是 image/png
let blob = new Blob([ia], {type:"image/jpeg"})
let fd = new FormData()
fd.append('file',blob)
this.$http.post('/api/hgds/image/uploadFile', fd, { headers: { 'Content-Type':'multipart/form-data' } }).then((data) => {
//this.$http.post('/apis/hgds/image/uploadFile', fd, { headers: { 'Content-Type':'multipart/form-data' } }).then((data) => {
this.ewmVisible = true
this.ewmImg = data.qrcodeImgUrl
this.isSaved = true
})
}
}
