canvas压缩图片变模糊问题
canvas 画图图片变模糊问题
问题描述
在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了
canvas 画图线条变粗
问题产生原因
该问题在 PC 下面并不会产生,原因是移动端现在基本都是 Retina 屏(高倍屏),当在二倍屏下的时候,会以实际像素的两个像素点来描述一个像素,这个时候 canvas 在屏幕下面就等于占据了双倍的空间,就和图片被放大了两倍一样,所以经过 canvas 编辑的图片会变得模糊
canvas 画线的方式并不是从头开始画的,而是从无限细的一像素的中位线的位置开始画的,然后左边占一半右边占一半的方式来画一像素的线条,这个时候计算机是不会绘制小余 1 像素的,所以这个时候就会自然的向左右延伸,这个时候就会出现两个像素的线条了
解决方案
- 这个问题的解决思路简单来说就是将 canvas 放大为原来的两倍,绘制 canvas 的文字线条也要放大(放大倍数视实际渲染倍数决定),再将它放在一倍的空间下面。
实际渲染倍率 = devicePixelRatio / backingStoreRatio;
devicePixelRatio 设备像素比,代表用几个像素点的宽度来显示一个像素的宽度
backingStorePixelRatio 代表了使用几个像素来存储一个像素的信息,在 ios6 当中这个值为 2,所以这个时候和屏幕像素比率为 1,也就是实际渲染倍率为 1,这个时候不做任何处理也不会出现变模糊的情况
// 设置画布的实际渲染大小,只是简单的对画布进行缩放
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;
// 以实际渲染倍率来放大画布
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
- 使用方法 1 也可以同时解决问题 2,更简单但是治标不治本的方法,只需要根据需求让线条偏移 0.5 像素,纠正 canvas,让计算机不自动多渲染就好了
canvas压缩图片变模糊问题的更多相关文章
- iOS 让图片变模糊
#import <Accelerate/Accelerate.h> 1.初始化图片 UIImageView *iv = [[UIImageView alloc]initWithFrame: ...
- 使用canvas压缩图片 并上传
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用Canvas压缩图片
讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩. 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法 ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- vue上传图片 base64+canvas压缩图片
这是先将图片 base64转码 在拿canvas压缩的
- canvas压缩图片
1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...
- js canvas压缩图片上传
$('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
- canvas 压缩图片的大小
使用 signature_pad canvas 库生成的图片太大.但又没有提供方法来压缩. 当然这是根据你canvas的画布大小决定的,某些原因导致我的画布就得是那么大. 随随便便一个图片转化为bas ...
随机推荐
- The Road to learn React书籍学习笔记(第四章)
高级React组件 本章将重点介绍高级 React 组件的实现.我们将了解什么是高阶组件以及如何实现它们.此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能. 引用 DOM ...
- 初步学习pg_control文件之八
接前文 初步学习pg_control文件之七 继续 看:catalog_version_no 代码如下: static void WriteControlFile(void) { ... /* * ...
- 炒鸡简单的javaScript的call和apply方法
解释一 作者:杨志 链接:https://www.zhihu.com/question/20289071/answer/14644278 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商 ...
- LI 标签中让文章标题左对齐,日期右对齐的方法
希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html ...
- Hibernate-ORM:06.Hibernate中三种状态
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客主要叙述Hibernate中的三种状态:临时状态(瞬时状态),持久状态,游离状态 commit和flu ...
- 关于 SSH Server 的整体设定
# . 关于 SSH Server 的整体设定,包含使用的 port 啦,以及使用的密码演算方式 Port # SSH 预设使用 这个 port,您也可以使用多的 port ! # 亦即重复使用 po ...
- Jmeter和Charles下载文件
有时候我们jmeter做自动化测试是会遇到文件上传和文件下载的接口,这里我将接结合Charles来Jmeter 文件下载进行讲解 一.用Charles抓包分析文件下载接口 1.1.业务中文件下载链接如 ...
- MySQL☞where与like
1.无条件查询语句(查询表中所有数据) select * from 表名 2.查询某些列的数据(指定列) select 列名1,列名2,列名3 from 表名 3.条件查询语句 select 列名1, ...
- Google无法离线安装扩展程序
Google无法离线安装扩展程序 Chrome插件伴侣 按照里面的使用说明使用 网盘地址: 链接: https://pan.baidu.com/s/1eXoLXyPNl2pfoPnArHq2Lg 提取 ...
- 21天学习caffe(一)
ubuntu环境安装caffe1 安装依赖 apt-get install libatlas-base-dev apt-get install python-dev apt-get install l ...