什么场景

身份证拍照打印的小程序工具。需要在拍摄完成后只保留身份证的有效区域，实现局部裁剪，最终生成符合 A4 规格的图片。

使用者痛点

• 手动对齐身份证困难，常出现边缘被遮挡或留白。
• 拍完照片后需要自行在本地或电脑上裁剪，流程繁琐。
• 裁剪后的尺寸不符合官方要求，导致上传被拒。
• 不同手机屏幕和相机分辨率差异大，难以统一计算裁剪坐标。

实现思路

1️⃣ 在拍照页面生成一个圆角矩形边框，让使用者把身份证放入框内并填满。2️⃣ 使用者点击拍照后通过公式把屏幕上取景框对应到实际照片中的位置与尺寸。3️⃣ 利用 Canvas 按计算得到的坐标进行裁剪，再将裁剪后的图像绘制到 A4 尺寸的 Canvas 上输出。老实说，

使用者痛点对应的方法

• 定位困难：取景框采用半透明遮罩+圆角矩形。让使用者直观看到“安全区”。老实说，
• 手动裁剪繁琐：全部裁剪逻辑由小程序自动完成。无需二次编辑，
• 尺寸不符：裁剪后直接绘制到 A4 大小 Canvas，确保输出符合标准。
• 不同设备适配：比例，实现跨机型一致效果。

计算依据

以下信息是实现自动裁剪所必须获取的：

• wx.getSystemInfoSync → 屏幕宽高：screenWidth、screenHeight
• #cameraEl.boundingClientRect → 相机预览层宽高：camW、camH、camera.left、camera.top
• #idcardHole.boundingClientRect → 圆角矩形取景框位置与尺寸：x、y、w、h
• wx.getImageInfo → 拍摄得到的图片宽高及方向：photoW、photoH、orientation

A4 与身份证基准尺寸

• A4纸张的观点是，210 mm × 297 mm
• ID 卡标准尺寸：85.6 mm × 53.98 mm

缩放比例计算公式

scale = Math.max;

基于取景框相对于相机预览层的位置，可得实际需要裁剪的坐标：

cropX = * scale;cropY = * scale;cropW = holeW * scale;cropH = holeH * scale;

使用者痛点对应的技术要点

• 精准定位：使用两次 .boundingClientRect 获取真实像素坐标。
• 比例误差防止：采用 max 保证图片在任一维度都能覆盖全屏，从而避免截断。
• DPI 与实际打印一致：最终绘制到 A4 Canvas 时使用真实像素尺寸，保证打印时不会失真。

裁剪完整代码示例

wxml 布局

{{cameraSide === 'front'?'请将身份证正面放入框内' : '请将身份证反面放入框内'}}


取消
●●●●●●●●●&●;
相册

wxs/JS 主要裁剪逻辑

cropImage {
const that = this
return new Promise => {
// 📱 获取设备屏幕信息
const { screenWidth,screenHeight } = wx.getSystemInfoSync
// 📐 获取相机预览层和取景框在页面上的真实位置
const query = wx.createSelectorQuery
query.select.boundingClientRect
query.select.boundingClientRect
query.exec(rects => {
const = rects
if {
return reject)
}
// 📏 提取几何信息
const camW = cameraRect.width
const camH = cameraRect.height
const camLeft = cameraRect.left
const camTop = cameraRect.top
const holeX = holeRect.left
const holeY = holeRect.top
const holeW = holeRect.width
const holeH = holeRect.height
// 🖼️ 获取原始照片信息
wx.getImageInfo({
说到src，imagePath,success {
const { width: photoW,height: photoH,orientation } = imgInfo
// 🔍 根据屏幕与照片大小算出缩放比例
const scaleX = photoW / screenWidth
const scaleY = photoH / screenHeight
const scale = Math.max
// 📍 把取景框映射回原始照片坐标系
let cropX = * scale
let cropY = * scale
let cropW = holeW * scale
let cropH = holeH * scale
// 🛡️ 防止越界
cropX = Math.max
cropY = Math.max
cropW = Math.min
cropH = Math.min
// 🎨 Canvas 绘制并导出裁切结果
const canvasQuery = wx.createSelectorQuery
canvasQuery.select
.fields
.exec(res => {
if return reject)
const canvasNode = res.node
const ctx = canvasNode.getContext
canvasNode.width = photoW // 保持原图分辨率。以免模糊
canvasNode.height = photoH
that.setData({
cropCanvasWidth: photoW,cropCanvasHeight: photoH,})
// 加载图片对象
const img = canvasNode.createImage
img.src = imagePath
img.onload && img.onload
img.onerror && img.onerror => reject))
img.onload && => {
ctx.save
// 如有必要，可在此加入旋转修正代码：
// if { /* rotate logic */ }
ctx.drawImage
ctx.restore
// 从完整画布中截取目标区域 →
绘制至临时文件
wx.canvasToTempFilePath({
说到canvas，canvasNode,x: cropX,y: cropY,width: cropW,height: cropH,destWidth: Math.round),// 转为像素，例如72dpi → ~595px
destHeight: Math.round),success { resolve },fail { reject }
})
})
})
},fail { reject }
})
})
/** 辅助函数：返回当前设备推荐 DPI */
function getDpi {
return wx.getSystemInfoSync.pixelRatio * 96 // 简化模型，可自行调节为72/96/300等常用值
}
})
}

User‑Centric 小技巧提示

• 实时对齐指示线： ❌ 当身份证左侧或右侧贴近边缘时自动变红提醒使用者微调。
• S/N 自动检测： 若识别到身份证编号。可直接弹窗显示 “已成功捕获”，免去二次检查步骤。不过，
• A4 打印预览： 完成裁切后立即展示一张 A4 背景预览图。让使用者确认排版无误再保存。