用JavaScript修改Canvas图片的分辨率(DPI)-js教程-PHP中文网

首页

web前端

js教程

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

高洛峰

Nov 28, 2016 pm 01:30 PM

应用场景:

仓库每次发货需要打印标签, 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数值

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

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

这里有两种方案,

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

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。