使用和持久化枚举的最佳做法(Best practices for using and persisting enums)

 第一： 
 硬限制取决于浏览器，而不是画布API。 
 即便如此，浏览器总是试图提高性能，所以这个数字总是在变化。 
 但使用WebGL和Canvas制作游戏时，纹理地图集/精灵地图集是HUGE .jpg / .png文件。 
 机会非常非常好，您的图像更小，我经常在画布上使用4MB / 5MB / 16MB图像进行演示。 
 一个巨大的图像（或几十个）可能会使标签崩溃，如果足够大，但直到那个时候，画布并没有真正向我抱怨。 
 
 第二： 
 有安全限制。 
 在canvas编辑照片取决于您使用的浏览器，以及该文件是否与您的网站位于同一个域中。 
 
 第三： 
 当你说“大文件不起作用，但他们有时......” 
 ...这让我相信你的图像加载方法是错误的。 
 
 如果你做这样的事情： 
 
var canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    img = new Image();

img.src = "//mydomain.com/myimg.png";
context.drawImage(img, 0, 0, img.width, img.height);
 
 ...或其他任何不是基于事件或基于回调的， 
 那么你的问题与canvas没有任何关系，并且与回调有关，并且你正试图在图像加载之前将图像绘制到canvas上。 
 
 如果您的浏览器已经缓存了大图片的副本，或者小图片只需要几分之一秒的时间下载，那么没有任何问题。 
 
 如果您尝试下载18MB图像，并在为图像设置url后立即将其绘制到画布上，那么您将会看到空白屏幕，因为它尚未完成加载。 
 
 相反，您需要等待图像完成加载， 然后在准备就绪时将其绘制到画布上。 
 
var canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    image = new Image();

image.onload = function () {
    var img = this,
        width = img.width,
        height = img.height;

    canvas.width = width;
    canvas.height = height;
    context.drawImage(img, 0, 0, width, height);

    document.body.appendChild(canvas);
};

image.src = "//mydomain.com/path-to-really-huge-image.png";
 
 现在它可能是一张1600万像素的图像。 在文件加载完成之前什么都不会发生。 
 然后， onload事件触发，并执行其余的设置。 
 
 你可以把它变得更抽象，并把它变成一个漂亮的程序，但感觉这是你可能错过的关键。 

First:
 Hard limitations would depend on the browser, not the canvas API.
 Even then, browsers are always trying to improve that performance, so that number would always be changing.
 But with WebGL and Canvas being used to make games, texture atlases / sprite atlases are HUGE .jpg/.png files.
 Chances are very, very good that your images are smaller, and I've frequently used 4MB/5MB/16MB images in canvas for demonstrations.
 A huge image (or dozens of them) might crash the tab, if it's big enough, but until that time, canvas hasn't really complained to me.
 
Second:
 There are security-limitations.
 Editing photos in canvas comes down to what browser you're on, and whether the file is on the same domain as your website or not.
 
Third:
 When you say that "large files don't work, but they do sometimes..."
 ...that leads me to believe that your image-loading method is faulty.
 
If you do something like this:
 
var canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    img = new Image();

img.src = "//mydomain.com/myimg.png";
context.drawImage(img, 0, 0, img.width, img.height);
 
...or anything else which isn't either event-based or callback-based,
 then your problem has nothing to do with canvas and has everything to do with callbacks, and that you're trying to draw the image to the canvas before the image is done loading. 
 
If your browser has already cached a copy of the large image, or if a small image only takes a fraction of a second to download, then there's no problem.
 
If you try downloading an 18MB image, and draw it to the canvas as soon as you set the url for the image, then you're going to get a blank screen, because it hasn't finished loading.
 
Instead, you need to wait for the image to finish loading, and then draw it to the canvas when it's ready.
 
var canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    image = new Image();

image.onload = function () {
    var img = this,
        width = img.width,
        height = img.height;

    canvas.width = width;
    canvas.height = height;
    context.drawImage(img, 0, 0, width, height);

    document.body.appendChild(canvas);
};

image.src = "//mydomain.com/path-to-really-huge-image.png";
 
Now it could be a 16MP image. Nothing will happen until the file is done loading.
 Then, the onload event fires, and does the rest of the setup. 
 
You could make it more abstract, and turn it into a nifty program, but it feels like this is the key piece you might be missing.