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 ...
随机推荐
- P1215 [USACO1.4]母亲的牛奶 Mother's Milk
P1215 [USACO1.4]母亲的牛奶 Mother's Milk 题目描述 农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数, 最初,A和B桶都是空的,而C桶是装满 ...
- 获取已安装app的bundle id
备注:以下是私有api 苹果审核会被拒绝. 导入头文件 #import <objc/runtime.h> /// 获取其他APP信息(iOS11无效) + (NSArray *)getOt ...
- Borland和Micorsoft的对话(转载自月光软件网)
Borland与Microsoft关于Delphi的对话 Bear 1.Delphi较贵 一套Delphi的价格大约相当于两套Visual Studio ------------------- ...
- 在Linux下通过rpm打包发布Java程序
这个东西涉及的内容较多,根据下面这些文章慢慢学习 一个简单的例子 http://blog.csdn.net/king_on/article/details/7169384 按照文章中的步骤来,打包之后 ...
- 用node是踩过的一些坑
1.http.request抓取数据时,response的“data”回调事件返回的数据不完整 问题原因:因为“data"事件返回是chunk,就是说是一块块连续的数据 解决的办法:在”da ...
- Python——数据类型之dict
字典,相当于一个列表,不过列表的索引是数字,字典的索引是数字或者字符串. 1.字典的访问 字典是典型的key-value结构,一个key对应着一个value,key就是索引,value就是要保存的值 ...
- Module安装
利用pip3 install numpy,代表安装了数学模块 pip3 install -U numpy,代表升级数学模块 有的时候需要升级pip本身,如上所示,直接执行pip3 install -U ...
- CentOS 6.5 下安装redis
1.登录虚拟机后,直接输入命令:yum -y install redis 会出现一个错误: 是因为少了epel源, 2.运行:yum -y install epel-release 最后出现 Comp ...
- JAVA第八周课堂笔记
- 在C/C++程序中打印当前函数调用栈
前几天帮同事跟踪的一个程序莫名退出,没有core dump(当然ulimit是打开的)的问题.我们知道,正常情况下,如果程序因为某种异常条件退出的话,应该会产生core dump,而如果程序正常退出的 ...