html canvas缩放抗锯齿,Html5 canvas drawImage:如何应用抗锯齿
原因
一些图像只是很难下采样和内插,如这个有曲线,当你想从一个大的大小。
浏览器通常使用canvas元素的双线性(2×2采样)内插,而不是bi-cubic(4×4采样)的(可能)性能原因。
如果步长太大,那么简单地没有足够的像素来从其中反映在结果中。
从信号/ DSP的角度来看,你可以看到这是一个低通滤波器的阈值设置得太高,如果信号中有很多高频(细节),可能会导致混叠。
解
解决方案是使用降压以获得正确的结果。降低意味着您逐步减小大小,以允许有限的插值范围覆盖足够的像素进行采样。
这将允许良好的结果,也与双线性插值(它的行为非常像双立方体,当这样做)和开销是最小的,因为在每个步骤中有更少的像素采样。
理想的步骤是在每个步骤中达到一半的分辨率,直到设置目标大小(感谢Joe Mabel提及这个!)。
使用原始问题中的直接缩放:
使用降压如下图所示:
在这种情况下,您需要分三步:
在步骤1中,我们通过使用离屏画布将图像缩小为一半:
/// step 1 - create off-screen canvas
var oc = document.createElement('canvas'),octx = oc.getContext('2d');
oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img,oc.width,oc.height);
步骤2重新使用离屏画布,并将图像再次缩小到一半:
/// step 2
octx.drawImage(oc,oc.width * 0.5,oc.height * 0.5);
我们再次画到主画布,再次减少到一半,但到最终尺寸:
/// step 3
ctx.drawImage(oc,oc.height * 0.5,canvas.width,canvas.height);
小费:
您可以使用此公式计算所需的步骤总数(包括设置目标尺寸的最后一步):
steps = Math.ceil(Math.log(sourceWidth / targetWidth) / Math.log(2))
html canvas缩放抗锯齿,Html5 canvas drawImage:如何应用抗锯齿相关推荐
- 在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
- html5 canvas 取消锯齿,HTML5 Canvas 如何取消反锯齿绘图
一.问题的提出 我们都知道反锯齿(anti-aliasing)绘图给我们带来更好的视觉体验,有了这个技术,绘制的图形的边缘再不是以前毛毛躁躁的样子了.这就是采用反锯齿算法的功劳.其实质就是把要绘制的颜 ...
- html5 canvas详解 pdf,html5 canvas教程 pdf
html5 canvas教程 pdf [2021-02-18 05:30:56] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
- html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图 太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
- HTML将canvas画布鼠标事件,HTML5 Canvas鼠标与键盘事件demo示例
演示html5 canvas鼠标事件,获取canvas对象上的鼠标坐标,演示键盘事件通过键盘控制canvas上对象移动. canvas对象支持所有的javascript的鼠标事件,包括鼠标点击(mou ...
- html5 canvas画文本框,HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法. (1)绘制文本方法:fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的 ...
- html5 canvas 显示文字居中,html5 canvas 文字居中对齐
> web前端 > HTML 5 > 正文 html5 canvas 文字居中对齐 2013-07-09 我要投稿 [color=eight:25px]html部门 [color=e ...
- html5 canvas爆炸,TweenMax.js HTML5/Canvas 爆炸动效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById('canvas'), ctx = ...
- java canvas旋转_在HTML5 Canvas上将图像旋转90度
我无法使用HTML5画布旋转图像 . 我想我的数学错误,并希望得到任何帮助 . 在移动设备上,我在150px x 558px画布上捕获用户签名 . 我试图创建一个558像素×150像素的图像,这只是旋 ...
- html 5 canvas flash,为什么使用HTML5 Canvas创建内容比使用Flash创作要复杂得多?
好问题.我一直在使用< canvas>几年,我也是一名前Flash开发人员. 我不认为你错过了什么.嗯,< canvas>,你知道,它必须看起来比Flash更复杂:). Fla ...
最新文章
- Codeforces Round 550 (Div.3) 题解
- EL:谁说N素含量高就不固氮了(本研究反而“多多益善”)
- linux下装windows驱动,linux下安装windows xp无线网卡驱动
- 深入掌握JMS--转
- 今天学习jquery 希望开个好头
- 【Ranger】mac下Apache Ranger编译安装
- ChatOps如何变革企业业务
- Unity Lighting - Choosing a Color Space 选择色彩空间(四)
- 黑客X档案PDF完整版(06年1月-12年12月)
- 微信登录界面安卓代码_安卓Activity劫持与反劫持
- Python编程工具:Jupyter notebook
- 品牌设计分析思维导图模板分享
- linux海报制作软件,用 OpenOffice.org 3.2 Draw 制作海报
- 计算机无法识别建行网银盾,为你修复建行网银盾无法识别
【应对方案】
的详细方案_...
- 零极点和系统稳定性关系
- [人生感悟]在平凡中蜕变,我的2014
- 用python制作音乐_Python3使用PySynth制作音乐的方法
- iOS 人机交互设计(开发)指南及一些综合知识整合
- 输入半径计算圆的周长和面积
- java.lang.NoSuchMethodException: com.gql.pojo.User.init() 解决方案