В настоящее время у меня есть часть JS, которая позволяет мне получать все URL-адреса IMG внутри определенного DIV (vpc-preview). Теперь я ищу решение, чтобы взять эти URL-адреса и объединить их в одно изображение, которое появляется для загрузки пользователем.
Я использую этот метод, а не что-то вроде метода «HTMLCanvasElement.toDataURL», поскольку мне нужно изображение высокого качества. Я обнаружил, что метод Html2canvas создает размытое изображение, особенно на сетчатке. Исходные URL-адреса представляют собой изображения высокого качества, которые были бы идеальными, если бы их просто объединили.
Примечание. Изображения не будут иметь одинаковых имен, и может быть от 5 до 30 изображений, расположенных друг над другом. Вот почему я собираю их из контейнера, в котором они находятся, и высота/ширина являются единственными константами.
Ниже приведен скрипт, который я собрал, чтобы показать, что у меня есть на данный момент, единственная разница в том, что изображения будут располагаться друг над другом, а не рядом.
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);
}
ОБНОВЛЕНИЕ: следующая скрипта позволяет пользователям загружать изображения, а затем объединяет их в одну фотографию для загрузки. К сожалению, мои навыки кодирования недостаточно хороши, чтобы манипулировать этим, используя URL-адреса SRC изображений в определенном DIV и объединять все фотографии друг с другом. Нажмите здесь, чтобы увидеть цепочку, из которой это пришло.
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;
}
