我想在DIV中合并所有图像并允许用户下载（js powered）

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

小丑看小提琴

更新2：以下小提琴允许用户上传图像，然后将它们合并到一张照片中进行下载。 不幸的是，我的编码技巧还不足以将其用于在某些DIV中使用SRC的图像网址并将所有照片合并到彼此之上。

小提琴

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

基于这个问题/答案 ，我将看一下node-canvas 。

Answer 2

我过去所做的是使用@print css文件来捕获所需的div。 非常简单的概念，但运作良好。

看了你的链接，这正是我在..在线设计师中使用它的情况。 保持你的图层响应对齐有点困难，但最后我觉得你的代码变得更清晰，它在各种设备和操作系统上运行良好。

如果你不想要PDF和简单的预览和下载比html2image.js完美。

 $(document).ready(function(){ var element = $("#html-content-holder"); // global variable var getCanvas; // global variable $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#btn-Convert-Html2Image").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imgageData.replace(/^data:image\\/png/, "data:application/octet-stream"); $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); }); }); 

 <script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;"> Place any code here </div> <input id="btn-Preview-Image" type="button" value="Preview"/> <a id="btn-Convert-Html2Image" href="#">Download</a> <br/> <h3>Preview :</h3> <div id="previewImage"> </div> 

对于高质量，您希望使用rasterizeHTML.js

在此处找到： https ： //github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html