javascript - 我想合并 DIV 中的所有图像并允许用户下载(js 驱动)

Question

我正在为客户设计和开发由 Wordpress 和 Woocommerce 提供支持的网页，该插件很棒，但有一些我希望它具备的功能。最主要的是让用户能够保存他们的配置预览。

插件是“Woocommerce Visual Products Configurator”:

它允许买家通过为商品的不同部分选择一系列不同的属性来构建自己的商品。例如，为一只鞋选择不同类型的鞋底，以及能够为同一只鞋选择一系列鞋带。

我的问题:当用户选择他们的选项时，配置图像彼此叠加，因此任何正常的“另存为”功能只会保存最上面的图像。

我已经成功地使用 html2canvas-Data URL() 组合并保存了图像，但是它生成屏幕截图的方式意味着质量变得很差。

我的想法是合并“vpc-preview”DIV 中的所有图像，然后强制下载。

通过搜索插件的功能我发现了这个:

function merge_pictures($images, $path = false, $url = false) {
$tmp_dir = uniqid();
$upload_dir = wp_upload_dir();
$generation_path = $upload_dir["basedir"] . "/VPC";
$generation_url = $upload_dir["baseurl"] . "/VPC";
if (wp_mkdir_p($generation_path)) {
    $output_file_path = $generation_path . "/$tmp_dir.png";
    $output_file_url = $generation_url . "/$tmp_dir.png";
    foreach ($images as $imgs) {
        list($width, $height) = getimagesize($imgs);
        $img = imagecreatefrompng($imgs);
        imagealphablending($img, true);
        imagesavealpha($img, true);
        if (isset($output_img)) {
            imagecopy($output_img, $img, 0, 0, 0, 0, 1000, 500);
        } else {
            $output_img = $img;
            imagealphablending($output_img, true);
            imagesavealpha($output_img, true);
            imagecopymerge($output_img, $img, 10, 12, 0, 0, 0, 0, 100);
        }
    }
    imagepng($output_img, $output_file_path);
    imagedestroy($output_img);
    if ($path)
        return $output_file_path;
    if ($url)
        return $output_file_url;
} else
    return false;
}

然而，该函数并未在任何地方被调用。还有几个“保存”按钮被注释掉了，这让我想知道它们是否从以前的版本中删除了。

理想情况下，我希望用户能够立即将他们的创作分享到 Facebook，但我认为这将是一个好的开始。

任何想法将不胜感激!

谢谢!

更新:

我已经设法使用以下代码输出每个配置图像的 url 的警报。对用户无用，但至少我知道它的目标正是我需要的。

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 的相应图像然后强制下载的任何建议？

Cick to see Fiddle

更新 2:以下 fiddle 允许用户上传图像，然后将它们合并为一张照片以供下载。不幸的是，我的编码技巧还不够好，无法在某些 DIV 中使用图像的 SRC url 来操纵它，并将所有照片相互合并。

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;
}

Answer 1

基于此question/answer , 我会看看 node-canvas .