pc端实现扫描二维码

npm install jsqr

pc端实现扫描二维码

   import jsQR from "jsqr";saomaFn() {this.$refs.uploadQR.click();},changeFile(e) {var that = this;that.result = "请上传二维码";console.log(e.target.files[0].name, "erweima");//文件读取var fileReader = new FileReader();//文件读取成功事件【onload 】fileReader.onload = function(event) {var data = event.target.result;  //图片被处理成base64格式var img = document.getElementById("myimg");img.src = data;img.onload = function() {var mycanvas = document.getElementById("mycanvas");var ctx = mycanvas.getContext("2d");// canvas 的width/height重新设置的时候会清空画布mycanvas.width = img.width;mycanvas.height = img.height;//绘制图片ctx.drawImage(图片对象, x位置, y位置)【canvas的左上角位置为(0, 0)】ctx.drawImage(img, 0, 0);var imageData = ctx.getImageData(0, 0, img.width, img.height);console.log(imageData);const code = jsQR(imageData.data, imageData.width, imageData.height, {inversionAttempts: "dontInvert",});if (code) {console.log(code.data);that.form.dimensionalCode = code.data;console.log(that.form.dimensionalCode, "that.form.dimensionalCode");} else {that.$message.error("请上传二维码图片");console.log("识别错误");}};};fileReader.readAsDataURL(e.target.files[0]); },

readAsDataURL 方法会读取指定的 Blob或 File对象，同时result属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据context.getImageData(x,y,width,height);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！