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

应用场景:

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

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

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

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

后来使用了下面的方法

用JavaScript直接修改了DPI

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

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

用图片处理程序(我用的是Fireworks)生成两张内容一样的JPG图片, 仅修改其DPI, A图片的DPI是72, B图片的DPI是300

这里为了确认起见, 使用UE对比一下两个文件, 确实只有头部几个字节不一样

用C#读取A/B图片, 分别编码成BASE64, 生成A.txt和B.txt

用UE或其他文本编辑器对比两个文本文件, 找出不一样的部分, 你会发现只有靠近头部的不到10个字符不一样

重复以上实验, 用不同的图片, 会发现最后总是那固定的几个字符不一样, 并且只要DPI一样, 那固定位置的几个字符也是一样的

在浏览器端用canvas.toDataURL生成jpg图片的base64字符, 然后修改字符中刚才固定位置的字符为测试时DPI为300的特征字符

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

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

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

MORE:

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

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

这里有两种方案,

去Google找一个叫做downloadify的Flash组件, 可以保证点击"下载"按钮的时候跳出一个选择保存位置的对话框, 并且默认的文件名可以用js指定

使用HTML5的download属性加在A标签里, 这个方案更简单, 不过Firefox/Chrome会直接保存到默认下载位置, 不会让用户选择, 而右键另存为又会失去默认文件名的作用

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