应用场景:

仓库每次发货需要打印标签, 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会直接保存到默认下载位置, 不会让用户选择, 而右键另存为又会失去默认文件名的作用

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

用JavaScript修改Canvas图片的分辨率(DPI)的更多相关文章

  1. JavaScript修改Canvas图片

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

  2. HTML5 javascript修改canvas的大小

    方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...

  3. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  4. Javascript实现的图片隐写术

    javascript图片隐写术,感觉可以用它来干点有想法的事情   1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人 ...

  5. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  6. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  7. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  8. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  9. 转《JavaScript中的图片处理与合成》

    引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...

随机推荐

  1. Adding Completion to (interactive)

      Adding Completion to (interactive) Author: Tubo Question: Is there any way to add my own completio ...

  2. css3代码整理—弹性盒子篇

    父级使用弹性盒子: #fu{ display:flex; } 父级中子级的对齐方式: 1.水平对齐方式:两端对齐 #fu { display:flex; justify-content:space-b ...

  3. ubuntu安装Shutter截图工具以及设置系统快捷键

    一.安装截图工具 Shutter 1. 添加安装包软件源 sudo add-apt-repository ppa:shutter/ppa 2. 更新源并安装 shutter sudo apt-get ...

  4. 06 java 基础：java 循环 递归

    1 递归实现 1 + 2 +3 +4 +5 + .... +100 public static int addSum(int num){ if(num == 1) return 1; return n ...

  5. MySQL 中的日期时间类型

    日期时间类型中包含以下几种数据类型: DATE TIME DATETIME TIMESTAMP YEAR 各类型都有具体的取值范围,超出或非法的其他值时,MySQL 会回退到 0.TIMESTAMP ...

  6. oracle创建计划任务

    特别提示: oracle是执行完任务,才按照interval去计算下次执行时间!!! 为精确每个5分钟执行一个任务,必须自己计算时间. 如:trunc_minute(sysdate)+/ create ...

  7. 转：win32下的堆管理系统

    转:https://bbs.pediy.com/thread-224136.htm 准备刷漏洞战争中的堆溢出部分,但是对于堆的了解较少,在这里记录一下关于堆的学习记录,有错误请各位大大拍砖 参考: & ...

  8. SpringMVC框架 之 from标签（转）

    原文地址:http://blog.csdn.net/kutim/article/details/46682547 spring表单标签   <%@taglib uri="http:// ...

  9. JAVAEE学习——hibernate02：实体规则、对象状态、缓存、事务、批量查询和实现客户列表显示

    一.hibernate中的实体规则 实体类创建的注意事项 1.持久化类提供无参数构造 2.成员变量私有,提供共有get/set方法访问.需提供属性 3.持久化类中的属性,应尽量使用包装类型 4.持久化 ...

  10. Unity Shader 之 透明效果

    透明效果 透明效果一般有两种实现方法: 第一种,使用透明度测试(Alpha Test) 第二种,使用透明度混合(Alpha Blending) 透明度测试和透明度混合机制: 透明度测试(Alpha T ...