当前位置: 首页 > Web前端 > HTML

AntD+jsQr做一个简单的前端二维码识别

时间:2023-03-29 12:07:49 HTML

闂鎻忚堪锛氭兂鍦╝ntD鐨勫墠绔仛涓€涓簩缁寸爜璇嗗埆鍔熻兘锛屾椂闂寸揣杩紝鎵€浠ュ仛浜嗕竴涓畝鍗曠殑鐗堟湰銆傚師鏂欙細antD涓婁紶鎺т欢+jsQR鍘熸枡閾炬帴锛歔jsQR]https://github.com/cozmo/jsQR[AntDUpload]https://ant-design.gitee.io/c...鎬濊矾锛氭悶瀹氫笂浼犱簩缁寸爜鍥剧墖锛屼娇鐢╦sQR璇嗗埆琛ュ厖锛歶pload鍙互寰楀埌涓€涓狥ile瀵硅薄锛屼篃灏辨槸鍙互寰楀埌涓€涓猙ase64鍥剧墖锛屽皢base64缁樺埗鍦ㄧ敾甯冧笂锛岀劧鍚庨€氳繃getImageData鑾峰彇jsQR闇€瑕佺殑Uint8ClampedArray鏁版嵁銆傜畝鍗曚唬鐮侊細getBase64=(file)=>{returnnewPromise((resolve,reject)=>{constreader=newFileReader();reader.readAsDataURL(file);reader.onload=()=>resolve(reader.缁撴灉);reader.onerror=error=>reject(error);});}imageAppendCanvas=(datauri)=>{constcanvas=document.createElement("canvas");constctx=canvas.getContext("2d");canvas.width=500;canvas.height=500;//document.body.append(canvas);//濡傛灉浣犳兂鐪嬪埌杩欏紶鍥剧墖constimg=newImage();img.src=datauri;//濡傛灉浣犱笉鎯宠Uint8ClampedArrayRGBA杩斿洖鍏?锛屾渶濂界敤promise鍖呰9瀹凁煒憆eturnnewPromise((resolve)=>{img.onload=()=>{ctx.drawImage(img,0,0,300,300);璁╂暟鎹?ctx.getImageData(0,0,300,300).data;resolve(data);};});};constprops={name:'file',showUploadList:false,customRequest(fileObj){getBase64(fileObj.file).then(rs=>{imageAppendCanvas(rs).then(res=>{constcode=jsQR(res,300,300);if(code){const{data}=code;}})})},};<涓婁紶{...props}>

Recognition
杩涢樁锛氬彲浠ョ粨鍚坵ebRTC瀹炴椂璇嗗埆銆備竴浜涘ぇ浣凡缁忔剰璇嗗埌浜嗐€傚弬鑰冮摼鎺ttps://github.com/dragonir/h...