- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Stackoverflow 上看到过这个问题,但我没有找到答案 - 所有提出的解决方案都不适合我。
问题:当我将 base64 编码的 SVG 作为 src 传递给图像时,它看起来像原始 SVG 图像一样清晰。但如果我将这张图片用于 Canvas (通过 context.drawImage)——它的质量会更差:
问题是 - 如何在 Canvas 中绘制基于 svg 的图像,使其看起来像原始图像?
到目前为止我尝试了什么。描述的方法 here (重新迭代下采样)对我不起作用。其他advise (将尺寸增加 0.5)也没有挽救这种情况。玩imageSmoothingEnabled - 仍然没有运气。
这是 the codepen用于生成此特定屏幕截图:
let toBase64 = (svg) => {
let serialized = new XMLSerializer().serializeToString(svg);
let base64prefix = "data:image/svg+xml;base64,"
let enc = base64prefix + btoa(serialized);
return enc;
}
let copySvg = (svg, img) => {
let enc = toBase64(svg);
img.src = enc;
}
let copyImg = (img, canvas) => {
context = canvas.getContext("2d");
context.drawImage(img, 0, 0, 200.5, 200.5);
}
let main = () => {
let svg = document.getElementById("svg");
let img = document.getElementById("img");
let canvas = document.getElementById("canvas");
copySvg(svg, img);
copyImg(img, canvas);
}
window.onload = main;
最佳答案
SVG 和图像是在高 DPI 下隐式绘制的,但您需要为 Canvas 显式处理这种情况。
如果您的设备有 window.devicePixelRatio === 2
,如果您增加 Canvas 大小并更新 drawImage 以匹配,您将看到更清晰的图像:
<!-- Change this -->
<canvas id="canvas" width="200" height="200"></canvas>
<!-- to -->
<canvas id="canvas" width="400" height="400"></canvas>
和:
// change this:
context.drawImage(img, 0, 0, 200.5, 200.5);
// to:
context.drawImage(img, 0, 0, 400, 400);
有关 window.devicePixelRatio
(和 Canvas 的 backingStorePixelRatio
)的更多详细信息,请参阅 High DPI Canvas 上的 html5rocks 文章
关于javascript - 如何使用 Canvas drawImage 处理质量损失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43656352/
我使用透视滤镜在视频上放了一张图片。 示例 https://yadi.sk/i/MXtWUArJ3TyWBm 我怎样才能提高质量? 代码 ffmpeg -y -i bg.mp4 -loop 1 -i
我是 Matlab 的新手,虽然我知道一些其他的编程语言,所以如果这很简单,请原谅我。我无法在 StackOverflow 或其他地方找到任何答案。 我使用以下代码生成一个图形: figure(6)
我是 Matlab 的新手,虽然我知道一些其他的编程语言,所以如果这很简单,请原谅我。我无法在 StackOverflow 或其他地方找到任何答案。 我使用以下代码生成一个图形: figure(6)
在包含另一个类时,我总是需要写#include "headername.h"。是否可以在不编写其他类或使用“#include”包含多个类的情况下访问其他类? 最佳答案 什么 #include指令的作用
我有一个 .webm我想加速以延时拍摄的视频。我的原创.webm视频是 1280x720 并且质量非常好,但是当我用 FFMPEG 加速它时质量真的很差(即使分辨率保持不变)。这是我正在使用的命令:
我正在使用以下命令生成缩略图: mogrify -resize 128x128 -quality 75 "some thumb file" 对于示例文件: 如果我不指定质量 75,我会得到一个 40K
我想使用流体库的模型。谁能解释一下(我是建模/模拟的新手):质量/能量/动量平衡的公式:稳态、动态和初始猜测初始固定-->之间有什么区别以及对初始化时间/计算的影响是什么时间;我什么时候需要哪一个。
我通过解析“fmt 流映射”得到流 URL, 问题是如果我的视频时长不到 1 小时,我会得到这个: { "comment_count" = 1; description = ""; "dislikes
我试图根据用户的屏幕高度分辨率显示不同的视频分辨率,我有这段代码,但我不是 javascript 专家。它应该改变 src 属性,如果 res 低于 o 等于 360px 高度,等等。有什么建议吗?
我有播放 HLS 视频的 ExoPlayer,问题是我需要让用户能够更改视频质量(自动/1080/720/480)。 我发现使用 AdaptiveTrackSelection.Factory 确实可以
我的应用程序使用 phpmyadmin 连接到 mysql 中的数据库并将图像存储在数据库中,但我的问题是当我从数据库下载图像并将图像发布到 imageview 上时,图像的质量非常低颜色也受到影响。
大家好,我一直在使用 JavaFx 场景构建器来构建一个包含一些 png 图片的图形用户界面。 到目前为止,我一直在使用标签,然后将它们放大以适合图片(以便图片可见。但是这个解决方案并不令人满意,因为
我注意到,在显示比例为 1:1 的小图片时,它们通常看起来呈 block 状。我可以在使用 时解决问题通过使用更大比例的图像并使用 css 设置所需的大小来标记。 但是,我想用 background
我是自定义 CSS 的新手。我的老板希望我在 Qualtrics 中添加自定义 CSS(在外观/高级下)。在编辑预览窗口中,一切似乎都格式正确,但在实际调查页面上,许多元素的格式并未应用:图像是原始大
所以我尝试使用 CreateFont 尝试创建一种类似于我在 Photoshop 中使用的字体,但如果你仔细观察,Photoshop 中的质量要好得多。 这是我用来创建字体的代码: CreateFon
在自动去歪斜和裁剪之后我得到了下面的图像: 我需要对这张图片进行 OCR。现在 ABBYY Engine SDK 11 For Linux 产生的结果不是很好: IMerasers - www,rai
我目前在我的项目中使用 xorshift128+,我知道它通过了 Big Crush,并且被认为可以根据其速度生成相当高质量的随机数。但是,它会生成 64 位数字,而我需要的绝大多数随机数都是小整数(
我使用 python 以较小的质量保存 jpeg im = Image.open(file) im.save(cached_file, quality=80, optimize=True, progr
我在保存或使用 Gmagick PHP 扩展时找不到任何属性。 http://php.net/manual/en/book.gmagick.php 如何在 Gmagick 中更改 JPEG 质量? 最
youtube视频通常具有多种视频分辨率(质量),例如240p,360p,720p等,我如何检索youtube视频具有的视频分辨率(质量)是否有可以获取此信息的youtube api?Google.A
我是一名优秀的程序员,十分优秀!