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
- 開發(fā)手機端頁面，需要考慮在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>
手機端調(diào)用相機
通過input type='file'來喚起相機银舱，通過該標簽的change事件處理圖片
<span><input id="upload" type="file" accept="image/*" capture="camera" @click="clearFile" @change="getCameraFile">與冰淇淋合影</span>
methods: {
clearFile(){ //點擊的時候就清空input瘪匿，防止上傳圖片不變清空觸發(fā)不了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) => {
// 此處寫后續(xù)的相關處理
vue_this.cameraImg.src = e.target.result
vue_this.createPhoto(Orientation)
vue_this.createIce()
}
reader.readAsDataURL(fileInput.files[0])
})
}
}
}
Exif插件處理手機拍照圖片的旋轉問題
在使用手機豎屏拍照時，把拍的照片直接拿過來用寻馏，發(fā)現(xiàn)圖片經(jīng)常是旋轉的棋弥。可以通過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) => {
// 此處寫后續(xù)的相關處理
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
})
}
}
