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 ...
随机推荐
- HASH算法小结
一.简述 HASH算法的本质是特征提取——将某种不太好表示的特征,通过某种压缩的方式映射成一个值.这样,就可以优雅解决一部分难以解决的特征统计问题. 同时考虑到hash算法的本质是个概率算法,因此并不 ...
- Python入门及容易!网摘分享给大家!
Python:Python学习总结 背景 PHP的$和->让人输入的手疼(PHP确实非常简洁和强大,适合WEB编程),Ruby的#.@.@@也好不到哪里(OO人员最该学习的一门语言). Pyth ...
- 如何将h5网页改成微信网页
1.如何将h5网页改成微信网页 1.设置安全域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对 ...
- Spring 框架控制器类方法可用的参数与返回类型
参数类型 Spring 有内建的 HTTP 消息转换器用于部分简单类型之间的转换 标准 Servlet 类型:HttpServletRequest, HttpServletResponse, Http ...
- PHP.37-TP框架商城应用实例-后台13-商品管理-扩展分类的添加、显示【数据分组】、搜索分类【多对多】
商品扩展分类 需求:一件商品能有多个扩展分类,搜索任何一个分类都能搜出该商品 建表[扩展分类表] drop table if exists p39_goods_cat; create table p3 ...
- Hibernate-ORM:09.Hibernate中的getCurrentSession()
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客将讲述,以优雅的方式创建session对象,我将会说明优点,并提炼成工具类 优点: 1.无需手动关闭s ...
- 常用模块(xml)
XML(可扩展性标记语言)是一种非常常用的文件类型,主要用于存储和传输数据.在编程中,对XML的操作也非常常见. 本文根据python库文档中的xml.etree.ElementTree类来进行介绍X ...
- Python 3 学习笔记之——标准库概述
1. 操作系统接口 os 模块提供了一些与操作系统相关联的函数. >>> os.getcwd() # 获取当前工作目录 '/home/senius' >>> os. ...
- HDU 4010 Query on The Trees(动态树LCT)
Problem Description We have met so many problems on the tree, so today we will have a query problem ...
- [译]如何根据条件从pandas DataFrame中删除不需要的行?
问题来源:https://stackoverflow.com/questions/13851535/how-to-delete-rows-from-a-pandas-dataframe-based-o ...