Fiddle

Question

我目前有一块JS允许我获取某个DIV（vpc-preview）中的所有IMG网址。我现在正在寻找一个解决方案，将这些Urls合并到一个弹出供用户下载的图像中。

我使用这种方法而不是像＃34; HTMLCanvasElement.toDataURL＆＃34;方法因为我想要高质量的图像输出。我发现Html2canvas方法会在视网膜上产生模糊的图像。原始网址是高质量的图片，如果只是合并，这将是理想的。

注意：图像不具有一致的名称，并且可以在彼此顶部堆叠5-30个图像之间的任何位置。这就是我从它们所在的容器中收集它们的原因，高度/宽度是唯一的常数。

下面是一个小提琴，我把它放在一起展示到目前为止我所拥有的，唯一的区别是图像将叠加在一起而不是并排。

Demo Fiddle

function img_find() {
var imgs = document.querySelectorAll('#vpc-preview img');
var imgSrcs = [];

for (var i = 0; i < imgs.length; i++) {
imgSrcs.push(imgs[i].src);
}

return alert(imgSrcs);
}

更新：以下小提琴可让用户上传图片，然后将其合并到一张照片中进行下载。不幸的是，我的编码技巧还不足以将其用于在某些DIV中使用SRC的图像网址并将所有照片合并到彼此之上。 Click here to see thread this came from.

Fiddle

function addToCanvas(img) {
// resize canvas to fit the image
// height should be the max width of the images added, since we rotate -90        degree
// width is just a sum of all images' height
canvas.height = max(lastHeight, img.width);
canvas.width = lastWidth + img.height;

ctx.clearRect(0, 0, canvas.width, canvas.height);
if (lastImage) {
    ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
}

ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
ctx.drawImage(img, -canvas.height, lastWidth);

lastImage = new Image();
lastImage.src = canvas.toDataURL();
lastWidth += img.height;
lastHeight = canvas.height;
imagesLoaded += 1;
}

获取网址并合并为单个高质量图像（Javascript）

Fiddle

0 个答案: