用JavaScript修改Canvas图片的分辨率(DPI)

最新推荐文章于 2024-03-20 07:13:02 发布
最新推荐文章于 2024-03-20 07:13:02 发布
阅读量2.8k 收藏 2
点赞数
文章标签： javascript java c# ViewUI
原文链接：http://www.cnblogs.com/xiarugu/p/canvas-dpi.html
版权

应用场景:

仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(DPI)是72

这个DPI太低, 导致打印出来的图片会很模糊.

修改DPI的常规做法是把图片上传到服务器用C#修改DPI后再下载到服务端

但是心里觉得很憋屈, 分明已经在客户端生成了图片, 仅仅为了修改一个很小的标记(DPI信息只是JPEG格式的一个头部META)要上传一张很大的图片到服务端折腾一遭.

 

后来使用了下面的方法

用JavaScript直接修改了DPI

这里不贴源码, 仅提供解决思路, 希望需要的朋友自己亲手试一下

既然知道DPI只是JPEG格式的头部信息, 并且是很小的一部分, 而base64属于流编码, 那么canvas.toDataURL()以后的base64字符串中, 这个DPI信息所处的位置应该也是固定的

  1. 用图片处理程序(我用的是Fireworks)生成两张内容一样的JPG图片, 仅修改其DPI, A图片的DPI是72, B图片的DPI是300
    这里为了确认起见, 使用UE对比一下两个文件, 确实只有头部几个字节不一样
  2. 用C#读取A/B图片, 分别编码成BASE64, 生成A.txt和B.txt
  3. 用UE或其他文本编辑器对比两个文本文件, 找出不一样的部分, 你会发现只有靠近头部的不到10个字符不一样
  4. 重复以上实验, 用不同的图片, 会发现最后总是那固定的几个字符不一样, 并且只要DPI一样, 那固定位置的几个字符也是一样的
  5. 在浏览器端用canvas.toDataURL生成jpg图片的base64字符, 然后修改字符中刚才固定位置的字符为测试时DPI为300的特征字符

OK, 现在你已经获得了一个DPI为300的JPG图片了.

 

有兴趣的朋友可以去研究一下BASE64编码, 然后做成一个函数来计算不同DPI所对应的特征字符

至于二进制状态的那几个自己, 用计算器按一下就会发现那就是直接存储的DPI数值

 

MORE:

在公司的项目中, 操作人员每次不同批次的图片会习惯于保存在一个固定的文件夹里, canvas生成的图片另存为的时候默认文件名总是 canvas.jpg

这里如果使用它们所习惯的批次号.jpg作为保存的默认文件名体验会好很多

这里有两种方案,

  1. 去Google找一个叫做downloadify的Flash组件, 可以保证点击"下载"按钮的时候跳出一个选择保存位置的对话框, 并且默认的文件名可以用js指定
  2. 使用HTML5的download属性加在A标签里, 这个方案更简单, 不过Firefox/Chrome会直接保存到默认下载位置, 不会让用户选择, 而右键另存为又会失去默认文件名的作用

两种方案各有利弊吧, 具体看操作人员的使用习惯

 

转载于:https://www.cnblogs.com/xiarugu/p/canvas-dpi.html

weixin_30832983
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用JavaScript+canvas实现图片裁剪
10-24
主要介绍了使用JavaScript+canvas实现图片裁剪的方法,需要的朋友可以参考下
使用JavaScript实现canvas随机验证码
07-02
使用JavaScript实现canvas随机验证码，可以验证是否验证成功
设置canvas分辨率
最新发布
文摘资讯
03-20 79
Window 接口的 devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。当处理标准显示器与 HiDPI 或 Retina 显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像...
javascript结合canvas实现图片旋转效果
10-24
图片的旋转可以说是一种效果，但是逐渐旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
10-18
主要介绍了JavaScript+Canvas实现彩色图片转换成黑白图片的方法,结合实例形式分析了javascript结合HTML5相关函数修改页面图片元素显示效果相关操作技巧,需要的朋友可以参考下
小程序canvas分享图片模糊解决方案
divaid的博客
03-22 4412
分享的图片生成及导出模糊问题解决方案 1.原因： 2.解决： 在小程序中显示的用标签组合； 保存到相册的用canvas绘制后导出，canvas设置在屏幕上方不可见，设置图片大小 ...
小程序canvas转图片，IOS上首次显示空白和生成图片分辨率过低
zuyingan3447的博客
09-05 1124
解决方案：先尝试通过 setTimeout 之类的接口延迟调用 canvasToTempFilePath 的方式来规避，等待官方后续修复。解决方案： wxml中根据图片动态设定canvas的宽高（不宜过大，过大还是会导致问题一），可使用。问题一：调用wx.canvasToTempFilePath 接口，图片过大，iOS端展示空白。先获取图片宽高和手机的屏幕分辨率比例，再动态设置canvas的宽高。将canvas转图片时，iPhone上图片分辨率过低。
2小程序canvas使用，及一些坑，以及自己的一些小总结
weixin_33979203的博客
09-20 481
自己做了一个小程序，主要用于给头像加图标的那种，和qq似的，主要用canvas做的， 第一回用，掉了很多坑，所以今天总结一下自己所做的，如果大家有不理解的地方，欢迎提问；如果帮到大家的话，帮忙点个啥的 canvas可以用来画一些东西，前台生成一些海报什么的，可以保存base64图片 canvas中介绍的各种方法有很多参数，不理解的话请自行到小程序开发文档查看 我合成的方法是，第一步：获取...
微信小程序canvas画布不清晰解决方法
苦夏木禾
12-12 3440
绘制的图片，文字等十分模糊 添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) 完整代码： <!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas&
【小程序】 Canvas绘制模糊，变高清的史诗级理解!
weixin_44899940的博客
03-02 2604
【小程序】 Canvas绘制模糊，变高清的史诗级理解!
前端通过js base64位图片直接修改分辨率(dpi)图片质量无损耗
qq_35443423的博客
12-29 6776
原理：图片base64数据流中有一部分字节是代表图片分辨率的，直接改变部分字节来实现改变图片分辨率，下载后图片分辨率也会改到相应的分辨率，比如正常canvas生成的图片一般为72分辨率的，可进行转换调整分辨率为300 在github中找到一位大佬的代码（对不起大佬，没有找到他的地址了，这里就没有贴地址），进行了简单的封装 //项目中引用 import changedpi from '@/utils/auth/changdpi.js' //直接传 base64图片数据和需要修改的dpi cha.
opencv模块学习
weixin_30284355的博客
05-10 329
一、简介 ''' 分辨率（resolution，港台称之为解析度）就是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。 1、图象分辨率（PPI）...
会动的龙年特效来了
代码讲故事
02-04 1758
会动的龙年特效来了。
canvas保存图片时，谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
热门推荐
朝阳39的博客
04-24 4万+
通过 cnv.toDataURL(“image/png”) 可以将 canvas 画布转换为 base64格式的图片字符串数据。 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAACWCAYAAACvgFEsAAAgAElEQVR4Xux9B3wUZfr/M2VLdje9QOi91wAiEAidQDoqJ9b73Z0/r/7POxWveaeeBfTsep7tVKSoQYUk9CI1AZKQ0DuEAAFCkk2yfXbmnf/neWdmXeLuJkE8v
Delphi 中图象的放大和缩小
weixin_34112208的博客
08-29 350
在Delphi中，可利用类Tcanvas的CopyRect方法实现图象的放大和缩小。其功能是将源画布上的一个指定矩形区域（简称源矩形）内的象素，拷贝到目的画布上的一个指定矩形区域（简称目的矩形）中。亦可称之为象素块复制。　　由CopyMode属性确定拷贝的模式。在直接拷贝模式（cmSrcCopy）下，当源矩形与目的矩形相等时，图象不变；若源矩形大于目的矩形，图象则缩小；而当源矩形小于目的矩形时，图...
canvas生成图片模糊的解决方案
Bright2017的博客
07-29 3814
一般情况，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题。可通过引入 GitHub 中的 hidpi-canvas 有效地解决。 首先去 GitHub 下载 hidpi-canvas.js 文件：传送门； 在项目中引入 hidpi-canvas.js 文件； 调用 getPixelRatio( ) 函数，得到 ratio 值； 在 drawImage( ) 中，将 width 和 height 乘以 ratio； 效果如下，但抱歉，没做对比图！ 在部分 iO
canvas绘图有锯齿毛边问题的解决
weixin_42291811的博客
08-19 4599
canvas绘图有锯齿毛边问题的解决 canvas绘制的一个圆形，用于表现移动端的朝向及视场角，绘制完成后出现了明显的锯齿，移动端看的时候也是非常明显，如下图所示： 本次主要是通过 hidpi-canvas 有效地解决。 原理与实现也都相对简单，其实就是将放大devicePixelRatio 倍canvas的宽高， 再通过适当缩放画布，以此来保持清晰度。具体实现步骤如下： 点击链接下载 hidpi-canvas.js 文件 ； 我使用了ionic，在项目中assets下新建了js文件夹存放下载的hidp
修改html2canvas生成图片的dpi
u014477038的专栏
11-17 1565
修改html2canvas生成图片的dpi
html2canvas转换成图片模糊,html2canvas生成图片模糊
weixin_28930803的博客
05-31 892
第一种方法请查看来源网址第二种方法：(亲测有效，方便)作者在 html2canvas 的源码中添加了两个参数，分别为 scale 和 dpi，scale 是比例，辣么 dpi 是个什么玩意儿，以下是百度百科对 dpi 的定义：DPI 是指每英寸的像素，也就是扫描精度。DPI 越低，扫描的清晰度越低，由于受网络传输速度的影响，web 上使用的图片都是 72dpi，但是冲洗照片不能使用这个参数，必须是...
修改canvas分辨率
08-16
要修改Canvas的分辨率，你可以通过设置Canvas的宽度和高度属性来实现。下面是一个修改Canvas分辨率的示例： ```vue <template> <canvas ref="canvas"></canvas> </template> <script> export default { mounted() { this.resize(); this.draw(); }, methods: { resize() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); const devicePixelRatio = window.devicePixelRatio || 1; // 获取Canvas元素在浏览器中的显示尺寸 const width = canvas.clientWidth; const height = canvas.clientHeight; // 根据设备像素比例调整Canvas的实际尺寸 canvas.width = width * devicePixelRatio; canvas.height = height * devicePixelRatio; // 缩放Canvas绘图上下文，以适应高分辨率屏幕 ctx.scale(devicePixelRatio, devicePixelRatio); }, draw() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); // 在这里进行绘图操作 } } } </script> ``` 在上面的示例中，我们在`mounted`钩子函数中添加了`resize`方法来调整Canvas的分辨率。首先，我们获取Canvas元素在浏览器中的显示尺寸，并根据设备像素比例调整Canvas的实际尺寸。然后，我们使用`scale`方法缩放Canvas绘图上下文，以适应高分辨率屏幕。 接下来，你可以在`draw`方法中进行绘图操作，根据修改后的分辨率进行绘制。注意，在进行绘图操作时，你需要考虑到Canvas的实际尺寸和显示尺寸的差异。 希望这个示例能够帮助你修改Canvas的分辨率。如果你还有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值