使用arraybuffers/canvas正确附加两个PNG的Javascript（或伪代码）

我有两张图片，当它们组合在一起时，它们的宽高比是1:1。如果我在unix上使用convert a.png b.png-append c.png将它们组合在一起，那么效果会非常好。我正试图用javascript实现这一点。我将包含img数据的arraybuffers添加到一起，因为在画布中绘制它们似乎不会生成相同的图像。如果我简单地附加每个arraybuffer，图像比例是2:1；是否有人知道如何正确地附加数组缓冲区，就像convert所做的那样

---

编辑：详细地说，简单地在画布上堆叠是不可行的，我已经尝试过了。这可能是由于低级别的canvas代码，我怀疑这是由于canvas如何在两个图像之间的边界连接像素。它需要是arraybuffers。

如果出于某种原因不想通过Image加载图像，那么唯一的选择就是手动解析和解压缩文件。的确，由于ICC/gamma支持，浏览器可以更改图像。但这不会发生在画布步骤中，而是在图像加载和转换为RGBA数据期间

也就是说，getImageDate/putImageData期间的处理也会由于非预乘和舍入错误而改变像素值

使用画布将两个PNG图像合并为单个图像的示例：

var ctx=c.getContext2d，//画布2d上下文 img1=新建图像，//创建两个图像 img2=新图像，//元素 计数=2；//装载机轨道 //加载图像 img1.onload=img2.onload=函数{//确保图像是 if！-count append；//首先加载 }; img1.crossOrigin=img2.crossOrigin=；//这个演示需要这个吗 img1.src=http://i.imgur.com/hlHEhUhb.jpg; // 随机图像。。。 img2.src=http://i.imgur.com/ynzkv40b.jpg; //处理图像 函数附加{ //使用宽度对图像求和 c、 宽度=img1.width+img2.width；//设置总高度 c、 height=Math.maximg1.height，img2.height；//设置最大高度 ctx.drawImageimg1，0，0；//在图像1中绘制 ctx.drawImageimg2，img1.width，0；//在图像2中绘制 console.logc.toDataURL；//提取，发送到服务器 }

---

如何填充arraybuffer/XHR？我已经从ajax get请求中加载了它们：数据是正确的和存在的，但只需添加两个缓冲区就可以创建垂直合并：我需要一个水平的、全面的答案。这就是我想要的：解码png字节数组的格式。我将对此进行测试，并给出最佳答案（如果可行）。更新了更多详细信息。结果表明，重新处理我的图像数据库以分割文件更容易开始，从而节省客户端任何处理延迟时间-也就是说，这是我当时正在寻找的问题的答案，将来可能需要！干杯