- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我在将 SVG 渲染到 Canvas 上时遇到问题。在视网膜显示 Canvas 呈现为 base64 url 并设置为 SRC 到是模糊的。
我尝试了以下列表中描述的各种方法,但没有成功:
最佳答案
Retina显示屏
视网膜和超高分辨率显示器的像素尺寸小于人眼的平均分辨率。渲染一条线最终看起来像一条更轻的线。为了解决涉及检测高分辨率显示的页面的问题,会将默认 CSS 像素大小更改为 2。
DOM 知道这一点并调整其渲染以进行补偿。但 Canvas 不知道,它的渲染只是按比例放大。 Canvas 的默认显示渲染类型是双线性插值。这可以平滑从一个像素到下一个像素的过渡,这对于照片来说非常有用,但对于线条、文本、SVG 等来说就不那么好了。
一些解决方案
image-rendering: pixelated;
来完成。虽然这不会创建在 DOM 上呈现的 SVG 的质量,但它会减少一些用户体验的模糊外观。 ctx.imageSmoothingEnabled = false;
devicePixelRatio
返回 CSS 像素的大小与实际屏幕物理像素大小的比较。 Retina 和高分辨率设备的值通常为 2。然后您可以使用它来设置 Canvas 分辨率以匹配物理像素分辨率。devicePixelRatio
,并且devicePixelRatio
受页面缩放设置的影响。devicePixelRatio
并假设很少有人放大 200%。 canvas.style.width
和
canvas.style.height
已经正确设置。
if(devicePixelRatio >= 2){
canvas.width *= 2;
canvas.height *= 2;
}
function setCanvasForRetina(canvas){
canvas.width *= 2;
canvas.height *= 2;
canvas.setTransform(2,0,0,2,0,0);
}
Note I do not increase the pixel size by the value of "devicePixelRatio" This is because retina devices will only have a resolution of 2 times, if the aspect ratio is greater than 2 it is because the client has zoomed in. To honor the expected behaviour of the canvas I do not adjust for zoom setting if I can. Though that is not a rule just a suggestion.
window.screen.width
和
window.screen.height
以确定绝对物理像素分辨率并将其与已知的视网膜显示分辨率相匹配。您还可以查询 userAgent 以确定设备类型和品牌。
rWidth.textContent = screen.width
rHeight.textContent = screen.height
aWidth.textContent = screen.availWidth
aHeight.textContent = screen.availHeight
pWidth.textContent = innerWidth
pHeight.textContent = innerHeight
dWidth.textContent = document.body.clientWidth
dHeight.textContent = document.body.clientHeight
//doWidth.textContent = document.body.offsetWidth
//doHeight.textContent = document.body.offsetHeight
//sWidth.textContent = document.body.scrollWidth
//sHeight.textContent = document.body.scrollHeight
pAspect.textContent = devicePixelRatio
userA.textContent = navigator.userAgent
function isRetina(){
// source https://en.wikipedia.org/wiki/Retina_Display#Models
var knownRetinaResolutions = [[272,340], [312,390], [960,640], [1136,640 ], [1334,750 ], [1920,1080], [2048,1536], [2732,2048], [2304,1440], [2560,1600], [2880,1800], [4096,2304], [5120,2880]];
var knownPhones = [[960,640], [1136,640 ], [1334,750 ], [1920,1080]];
var knownPads = [[2048,1536], [2732,2048]];
var knownBooks = [[2304,1440], [2560,1600], [2880,1800], [4096,2304], [5120,2880]];
var hasRetinaRes = knownRetinaResolutions.some(known => known[0] === screen.width && known[1] === screen.height);
var isACrapple = /(iPhone|iPad|iPod|Mac OS X|MacPPC|MacIntel|Mac_PowerPC|Macintosh)/.test(navigator.userAgent);
var hasPhoneRes = knownPhones.some(known => known[0] === screen.width && known[1] === screen.height);
var isPhone = /iPhone/.test(navigator.userAgent);
var hasPadRes = knownPads.some(known => known[0] === screen.width && known[1] === screen.height);
var isPad = /iPad/.test(navigator.userAgent);
var hasBookRes = knownBooks.some(known => known[0] === screen.width && known[1] === screen.height);
var isBook = /Mac OS X|MacPPC|MacIntel|Mac_PowerPC|Macintosh/.test(navigator.userAgent);
var isAgentMatchingRes = (isBook && hasBookRes && !isPad && !isPhone) ||
(isPad && hasPadRes && !isBook && !isPhone) ||
(isPhone && hasPhoneRes && !isBook && !isPad)
return devicePixelRatio >= 2 &&
isACrapple &&
hasRetinaRes &&
isAgentMatchingRes;
}
guess.textContent = isRetina() ? "Yes" : "No";
div, h1, span {
font-family : arial;
}
span {
font-weight : bold
}
<div class="r-display" id="info">
<h1>System info</h1>
<div>Device resolution :
<span id = "rWidth"></span> by <span id = "rHeight"></span> pixels
</div>
<div>Availabe resolution :
<span id = "aWidth"></span> by <span id = "aHeight"></span> pixels
</div>
<div>Page resolution :
<span id = "pWidth"></span> by <span id = "pHeight"> </span> CSS pixels
</div>
<div>Document client res :
<span id = "dWidth"></span> by <span id = "dHeight"> </span> CSS pixels
</div>
<div>Pixel aspect :
<span id = "pAspect"></span>
</div>
<div>User agent :
<span id="userA"></span>
</div>
<h3>Best guess is retina "<span id = "guess"></span>!"</h3>
</div>
function isRetina() {
// source https://en.wikipedia.org/wiki/Retina_Display#Models
var knownRetinaResolutions = [[272, 340], [312, 390], [960, 640], [1136, 640], [1334, 750], [1920, 1080], [2048, 1536], [2732, 2048], [2304, 1440], [2560, 1600], [2880, 1800], [4096, 2304], [5120, 2880]];
var knownPhones = [[960, 640], [1136, 640], [1334, 750], [1920, 1080]];
var knownPads = [[2048, 1536], [2732, 2048]];
var knownBooks = [[2304, 1440], [2560, 1600], [2880, 1800], [4096, 2304], [5120, 2880]];
var hasRetinaRes = knownRetinaResolutions.some(known => known[0] === screen.width && known[1] === screen.height);
var isACrapple = /(iPhone|iPad|iPod|Mac OS X|MacPPC|MacIntel|Mac_PowerPC|Macintosh)/.test(navigator.userAgent);
var hasPhoneRes = knownPhones.some(known => known[0] === screen.width && known[1] === screen.height);
var isPhone = /iPhone/.test(navigator.userAgent);
var hasPadRes = knownPads.some(known => known[0] === screen.width && known[1] === screen.height);
var isPad = /iPad/.test(navigator.userAgent);
var hasBookRes = knownBooks.some(known => known[0] === screen.width && known[1] === screen.height);
var isBook = /Mac OS X|MacPPC|MacIntel|Mac_PowerPC|Macintosh/.test(navigator.userAgent);
var isAgentMatchingRes = (isBook && hasBookRes && !isPad && !isPhone) ||
(isPad && hasPadRes && !isBook && !isPhone) ||
(isPhone && hasPhoneRes && !isBook && !isPad);
return devicePixelRatio >= 2 && isACrapple && hasRetinaRes && isAgentMatchingRes;
}
function svgToImage(svg){
function svgAsImg() {
var canvas, ctx;
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
var width = this.width;
var height = this.height;
var scale = 1;
if(isRetina()){
width *= 2;
height *= 2;
scale = 2;
}
canvas.width = width;
canvas.height = height;
ctx.setTransform(scale, 0, 0, scale, 0, 0);
ctx.imageSmoothingEnabled = false; // SVG rendering is better with smoothing off
ctx.drawImage(this,0,0);
DOMURL.revokeObjectURL(url);
try{
var image = new Image();
image.src = canvas.toDataURL();
imageContainer.appendChild(image);
image.width = this.width;
image.height = this.height;
}catch(e){ // in case of CORS error fallback to canvas
canvas.style.width = this.width + "px"; // in CSS pixels not physical pixels
canvas.style.height = this.height + "px";
imageContainer.appendChild(canvas); // just use the canvas as it is an image as well
}
};
var url;
var img = new Image();
var DOMURL = window.URL || window.webkitURL || window;
img.src = url = DOMURL.createObjectURL(new Blob([svg], {type: 'image/svg+xml'}));
img.onload = svgAsImg;
}
svgToImage(svgContainer.innerHTML);
<div id="svgContainer"><svg width="31" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 55" fill="#736b9e"><path d="m 40.713968,30.966202 c 0.0028,0.05559 -0.01078,0.114956 -0.044,0.178882 -1.545645,2.974287 -2.853499,5.591663 -4.339695,7.673668 -0.788573,1.104704 -2.095869,2.778673 -2.874223,3.773068 -0.994236,1.02684 -6.879641,7.657944 -6.167884,7.049648 -1.292899,1.235403 -5.717368,5.476022 -5.717368,5.476022 0,0 -4.323294,-3.985179 -5.928388,-5.591297 C 14.037321,47.920078 10.708239,43.994015 9.6976253,42.770306 8.6870114,41.546601 8.5086687,40.900753 6.8441265,38.818752 5.8958518,37.63265 4.1376268,34.24638 3.0745121,32.156026 2.9037625,31.86435 2.7398218,31.568267 2.5826899,31.268005 2.5509386,31.228498 2.5238331,31.18779 2.5044312,31.145084 2.4575955,31.041974 2.4164305,30.951055 2.3805569,30.87146 0.95511134,28.003558 0.15221914,24.771643 0.15221914,21.351725 c 0,-11.829154 9.58943056,-21.41858234 21.41858286,-21.41858234 11.829152,0 21.418583,9.58942834 21.418583,21.41858234 0,3.457576 -0.820406,6.72314 -2.275417,9.614477 z M 21.52596,1.5031489 c -10.866018,0 -19.6746717,8.8086521 -19.6746717,19.6746741 0,10.866016 8.8086537,19.674669 19.6746717,19.674669 10.866018,0 19.674672,-8.808648 19.674672,-19.674669 0,-10.866022 -8.808654,-19.6746741 -19.674672,-19.6746741 z" /><g transform="translate(6.5,6) scale(0.060546875)"><path d="M32 384h272v32H32zM400 384h80v32h-80zM384 447.5c0 17.949-14.327 32.5-32 32.5-17.673 0-32-14.551-32-32.5v-95c0-17.949 14.327-32.5 32-32.5 17.673 0 32 14.551 32 32.5v95z"></path><g><path d="M32 240h80v32H32zM208 240h272v32H208zM192 303.5c0 17.949-14.327 32.5-32 32.5-17.673 0-32-14.551-32-32.5v-95c0-17.949 14.327-32.5 32-32.5 17.673 0 32 14.551 32 32.5v95z"></path></g><g><path d="M32 96h272v32H32zM400 96h80v32h-80zM384 159.5c0 17.949-14.327 32.5-32 32.5-17.673 0-32-14.551-32-32.5v-95c0-17.949 14.327-32.5 32-32.5 17.673 0 32 14.551 32 32.5v95z"></path></g></g></svg>
</div>
<div id="imageContainer"></div>
关于javascript - SVG 渲染成 Canvas ,在视网膜显示器上模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41763580/
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
有两个 SVG 元素( SVG1 和 SVG2 ),其中 SVG1 是一个包含各种元素的大区域,会不时添加、删除和重新定位。另一方面,SVG2 需要用作 图标化表示(小) SVG1 的版本,非常小,但
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。 但是,这种方法似乎不适用
我正在尝试使用 Flutter SVG 依赖项,我将 svg 放入 Assets 中,在 pubspec.yaml 中设置,并在我的小部件中设置,但是,使用黑色容器加载 svg 我已经尝试过更改 sv
为什么这样的演示:http://jsbin.com/ejorus/2/edit,将元素嵌套在另一个元素内? JS
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形 每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
我试图将 play svg 居中放置在 SVG 圆圈的中间,但似乎不知道该怎么做。 垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
是否可以使用一个 SVG 形状作为另一个形状的填充? 最佳答案 您想使用 SVG Pattern .见 this example : 注意
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
我使用 require 的 SVG 没有显示。 在我的终端中,svg Assets 被发出并且路径在我的 html 中正确设置。 但是,SVG 不会显示,而其他格式(如 jpg 或 png)可以显示
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径,我想用公式组合它们:(1*2) + (3*4),即路径 1 和路径 2 应该使用乘法模式混合,类似地路径 3 和路径 4 应该使用混合相
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试,我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成,
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。 问题是什么?为什么
使用联合 js 在 svg 中创建了一个文本区域。但是,我无法在文本区域中输入任何文本。如何使文本区域可编辑? 代码: var graph = new joint.dia.Graph;
您可以不受限制地停止和重复动画,但如果您重新启动一个不确定的动画,它将失去其累积值并从初始值开始。 也许我应该用一个例子来澄清;拿这个动画: 如果我停止此动画,并开始影响同一对象旋转的不同动画(
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中),在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异? 我正在考虑将某种动画从一张图片变成一张完全不同
logo的turtlegraphics的svg路径中是否有等价物? 而不是硬编码的 x 和 y 坐标,这也迫使我在移动更相对的“增量”方法时调整控制点。 我的解决方案应该适用于 FOCS(Firefo
目前正在使用 SVG 元素与一堆 元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题,但没有任何效果。这是一个带有针迹的圆圈的代码:
我是一名优秀的程序员,十分优秀!