html2canvas 图片中的文字显示模糊 图片模糊 二维码模糊 的原因之一

最新推荐文章于 2025-07-11 16:09:48 发布
原创 最新推荐文章于 2025-07-11 16:09:48 发布 · 5.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html2canvas #模糊 #图片 #文字

本文介绍了一种在H5项目中解决图片模糊的方法，特别是对于二维码等关键图片的显示问题。通过调整图片的展示方式，即直接使用<img>标签而非作为背景图片，有效提升了图片清晰度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有些h5项目有长按保存图片的需求，可以使用 html2canvas 来实现相对应的功能，

但是在项目中发现有的地方模糊不清，比如网页中有一张二维码的图片模糊，无法识别，

后来发现，图片之类的不要当作背景图片，也就是直接放在 <img>  标签中即可,

解决了图片模糊的问题； 

vue2 | vue3 - 解决html2canvas截图后图片模糊看不清问题，vue html2canvas导出保存图片图像很糊不清晰，图片失真如何提高清晰度（清晰度参数配置scale设置了也不行）
高级前端工程师
10-26 1万+
vue2，vue3，uniapp，html2canvas截图模糊，html2canvas截图失真怎么解决，截图清晰度调整，改清晰度配置了还是不行，截图图片有些看不清，截图另存图片模糊问题解决办法，html2canvas生成图片模糊，H5海报利用canvas导出后不太清楚，为什么html2canvas截图有些模糊，图片合成模糊问题解决，Canvas截图模糊解决办法，如何提高质量清晰度上升，截图模糊问题，截图模糊处理方案，html2canvas 生成海报生成图片背景不清晰问题，保存到相册图片不清晰模糊，插入的图
关于html2canvas移动端图片保存模糊的优化方案
qq_37225921的博客
11-17 926
当然解决的方案也是先四处google和百度，结果可想而知，网上90%的方案都是只适用于他自己的那个项目，调用过来没有用，模糊问题依然解决不了。下面我就自己的项目做出如下解决方案 首先分析下自己项目采用了网上的方法后依然模糊的原因是引用的html2canvas版本太旧了（0.4.1的版本），这个版本不支持配置window.devicePixelRatio这个配置，所以我们需要在github上去下载最...
canvas.js html2canvas解决图片模糊版本
04-15
解决html2canvas图片模糊问题，必须使用此版本
html2canvas 图片文字模糊
qq_37324690的博客
11-11 2993
图片模糊可以使用 img 绝对定位代替背景图片 如果必须使用backgroundImage可以先将需要熏染的元素宽高相应的放大2倍 canvas 生成的时候响应的缩小响应的倍数，这样生成的 图片相对不模糊 但是受到背景图片大小的限制 小心使用 里面使用的图片也需要考虑图片跨域问题 ...
掌握HTML2Canvas：从模糊到清晰的图像转换技巧
最新发布
weixin_30591519的博客
07-11 432
HTML2Canvas是一个JavaScript库，它可以在用户的浏览器中将DOM直接渲染为画布（Canvas）。由于其强大的功能，HTML2Canvas被广泛应用于网页截图、数据可视化、导出报表等场景。为了改善HTML2Canvas在渲染特定元素（例如SVG或复杂的CSS样式）时的表现，可以编写自定义渲染函数：使用接口提供的一系列绘图方法自定义元素的渲染过程。针对特定元素类型编写特定的渲染逻辑，例如处理SVG图形或Web字体。代码块示例：// 使用ctx绘制SVG元素。
html2canvas 模糊问题
qq_40031303的博客
05-08 709
javascripthtml2canvas 模糊问题新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 html2...
html2canvas的使用与清晰度优化
z17864151193的博客
05-30 5792
这是html页面代码： <view id="Top4Img" class="posterImage" ref="Top0Img"> <image class="bgImg" src="../../static/invite/images/invite4.jpg" /> <view class="title">今日签</view> <view class="num">{{userInfo
html2canvas案例解决模糊不清及滚动下拉问题（已测试，可直接应用到项目中）
02-08
html2canvas案例解决模糊不清及滚动下来问题（已测试，可直接应用到项目中）
canvas实现二维码和图片合成的示例代码
12-13
在本文中，我们将探讨如何使用JavaScript中的HTML5 Canvas API与`jr-qrcode`库来实现一个功能，即根据URL生成二维码并将其与另一张图片合并为一张新的图像。`jr-qrcode`是一个方便的库，它能够将文本数据转换为Base...
html2canvas在H5里生成的图片不清晰很模糊的终极解决方案
lionne的博客
08-11 1万+
这文章到现在才出现是因为网上的绝大部分教程都能解决大部分遇到图片不清晰同学的问题，所以没必要再开帖。 本来国内技术论坛就充斥着各种重复复制和转载的文章，一搜技术问题出来100条结果，90条都是重复的，极大浪费大家时间，我是不喜欢干这种事情的。 本帖是解决少部分同学按照教程使用了他人方案以后依然很模糊问题的，其实并非那些教程无效，所以大家依然可以按照诸如以下教程的用dpi和scale参数等方法去尝试解决不清晰问题： 教程1：解决html2canvas截图模糊的问题 教程2：html2canvas生成图片模糊
vue 使用html2canvas将DOM转化为图片
weixin_33831673的博客
09-11 694
一、前言 我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。 注意：版本比较多，这里介绍最新版 二、代码 1. 安装 npm install html2canvas --save 现在最新的版本应该是1.0.0，另外还有一个比较经典...
html2canvas手机端模糊问题
08-29 242
待解决。测试对于图片之类的没有影响。但是文字在手机上看起来比较模糊。 转载于:https://www.cnblogs.com/qianduanjingying/p/5817525.html
Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法
Littleree的博客
06-11 212
Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法
【html2canvas】html2canvas生成慢和模糊的问题
tuzi007a的博客
04-25 3271
等加载完dom再生成图片，所以慢，有些用不到的dom，可以通过。来忽略掉，在react中，写作。这样能让图片清晰不少。
html2canvas 、html-to-image 下载图片，scale、dpi处理图像模糊
Ann_52547的博客
07-14 4653
html2canvas 下载图片，scale、dpi处理图像模糊
html2canvas生成图片模糊 不清楚？两种解决方法
热门推荐
希文Gershwin
06-23 4万+
项目需求：需要把当前整个页面的数据生成为一个图片，可以让用户长按图片保存到本地手机 在网上查到生成图片的有一个插件，叫做 html2canvas 可以把你想要转变的元素变为图片，开始很顺利，但是生成后的图片，和实际的页面不符合，图片不清晰，模糊的情况，网上大部分的解决方案是通过把canvas容器扩大，再将和成的图片进行缩放。这一种可以达到效果，就是麻烦，还有一个方法直接就可以解决，推荐大家使用第二种方法 第一种方法：（亲测有效----就是麻烦） // 本地的 html2canvas 版本为 "^0.5.0
html2canvas 模糊问题处理
weixin_44039765的博客
04-24 942
在做canvas插入文本框+截图功能的时候使用 html2canvas， 出现保存的图片模糊的问题。 搜了很多帖子，都有略微差别，有的改了源码也不说 = =， 最后找到可用的，清晰度很高的。保存一下。 下面是例子 let targetDom = document.getElementById('content') let targetWidth = targetDom.offse...
Html2Canvas 常见问题
Eighteen Z
07-28 7478
1. 文字样式丢失且都变成为最小号字体。 解决方案： 需要截图的节点根样式添加font-variant: normal； 2. 文字向下偏移。 解决方案： 指定html2canvas的版本号为1.0.0-alpha.12 3. 不完整，缺失，留白。 出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。 解决方案： 截图之前控制滚动条至顶部。 4. 模糊，不清晰。 出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。 解决方案： 将背景图通过img标签加定位的方式实现。 ...
html canvas 模糊,解决 canvas 在高清屏中绘制模糊的问题
weixin_42362931的博客
06-05 2371
使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图：因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。因此，要做 Retina 屏...
uniapp+vue3开发的小程序能使用扫一扫 扫描相册中的图片的二维码吗？怎么使用
06-22
<think>我们正在开发一个UniApp+Vue3的微信小程序，需要实现扫描相册图片中的二维码功能。之前尝试使用`cameraContext.value.scanCode`方法，但遇到了`cameraContext.value.scanCodeisnotafunction`的错误。这是因为在微信小程序中，`cameraContext`并没有`scanCode`方法，扫码功能应该使用微信的独立API`wx.scanCode`或者UniApp封装的`uni.scanCode`。但是，请注意，`uni.scanCode`默认只能通过相机扫码，不能直接选择相册图片。因此，我们需要另一种方式来实现扫描相册中的二维码。解决方案：1.使用`uni.chooseImage`选择相册中的图片。2.将选择的图片路径传递给微信小程序的`wx.scanCode`API（注意：微信小程序的`wx.scanCode`只能识别相机扫码流，不能识别本地图片，因此我们需要使用另一个API：`wx.getFileSystemManager().readFile`获取图片的base64数据，然后调用微信的另一个API`wx.scanCode`的变种？实际上，微信官方并没有提供直接识别本地图片二维码的API。但是，我们可以使用第三方库，或者使用微信的`wx.chooseImage`配合`wx.compressImage`和`wx.getFileSystemManager().readFile`来读取图片，然后调用微信小程序的`wx.scanCode`？实际上，微信小程序的`wx.scanCode`不支持本地图片路径。因此，我们需要另一种方式。实际上，微信小程序提供了`wx.scanCode`只能通过相机扫码，而识别图片中的二维码，我们可以使用微信小程序的另一个API：`wx.chooseImage`选择图片，然后使用微信小程序的插件或者云开发中的OCR功能？但是，微信小程序本身并没有提供直接识别图片中二维码的API。因此，我们需要使用第三方库。在UniApp中，我们可以使用uni-app的插件市场中的插件，或者自己引入一个二维码识别的JS库。例如，可以使用`jsqr`这个库。但是，这个库是纯JavaScript的，可以在小程序中使用。步骤：1.安装`jsqr`库：在项目根目录执行`npminstalljsqr--save`。2.在需要使用的页面中引入：`importjsqrfrom'jsqr'`。3.使用`uni.chooseImage`选择图片，获取图片的临时路径。4.将图片绘制到canvas上，然后获取图片的像素数据（Uint8ClampedArray），然后使用`jsqr`库进行解码。但是，请注意，微信小程序中不能直接操作DOM，所以我们需要使用小程序的CanvasAPI来获取图片数据。具体步骤：1.使用`uni.chooseImage`选择图片，得到临时路径。2.使用`uni.createCanvasContext`创建一个canvas上下文，将图片绘制到canvas上。3.使用`uni.canvasGetImageData`获取图片数据。4.将获取到的图像数据传递给`jsqr`进行解码。但是，由于微信小程序中获取图片数据是异步的，并且需要用户授权，所以步骤稍多。详细代码示例：1.安装jsqr（如果使用npm）：```bashnpminstalljsqr```2.在页面中引入：```javascriptimportjsqrfrom'jsqr';```3.编写方法：```javascript//选择图片并识别二维码asyncfunctionscanImageQRCode(){try{//1.选择图片const[res]=awaituni.chooseImage({count:1,sourceType:['album'],//从相册选择});if(!res.tempFilePaths.length)return;consttempFilePath=res.tempFilePaths[0];//2.创建canvas上下文constcanvasId='my-canvas';//需要在模板中放置一个canvas，并设置canvas-idconstctx=uni.createCanvasContext(canvasId,this);//3.绘制图片到canvas（需要等待图片绘制完成）awaitnewPromise((resolve,reject)=>{ctx.drawImage(tempFilePath,0,0,300,300);//设置绘制区域，可以根据需要调整ctx.draw(false,()=>{setTimeout(resolve,300);//等待绘制完成，可以适当调整延时});});//4.获取图片数据const[imageData]=awaituni.canvasGetImageData({canvasId,x:0,y:0,width:300,height:300,});//5.使用jsqr解码constcode=jsqr(imageData.data,imageData.width,imageData.height);if(code){console.log('二维码内容:',code.data);uni.showToast({title:'识别成功：'+code.data,icon:'none'});}else{uni.showToast({title:'未识别到二维码',icon:'none'});}}catch(error){console.error('识别失败:',error);uni.showToast({title:'识别失败',icon:'none'});}}```4.在模板中添加一个隐藏的canvas（用于绘制图片，不需要显示）：```html<canvascanvas-id="my-canvas"style="position:absolute;top:-9999px;left:-9999px;width:300px;height:300px;"></canvas>```注意：-由于`uni.canvasGetImageData`在微信小程序中需要用户授权，因此可能需要处理权限问题。-绘制图片的尺寸需要根据实际情况调整，建议设置为二维码实际大小，如果图片太大，可以适当缩小，但要注意清晰度。-如果二维码识别率不高，可以尝试调整图片大小，或者使用更高清的图片。另外，也可以考虑使用其他二维码识别库，比如`qrcode-decoder`，但同样需要类似的处理流程。如果不想使用canvas，也可以尝试使用微信小程序的`FileSystemManager.readFile`读取图片的二进制数据，然后转换为Uint8ClampedArray。但是，微信小程序读取的图片文件是二进制Buffer，而jsqr需要的是RGBA的顺序的Uint8ClampedArray。因此，我们可能需要将图片解码为像素数据，这并不简单。所以使用canvas是相对直接的方法。总结：由于微信小程序的限制，我们无法直接使用`cameraContext`或`scanCode`来识别相册中的二维码，但可以通过选择图片，然后利用canvas获取图片数据，再使用jsqr库来识别二维码。另外，还有一个方案是使用微信小程序的云开发，调用云函数，在云函数中使用第三方库（如node-qrcode）来识别，但这样会增加网络请求和云函数调用，成本较高。因此，推荐使用上述的canvas+jsqr方案。注意事项：1.确保canvas的尺寸和绘制的图片尺寸一致，否则获取的图像数据会变形。2.由于canvas绘制是异步的，需要确保绘制完成后再获取图像数据。3.如果图片过大，可能会导致获取图像数据失败或性能问题，建议将图片绘制在一个固定大小（比如300x300）的canvas上。如果遇到权限问题，需要在`manifest.json`中配置所需权限：```json"mp-weixin":{"appid":"yourappid","permission":{"scope.writePhotosAlbum":{"desc":"需要写入相册权限"},"scope.camera":{"desc":"需要摄像头权限"}},"requiredPrivateInfos":["getFuzzyLocation","chooseImage","canvasGetImageData"]}```同时，在调用`uni.chooseImage`和`uni.canvasGetImageData`时，需要处理用户拒绝授权的情况。参考代码：```javascriptasyncfunctionscanImageQRCode(){//检查权限constcheckResult=awaituni.getSetting({});if(!checkResult.authSetting['scope.writePhotosAlbum']){constauthResult=awaituni.authorize({scope:'scope.writePhotosAlbum'});//如果用户拒绝，需要引导用户打开设置if(!authResult){uni.showModal({title:'提示',content:'需要相册权限',success:(res)=>{if(res.confirm){uni.openSetting();}}});return;}}//后续步骤...}```由于`uni.canvasGetImageData`需要用户授权，所以同样需要检查`scope.writePhotosAlbum`（因为涉及读取相册）和`scope.camera`（因为canvasGetImageData需要摄像头权限？实际上不需要，但是微信小程序中`canvasGetImageData`需要用户授权`scope.writePhotosAlbum`？具体看文档）实际上，在微信小程序中，`canvasGetImageData`不需要额外授权，但选择图片需要。因此，主要需要处理选择图片的授权。以上就是在UniApp+Vue3微信小程序中实现扫描相册图片二维码的解决方案。</think>### UniApp Vue3 微信小程序扫描相册图片二维码解决方案 #### 错误原因分析 `cameraContext.value.scanCode is not a function` 错误是因为： 1. 微信小程序的 `cameraContext` 只支持实时相机扫码[^1]，**不支持识别相册图片** 2. `scanCode` 是独立 API，不属于相机上下文 3. 扫描相册图片需使用不同的技术方案 #### 完整解决方案 ##### 步骤 1：选择相册图片 使用 `uni.chooseImage` 选择相册图片： ```javascript // Vue3 Composition API const scanAlbumQR = async () => { try { const res = await uni.chooseImage({ count: 1, sourceType: ['album'], // 指定从相册选择 sizeType: ['compressed'] // 压缩图片提高识别率 }); if (res.tempFilePaths.length > 0) { const imagePath = res.tempFilePaths[0]; await decodeQRCode(imagePath); } } catch (err) { uni.showToast({ title: '选择图片失败', icon: 'error' }); } } ``` ##### 步骤 2：解码二维码图片 使用微信小程序的 `wx.getFileSystemManager()` 读取图片数据： ```javascript // 安装二维码解码库 npm install qrcode-decoder ``` ```javascript import QrDecoder from 'qrcode-decoder'; const decodeQRCode = async (filePath) => { // 1. 读取图片二进制数据 const fs = wx.getFileSystemManager(); const fileData = fs.readFileSync(filePath, 'base64'); // 2. 创建解码器实例 const qr = new QrDecoder(); // 3. 解码二维码 try { const result = await qr.decodeFromImage(`data:image/jpeg;base64,${fileData}`); if (result.data) { uni.showToast({ title: `识别成功: ${result.data}` }); handleScanResult(result.data); // 处理扫描结果 } else { uni.showToast({ title: '未识别到二维码', icon: 'none' }); } } catch (error) { uni.showToast({ title: '解码失败', icon: 'error' }); } } ``` ##### 步骤 3：处理扫描结果 ```javascript const handleScanResult = (qrData) => { // 示例：处理登录场景 if (qrData.startsWith('LOGIN_TOKEN:')) { const token = qrData.split(':')[1]; uni.request({ url: 'https://api.example.com/login', method: 'POST', data: { token }, success: (res) => { uni.setStorageSync('userInfo', res.data); uni.navigateTo({ url: '/pages/home' }); } }); } } ``` ##### 步骤 4：添加权限配置 在 `manifest.json` 中声明相册权限： ```json "mp-weixin": { "permission": { "scope.writePhotosAlbum": { "desc": "用于读取二维码图片" } } } ``` #### 关键注意事项 1. **图片优化** - 建议压缩图片：`sizeType: ['compressed']` - 推荐图片尺寸：300×300px 到 800×800px - 支持格式：JPG/PNG（WebP 可能不兼容） 2. **错误处理** ```javascript // 增加错误类型判断 if (error.message.includes('decode failed')) { uni.showToast({ title: '图片模糊，请重试', icon: 'none' }); } ``` 3. **真机调试** - 需在微信开发者工具中开启 "ES6 转 ES5" 和 "增强编译" - 必须在真机测试相册访问功能 #### 备选方案：使用微信官方插件 如果解码效果不佳，可使用微信官方 OCR 插件： ```javascript // 引入微信OCR插件 const plugin = requirePlugin('ocr-plugin'); const scanWithPlugin = async (filePath) => { const res = await plugin.detectText({ image: filePath, detectType: 'qr_code' }); console.log('OCR识别结果:', res.text); } ``` #### 示例页面代码 ```html <template> <view class="container"> <button @click="scanAlbumQR">扫描相册二维码</button> <text v-if="result">扫描结果: {{ result }}</text> </view> </template> <script setup> import { ref } from 'vue'; import QrDecoder from 'qrcode-decoder'; const result = ref(''); // 此处插入上述 scanAlbumQR 和 decodeQRCode 方法 </script> ``` #### 常见问题排查 | 问题 | 解决方案 | |------|----------| | `readFileSync permission denied` | 检查 manifest.json 权限配置 | | 识别率低 | 添加图片预处理：裁剪/增强对比度 | | 库体积过大 | 使用微信官方 OCR 插件替代 | | 安卓兼容性问题 | 添加 `file://` 前缀处理路径 | > **技术原理**：相册扫码通过获取图片二进制数据 → 转换为 Base64 格式 → 使用 QR 解码库分析图像像素模式 → 提取二维码信息[^1]。与实时相机扫码使用完全不同的技术路径。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值