我试图以编程方式找出限制:从 35000 开始设置画布大小,逐步减少 100 直到找到有效大小。在每一步中写入右下像素然后读取它。它有效 - 请谨慎行事。
如果将宽度或高度设置为某个较低的值(例如 10-200),则速度是可以接受的:get_max_canvas_size('height', 20)。
但是如果像get_max_canvas_size()这样不带宽度或高度的调用,创建的画布太大以至于读取SINGLE像素颜色很慢,并且在IE中会导致严重的挂起。
如果可以在不读取像素值的情况下以某种方式完成类似的测试,那么速度是可以接受的。
当然,检测最大尺寸的最简单方法是查询最大宽度和高度的某种本机方法。但 Canvas 是“一种生活标准”,所以它可能会在某一天到来。
http://jsfiddle.net/timo2012/tcg6363r/2/(注意!您的浏览器可能会挂起!)
if (!Date.now)
{
Date.now = function now()
{
return new Date().getTime();
};
}
var t0 = Date.now();
//var size = get_max_canvas_size('width', 200);
var size = get_max_canvas_size('height', 20);
//var size = get_max_canvas_size();
var t1 = Date.now();
var c = size.canvas;
delete size.canvas;
$('body').append('time: ' + (t1 - t0) + '<br>max size:' + JSON.stringify(size) + '<br>');
//$('body').append(c);
function get_max_canvas_size(h_or_w, _size)
{
var c = document.createElement('canvas');
if (h_or_w == 'height') h = _size;
else if (h_or_w == 'width') w = _size;
else if (h_or_w && h_or_w !== 'width' && h_or_w !== 'height' || !window.CanvasRenderingContext2D)
return {
width: null,
height: null
};
var w, h;
var size = 35000;
var cnt = 0;
if (h_or_w == 'height') w = size;
else if (h_or_w == 'width') h = size;
else
{
w = size;
h = size;
}
if (!valid(w, h))
for (; size > 10; size -= 100)
{
cnt++;
if (h_or_w == 'height') w = size;
else if (h_or_w == 'width') h = size;
else
{
w = size;
h = size;
}
if (valid(w, h)) break;
}
return {
width: w,
height: h,
iterations: cnt,
canvas: c
};
function valid(w, h)
{
var t0 = Date.now();
var color, p, ctx;
c.width = w;
c.height = h;
if (c && c.getContext)
ctx = c.getContext("2d");
if (ctx)
{
ctx.fillStyle = "#ff0000";
try
{
ctx.fillRect(w - 1, h - 1, 1, 1);
p = ctx.getImageData(w - 1, h - 1, 1, 1).data;
}
catch (err)
{
console.log('err');
}
if (p)
color = p[0] + '' + p[1] + '' + p[2];
}
var t1 = Date.now();
if (color == '25500')
{
console.log(w, h, true, t1 - t0);
return true;
}
console.log(w, h, false, t1 - t0);
return false;
}
}