0,0 → 1,139 |
// ===================================================================================================================== |
var Pixeled_Display = { |
// ----------------------------------------------------------------------------------------------------------------- |
init: function() |
{ |
try { |
var params = window.arguments[0]; |
var k = params.k; |
|
Pixeled_Display.scaleLabel = document.getElementById("scaleLabel"); |
Pixeled_Display.originCanvas = document.getElementById("originCanvas"); |
Pixeled_Display.scaledCanvas = document.getElementById("scaledCanvas"); |
Pixeled_Display.scaler = document.getElementById("scaler"); |
|
Pixeled_Display.scaler.value = k; |
Pixeled_Display.scaler.addEventListener('change', Pixeled_Display.onScale, false); |
|
Pixeled_Display.showOrigin(params.target); |
Pixeled_Display.onScale(null); |
} |
catch(ex) { |
dump("Pixeled_Display.init: " + ex + "\n"); |
} |
}, |
|
// ----------------------------------------------------------------------------------------------------------------- |
onScale: function(aEvent) |
{ |
try { |
dump(Pixeled_Display.scaler.value + "\n"); |
var k = Pixeled_Display.scaler.value; |
var n = (1 << k); |
|
Pixeled_Display.scaleLabel.value = ("x" + n); |
Pixeled_Display.showScaled(k); |
} |
catch(ex) { |
dump("Pixeled_Display.onScale: " + ex + "\n"); |
} |
}, |
|
// ----------------------------------------------------------------------------------------------------------------- |
showOrigin: function(target) |
{ |
dump("showOrigin p1 " + target + "\n"); |
|
var originWidth; |
var originHeight; |
var isImage = (target instanceof Components.interfaces.nsIImageLoadingContent); |
if(isImage) { |
originWidth = target.naturalWidth; |
originHeight = target.naturalHeight; |
} |
else { |
target = target.ownerDocument.defaultView; |
|
originWidth = target.innerWidth; |
originHeight = target.innerHeight; |
dump("showOrigin p2 " + target + " " + originWidth + " " + originHeight + "\n"); |
} |
|
Pixeled_Display.originCanvas.setAttribute("width", originWidth); |
Pixeled_Display.originCanvas.setAttribute("height", originHeight); |
Pixeled_Display.originCanvas.style.display = "none"; |
Pixeled_Display.originCanvas.style.width = originWidth + "px"; |
Pixeled_Display.originCanvas.style.minWidth = originWidth + "px"; |
Pixeled_Display.originCanvas.style.maxWidth = originWidth + "px"; |
Pixeled_Display.originCanvas.style.height = originHeight + "px"; |
Pixeled_Display.originCanvas.style.minHeight = originHeight + "px"; |
Pixeled_Display.originCanvas.style.maxHeight = originHeight + "px"; |
|
var originContext = Pixeled_Display.originCanvas.getContext("2d"); |
if(isImage) { |
originContext.drawImage(target, 0, 0, originWidth, originHeight); |
} |
else { |
originContext.drawWindow(target, 0, 0, originWidth, originHeight, "rgba(0,0,0,0)"); |
} |
}, |
|
// ----------------------------------------------------------------------------------------------------------------- |
showScaled: function(k) |
{ |
dump("showScaled p1\n"); |
|
var n = (1 << k); |
var originWidth = Pixeled_Display.originCanvas.getAttribute("width"); |
var originHeight = Pixeled_Display.originCanvas.getAttribute("height"); |
var scaledWidth = originWidth * n; |
var scaledHeight = originHeight * n; |
dump("showScaled p2 " + originWidth + " " + originHeight + "\n"); |
|
Pixeled_Display.scaledCanvas.setAttribute("width", scaledWidth); |
Pixeled_Display.scaledCanvas.setAttribute("height", scaledHeight); |
Pixeled_Display.scaledCanvas.style.minWidth = scaledWidth + "px"; |
Pixeled_Display.scaledCanvas.style.maxWidth = scaledWidth + "px"; |
Pixeled_Display.scaledCanvas.style.minHeight = scaledHeight + "px"; |
Pixeled_Display.scaledCanvas.style.maxHeight = scaledHeight + "px"; |
|
var originContext = Pixeled_Display.originCanvas.getContext("2d"); |
var scaledContext = Pixeled_Display.scaledCanvas.getContext("2d"); |
|
var originData = originContext.getImageData(0, 0, originWidth, originHeight); |
var scaledData = scaledContext.createImageData(scaledWidth, scaledHeight); |
dump("onLoad p3 " + originData + " " + scaledData + "\n"); |
|
for(var x = 0; x < originData.width; ++x) { |
for(var y = 0; y < originData.height; ++y) { |
var o = (y * originData.width + x) * 4; |
var r = originData.data[o]; |
var g = originData.data[o+1]; |
var b = originData.data[o+2]; |
var a = originData.data[o+3]; |
|
var sx = x*n; |
var sy = y*n; |
|
for(var dx = 0; dx < n; ++dx) { |
for(var dy = 0; dy < n; ++dy) { |
var so = ((sy+dy) * scaledData.width + (sx+dx)) * 4; |
|
scaledData.data[so] = r; |
scaledData.data[so+1] = g; |
scaledData.data[so+2] = b; |
scaledData.data[so+3] = a; |
} |
} |
} |
} |
|
dump("showScaled p4 " + scaledData.width + " " + scaledData.height + "\n"); |
scaledContext.putImageData(scaledData, 0, 0); |
|
dump("showScaled done\n"); |
}, |
}; |
|
// ===================================================================================================================== |
window.addEventListener('load', Pixeled_Display.init, false); |