html 部分

js 部分

getBase64: function (file, callback) {

var maxWidth = 640

if (file.files && file.files[0]) {

var thisFile = file.files[0]

// if (thisFile.size > 524288) {

//? ? this.showToast("圖片不能超過512k！");

//? return;

// }

var reader = new FileReader()

reader.onload = function (event) {

var imgUrl = event.target.result

var img = new Image()

img.onload = function () {

var canvasId = 'canvasBase64Imgid',

canvas = document.getElementById(canvasId)

if (canvas != null) {

document.body.removeChild(canvas)

}

var canvas = document.createElement('canvas')

canvas.innerHTML = 'New Canvas'

canvas.setAttribute('id', canvasId)

canvas.style.display = 'none'

document.body.appendChild(canvas)

canvas.width = this.width

canvas.height = this.height

var imageWidth = this.width,

imageHeight = this.height

if (this.width > maxWidth) {

imageWidth = maxWidth

imageHeight = this.height * maxWidth / this.width

canvas.width = imageWidth

canvas.height = imageHeight

}

var context = canvas.getContext('2d')

context.clearRect(0, 0, imageWidth, imageHeight)

context.drawImage(this, 0, 0, imageWidth, imageHeight)

var base64 = canvas.toDataURL('image/png', 1)

var imgbase = base64.substr(22)

callback(imgbase)

// this.imgUrl =

}

img.src = imgUrl

}

reader.readAsDataURL(file.files[0])

}

},

uploadChange: function (event) {

if (event.target.files.length > 0) {

this.files = event.target.files[0] // 提交的圖片

this.getBase64(event.target, url => {

document.getElementById("appealimg1").src='data:image/png;base64,' + url

})

}

this.isShowUp = false

}

以上代碼，只能上傳單張照片，如果需要在同一界面上傳多張照片，就要再寫一個函數，用新的函數接收下標值，來判斷當前點擊的是哪一張，在調用uploadChange函數的函數，后面就可以拼接下標值了

總結

以上是生活随笔為你收集整理的html5调用手机摄像头和相册,h5 调用手机摄像头/相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。