标签:nload getc files fun new eve htm html5 context
html
<span class="iconfont scan" @click="scan"> <input ref="camera" type="file" @change="toBase64(event)" style="position: absolute;top:50rem" accept="image/*" capture="camera" /> 拍照
</span>
js
scan() { this.$refs.camera.click(); console.log(‘开启拍照功能‘); },
toBase64(evevt) { let file = event.target.files[0]; if (!/image\/\w+/.test(file.type)) { alert(‘请确保文件为图像类型‘); return; } let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(event) { compress(event.target.result); }; let compress = function(res) { let img = new Image(); let maxH = 160; img.onload = function() { let cvs = document.createElement(‘canvas‘); let ctx = cvs.getContext(‘2d‘); if (img.height > maxH) { img.width *= maxH / img.height; img.height = maxH; } cvs.width = img.width; cvs.height = img.height; ctx.clearRect(0, 0, cvs.width, cvs.height); ctx.drawImage(img, 0, 0, img.width, img.height); let dataUrl = cvs.toDataURL(‘image/jpeg‘, 0.6); // 上传 console.log(dataUrl); }; img.src = res; }; },
标签:nload getc files fun new eve htm html5 context
原文地址:https://www.cnblogs.com/ronle/p/12321451.html