个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已经阅读了关于视网膜显示器 Canvas 模糊问题的多项建议(例如使用 window.devicePixelRatio 方法；here、here 以及 here)，但我无法应用针对我的具体问题的建议解决方案。以下脚本首先使用一些随机图像数据(看起来很模糊)创建一个 Canvas ，然后将图像导出到 SVG 元素并重新缩放它(当然仍然模糊)。我正在使用 2016 年底的 MBP，带有触摸栏和 safari。关于如何避免模糊和实现清晰边缘的任何建议？请记住，初始图像数据应具有固定的宽度和高度。
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<body></body>
<script type="text/javascript">
var width = 100;
var height = 100;
var canvas = d3.select("body").append("canvas");
context = canvas.node().getContext("2d"),
canvas
.attr("width", width)
.attr("height", height)
.style("width", width + "px")
.style("height", height + "px")
//this is the part that should normally take care of blurriness
if (window.devicePixelRatio > 1) {
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
canvas
.attr('width', width * ratio)
.attr('height', height * ratio)
.style('width', width + 'px')
.style('height', height + 'px');
context.scale(ratio, ratio);
}
var imageData = context.createImageData(width, height);
for (var i = 0, l = 0; i<height; ++i) {
for (j = 0; j<width; ++j, l += 4) {
imageData.data[l+0] = Math.round( Math.random() * 255);
imageData.data[l+1] = Math.round( Math.random() * 255);
imageData.data[l+2] = Math.round( Math.random() * 255);
imageData.data[l+3] = Math.round( Math.random() * 255);
}
}
context.putImageData(imageData, 0, 0);
var ImageD = canvas.node().toDataURL("img/png");
var svg = d3.select('body').append('svg').attr('width', width*5).attr('height', height*5);
svg.append("svg:image").datum(ImageD).attr("xlink:href", function(d) {return d})
.attr("height", height*5).attr("width", width*5)
</script>
最佳答案
我终于找到了解决方案。我使用以下组合:window.devicePixelRatio 获取视网膜像素比，屏幕外 Canvas 取自 here ，然后放大取自 here 的上下文
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<body></body>
<script type="text/javascript">
const width = 20;
const height = 20;
const scale = 10; // the higher the number the crisper the custom image
var canvas = d3.select("body").append("canvas");
context = canvas.node().getContext("2d");
const ratio = window.devicePixelRatio || 1;
canvas.attr('width', width * ratio * scale)
.attr('height', height * ratio * scale)
.style('width', width * scale + 'px')
.style('height', height * scale + 'px');
var imageData = context.createImageData(width, height);
for (var i = 0, l = 0; i<height; ++i) {
for (j = 0; j<width; ++j, l += 4) {
imageData.data[l+0] = Math.round( Math.random() * 255);
imageData.data[l+1] = Math.round( Math.random() * 255);
imageData.data[l+2] = Math.round( Math.random() * 255);
imageData.data[l+3] = Math.round( Math.random() * 255);
}
}
const offCtx = canvas.node().cloneNode().getContext('2d'); // create an off screen canvas
offCtx.putImageData(imageData, 0,0);
context.scale(ratio * scale, ratio * scale);
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
context.drawImage(offCtx.canvas, 0,0);
//export image
var ImageD = canvas.node().toDataURL("img/png");
//load image
d3.select('body').append('svg').attr("height", 500).attr("width", 500).append("svg:image").datum(ImageD).attr("xlink:href", function(d) {return d})
.attr("height", 500).attr("width", 500);
</script>
关于javascript - 视网膜显示器 (MPB) 上的 Canvas 图像数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46004568/
25
4
0
IOS8 的 LaunchImage 大小是多少？ 什么是 Retina HD5.5、Retina HD 4.7 和 Retina 4？尺寸？ DPI 是多少？？ 72 我猜？ 苹果文档的链接会很棒，
我不太明白 window.devicePixelRatio 值是什么，以及它如何决定该设备需要什么尺寸的图像(2x、3x 等)。 例如，在 iMac 5K Retina(2015 年末)上，我预计像素
在创建网站/移动应用程序并适应视网膜/高分辨率屏幕(需要两倍大小的图像)时，为什么只包含更大的图像不是一个好主意，并将其大小缩小一半，这样您只有一张图像，在非视网膜图像上，它只会变得更小(图像中的细节
我正在使用以下代码在我的 iPhone 应用程序中设置背景。 [[self view] setBackgroundColor:[UIColor colorWithPatternImage:[UIIma
我有一个应用程序，其中设计师为我提供了两种格式的 Assets 或 png，非视网膜和视网膜，格式正确并用 @2 正确命名。视网膜图像工作正常，但非视网膜图像在它们后面显示出奇怪的白色背景。有人经历过
所以我知道这是一个棘手的问题。我遇到过 Sprite 和高对比度模式的问题，基本上可以用如下代码解决: .icon:before { content: url(icons.png); posi
我的渐变 div 上有一条奇怪的水平线。它只在 Safari 和视网膜显示器上显示，我不明白为什么。还有其他人遇到过这个问题吗？ HTML: CSS: .img-gradient2 { po
我正在为视网膜显示器调整我的网页，我正在使用 IrfanView 来加倍我的图像。但是，通常 640 x 427 px 的图像现在变成了 1281 x 855 px。这会按预期工作吗？我也在使用 Re
我为同一个网站制作了两个不同的网页:一个用于手机设备，一个用于桌面设备。主要原因是因为该网页有很多按钮，如果您使用的是手机，则很难触摸这些按钮，因为它们在手机屏幕上看起来很小。所以我制作了一个 jav
我们知道使用@2x 和不使用它时视网膜上的图像是如何工作的。但是电影呢？ 对于 Retina 显示器，我是否必须让一部电影的分辨率是另一部电影的两倍？命名约定 @2x 代表电影？只拥有更大的一个并使其
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Detect Retina Display 我们如何通过 Objective-C 代码知道设备是否具有视网膜
我刚刚将 Xcode 从 4.2 升级到 4.3.3。然后我启动 iOS 模拟器(将“硬件 -> 设备”设置为“iPhone(视网膜)”)，模拟器现在显得如此之大，以至于应用程序页面实际上需要滚动!
我尝试从视网膜显示屏获取屏幕截图，并在窗口上绘制此图像。 我可以捕获 CGDirectDisplayID displayId = CGMainDisplayID() CGImage imageRef
我有一张 PNG 图片，我应该在我的 iPhone 应用程序中使用它，但首先，我必须为其提供 iPhone 4 视网膜屏幕的尺寸。有谁知道它的尺寸是什么或者如何做到这一点？ 最佳答案 iPhone 4
我想编写一个自定义绘图 View ，它应该利用 Retina 显示屏。我使用的是 2019 款 MacBook Pro。为了测试绘图，我只是绘制宽度为 1px 的平行线。但线条在整个 View 中显示
我已经将一些应用程序迁移到 iPhone5，但我无法解决这个问题。我遵循相同的步骤，但现在我没有 xib 布局来设置窗口的自动调整大小，因为 TabBarViewController 以编程方式定义为
我正在为 iPad 开发 iOS 应用程序，我使用的是普通图像而不是 @2x 图像，所以这可以在新 iPad 上使用吗？或者必须包含@2x 图像？如有任何帮助，请提前致谢。 最佳答案 您可以在视网膜屏
我正在更新我的应用程序以使用 iPad 视网膜显示屏，但出于某种原因，我的一个 View 不想缩放到 2 倍。正如您在屏幕截图中看到的那样，左侧按钮上的文本可以正确缩放，而右侧的文本仍然以低分辨率显示
CSS 在视网膜屏幕上将 1px 文本阴影加倍为 2px。我只需要 1px。任何解决方案？ 0.5px 无效。 最佳答案 我没有尝试过文本阴影，也没有方便的视网膜屏幕，但是对于框阴影 MDN说对于传播
最近几天我阅读了很多关于这个主题的内容，但我没有找到解决方案。我有两个 sprite 集，一个是低质量的正常显示，另一个是高质量的视网膜显示。 我的问题是，我的网站必须响应，图形应根据浏览器窗口调整大
我是一名优秀的程序员,十分优秀！