javascript - 我有一个大图像,但我需要使用相同的图像,只是大小的一半并保持图像质量

标签 javascript image canvas

我在使用图像进行视网膜显示时遇到问题。我使用drawImage。我有一组大图像(绘制的 Canvas ),我想使用它们,但只需使用它们的一半大小,并使它们变小以提高图像质量。

如何做到这一点?这是一个离屏 Canvas 。

最佳答案

您可以通过将 CSS 大小设置为小于 Canvas 元素大小来对图像进行过采样(提高其分辨率):

更大的 html Canvas 元素:

<canvas id="canvas" width=600 height=300></canvas>

较小的 CSS 样式(导致 2 倍过采样):

#canvas{ width:300px; height:150px; }        

关于javascript - 我有一个大图像,但我需要使用相同的图像,只是大小的一半并保持图像质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27623218/

相关文章:

ios - 如何获得屏幕上显示的图像的准确持续时间计时器?

javascript - 异常 float 参数不是有限 Canvas

canvas - Three.js 和 HTML5 Canvas toDataURL

javascript - CanJS 对象列表自动子类化和重分类

javascript - POST 数据在浏览器和 PHP 之间被 chop

java - Swing ,调整大小然后绘制

javascript - 如何识别所选对象的类型?

javascript - JQuery新手精炼toggleClass?

javascript - 使用JavaScript按顺序淡入淡出div

javascript - canvas.toDataURL() 通过尝试调整 base64 字符串大小来生成黑色图像