Shape Detection API是一组浏览器原生接口，包含BarcodeDetector、FaceDetector与TextDetector，能够在客户端直接完成条码、人脸和文本识别。借助jQuery将这类接口封装为可复用插件，可以大幅简化DOM操作与事件绑定，让业务页面以极低成本集成检测能力。下面从能力探测、插件结构以及界面反馈三个方面展开说明。
一、Shape Detection API能力检测与兼容处理
不同浏览器对Shape Detection API的支持差异很大。Chrome系通常支持BarcodeDetector与FaceDetector，而TextDetector仅在部分版本中实验性开放，Safari等浏览器则基本未实现。因此在封装前必须先做特性探测，避免直接实例化导致脚本报错中断页面。
合理的做法是使用typeof判断构造函数是否存在，并用async函数包裹尝试调用，捕获异常后回退到提示状态。jQuery的$.support机制也可以扩展自定义标记，但更轻量的方式是在插件初始化时返回能力对象供调用方决策。如下代码展示了如何安全检测三种检测器：
async function checkShapeDetection() {
const support = { barcode: false, face: false, text: false };
if (typeof BarcodeDetector !== 'undefined') {
try {
const d = new BarcodeDetector();
await d.detect(new Image());
support.barcode = true;
} catch (e) {}
}
if (typeof FaceDetector !== 'undefined') {
try {
const f = new FaceDetector();
await f.detect(new Image());
support.face = true;
} catch (e) {}
}
if (typeof TextDetector !== 'undefined') {
try {
const t = new TextDetector();
await t.detect(new Image());
support.text = true;
} catch (e) {}
}
return support;
}
上述逻辑把异常吞掉仅翻转标记位，保证主流程不崩。实际封装中可把结果挂到$.fn.shapeDetect.defaults.support上，UI层根据标记隐藏不支持的功能按钮。这样既提升健壮性，也符合渐进增强思路。
二、基于jQuery的插件封装设计
将检测逻辑封装成jQuery插件，核心是把目标元素、输入源与回调统一起来。我们定义$(selector).shapeDetect(options)入口，options接受type、source与onResult等参数。插件内部维护一个检测器实例池，按类型懒加载创建，避免重复开销。
为兼顾图片与摄像头两种来源，插件提供fromImage与fromStream方法。图片场景直接把<img>或<canvas>传给detect；视频场景则用requestAnimationFrame循环抽取当前帧。下面给出插件骨架示例，展示如何绑定按钮并触发条码识别：
(function($) {
$.fn.shapeDetect = function(options) {
const opts = $.extend({
type: 'barcode',
source: null,
onResult: function() {}
}, options);
return this.each(function() {
const $el = $(this);
const detectorMap = {
barcode: typeof BarcodeDetector !== 'undefined' ? new BarcodeDetector() : null,
face: typeof FaceDetector !== 'undefined' ? new FaceDetector() : null,
text: typeof TextDetector !== 'undefined' ? new TextDetector() : null
};
async function run() {
const det = detectorMap[opts.type];
if (!det || !opts.source) return;
const res = await det.detect(opts.source);
opts.onResult.call($el, res);
}
$el.on('click', '.start-btn', run);
});
};
})(jQuery);
这种结构让页面只需准备一个容器与触发按钮，所有底层异步与实例管理都被收敛在插件内。若需要人脸框绘制，可在onResult里用绝对定位的<div>覆盖视频，而插件本身不耦合具体样式，方便二次开发。
三、检测结果的可视化UI与交互反馈
检测返回的数据通常是带边界框的数组，例如条码给出boundingBox与rawValue，人脸给出boundingBox与 landmarks。要把这些信息呈现出来，最直观的做法是在源媒体上方叠加一层透明画布或定位元素，按坐标画出矩形与文字。
使用jQuery操作这些叠加层非常方便：可以先empty()旧标记，再append()新的提示块。需要注意视频帧分辨率与显示尺寸可能不同，必须按比例缩放坐标，否则框会偏移。以下代码演示结果渲染函数：
function renderResults($wrap, results, scaleX, scaleY) {
$wrap.find('.mark').remove();
results.forEach(function(r) {
const box = r.boundingBox;
const $mark = $('<div>').addClass('mark')
.css({
left: box.x * scaleX,
top: box.y * scaleY,
width: box.width * scaleX,
height: box.height * scaleY
});
if (r.rawValue) {
$mark.attr('title', r.rawValue);
}
$wrap.append($mark);
});
}
除了图形反馈，文本类结果如条码内容应同步展示到日志区，方便复制。可以借助jQuery的val()或text()写入隐藏域或列表。整体交互应保持非阻塞，长视频检测时用debounce控制频率，既省电也避免DOM抖动。经过这样封装，原本零散的API调用就变成清晰可控的UI组件。
jQueryShape_Detection_APIbarcode_detection修改时间：2026-08-18 19:04:32