如何使用画布drawImage处理质量损失？
如何使用画布drawImage处理质量损失？
提问于 2017-04-27 03:21:05
我在Stackoverflow上看到了这个问题，但是我没有找到答案--所有提出的解决方案对我来说都是行不通的。
问题:当我将base64 64编码的SVG作为src传递给映像时，它看起来和原始的SVG图像一样清晰。但如果我把这张照片用在画布上(通过context.drawImage)，它的质量会更糟糕：
问题是-如何在画布中绘制基于svg的图像，这将看起来像原始图像？
到目前为止我尝试过什么。所描述的这里 (重迭代下采样)方法对我不起作用。另一个建议 (向维度添加0.5 )也没有保存这种情况。玩imageSmoothingEnabled -仍然没有运气。
下面是用于生成这个特定屏幕快照的编码者：
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;回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-27 03:52:11
SVG和Image是在高DPI中隐式绘制的，但是您需要显式地处理画布的这种情况。
如果您的设备有window.devicePixelRatio === 2，如果增加画布大小并更新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 (和画布的backingStorePixelRatio)的详细信息，请参阅html5rocks关于新闻部高画布的文章
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43656352
复制相关文章
相似问题
以编程方式启动Scala REPL？
使用Ruby REPL以编程方式加载库
以编程方式发送键盘中断
以编程方式中断raw_input
以编程方式中断权限级别继承
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
