視網膜顯示（MPB）上的畫布圖像數據

我已閱讀了關於視網膜顯示器上畫布模糊問題的多個建議（例如，使用window.devicePixelRatio方法; here,here和here），但我還沒有將建議的解決方案應用於我的特定問題。下面的腳本首先創建一個包含一些隨機圖像數據（顯示模糊）的畫布，然後將圖像導出到SVG元素並重新調整它（當然仍然是模糊的）。 2016年末，我使用觸摸屏和Safari瀏覽器使用MBP。有關如何避免模糊並實現清晰邊緣的任何建議？請記住，初始imageData應該有固定的寬度和高度。視網膜顯示（MPB）上的畫布圖像數據

<!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>

來源

2017-09-01 spyrostheodoridis

採取的背景下，爲什麼你沒有能夠應用針對您的具體問題提出解決方案 –

好吧，上面的腳本實現這些解決方案並沒有成功 – spyrostheodoridis

視網膜有CSS像素設置爲2個物理像素。畫布分辨率設置爲CSS像素。要修復，請將畫布分辨率設置爲畫布大小的2倍。通過'const bounds = element.getBoundingClientRect（）;獲取大小;'然後將畫布大小設置爲'canvas.width = bounds.width * 2'和'canvas.height = bounds.height * 2' – Blindman67

我終於找到了解決辦法。我用下面的組合：window.devicePixelRatio用於獲取視網膜像素比例，關屏從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>

來源

2017-09-02 11:34:27 spyrostheodoridis

圖像數據不是情境感知的。

如果您使用上下文進行渲染，但您正在將像素直接寫入圖像緩衝區，則您的代碼可能會有效。這不受二維上下文轉換的影響，因此您的代碼不會放大。

在你的代碼能擴展畫布渲染並不適用於圖象 - 行

context.scale(ratio, ratio);

。

簡單的解決

一個簡單的修復，如果你知道該設備是視網膜。它使畫布分辨率加倍，然後設置隨機像素。爲了保持您的原始代碼，我將2 x 2像素設置爲相同的隨機值。模糊將消失，但隨機模式保持不變。

const width = 100; 
const height = 100; 
const w = width; // because I hate cluttered code 
const h = height; 

const canvas = document.createElement("canvas"); 
document.body.appendChild(canvas); 
const ctx = canvas.getContext("2d"); 

canvas.width = w * 2; 
canvas.height = h * 2; 
canvas.style.width = w + "px"; 
canvas.style.height = h + "px"; 

const imageData = ctx.createImageData(w * 2, h * 2); 
// get 32bit view of data 
const b32 = new Uint32Array(imageData.data.buffer); 
// this is the part that you need to change as the canvas resolution is double 

for (let i = 0, l = 0; i< h; i ++) { 
    for (let j = 0; j < w; j ++) { 
     const idx = i * w* 2 + j * 2; 
     b32[idx + w + 1] = b32[idx + w] = b32[idx + 1] = b32[idx] = (Math.random() * 0xFFFFFFFF) | 0; 
    } 
} 

ctx.putImageData(imageData, 0, 0); 
const ImageD = canvas.toDataURL("img/png"); 

const 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)

來源

2017-09-01 18:27:04 Blindman67

上面的腳本仍然會產生模糊的圖像。而且它改變了圖像尺寸的比例。 – spyrostheodoridis

@spyrostheodoridis抱歉，我的壞應該有'ctx.createImageData（w，h）; 'as'ctx.createImageData（w * 2，h * 2）;'雖然這並不能解釋方面。至於VGA，您將圖像添加爲5 *寬度和5 *高度，如果您的物理像素分辨率不匹配，它總是會模糊不清 – Blindman67

視網膜顯示（MPB）上的畫布圖像數據

回答

圖像數據不是情境感知的。

簡單的解決

相關問題