Question

我正在寻找使用30000（宽度）乘2500（高度）的图像的技术，大小约为4mb。

图像包含大约500个较小的“子图像”，其中我索引到较大的图像以获得小图像。一次只能显示一个小图像。我正在使用drawImage来复制较大图像的一部分并进行渲染。较小的图像高度/宽度为600 x 250像素。

作为附加背景，我们不需要可视化大图像，只需将其编入索引。

加载技术很好，下载4mb需要一些时间，但这不是问题。我想解决两个问题：

1）在加载4mb图像后，通过ajax到base64，我们设置图像src。设置src会使浏览器暂停一两秒钟。设置源的代码如下：

    GlobPNG = document.createElement('img');
    l_src = "data:image/jpg;base64," + e.data;
    $(GlobPNG).attr({'width':'30000', 'height':'2500', 'display':'none', 'src': l_src });

2）drawImage例程基于鼠标移动。它通常工作正常，但有时，它会停止浏览器....再一次或两秒。更新和可视化的代码如下：

    lCtx.canvas.width = lCtx.canvas.width;
    lCtx.drawImage(GlobPNG, imgXBegin, imgYBegin, 600, 250, 0,0,lCtx.canvas.width, lCtx.canvas.height);

我想知道是否有更好的技术。

任何建议都表示赞赏！

图像性能 - 设置图像源暂时停止浏览器

0 个答案: