我想合并 DIV 中的所有图像并允许用户下载（由 js 驱动）

Posted 2023-05-09

【中文标题】我想合并 DIV 中的所有图像并允许用户下载（由 js 驱动）

【英文标题】：I would like to merge all images within DIV and allow user to download (js powered)

【发布时间】：2017-04-13 07:59:14

【问题描述】：

我正在从事由 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： 以下小提琴允许用户上传图像，然后将它们合并为一张照片以供下载。不幸的是，我的编码技能不足以将其操纵为在某些 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;

【问题讨论】：

我不知道您所说的“图像”是什么意思。您是在谈论配置图像、项目预览还是什么？

嗨 Jefre，我所说的图像是指预览中的配置图像。当用户选择不同的选项时，它将覆盖代表它的相应图像。这是我希望用户能够下载的预览中看到的内容。谢谢

我只需要使用从第一个脚本输出的 SRC url 并将它们输入到第二个脚本中以进行合并以供下载。我不需要在画布中预览合并的图像，但只需通过 css 隐藏画布就足够简单了。图像是具有透明度的 PNG，可以相互叠加。

【参考方案1】：

基于这个question/answer，我会看看node-canvas。

【讨论】：

您能详细说明一下吗？ （由于死链接，*** 通常反对仅链接答案，等等......）

感谢 Mathieu，我一直在查看 javascript 画布，但还没有找到任何使用几乎无限图像和各种名称的图像。令人沮丧，因为我知道我离得不远了。

【参考方案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

【讨论】：

嗨，约翰尼，有趣的想法！有时最简单的解决方案是最好的。这是否允许我在页面上有一个“保存”按钮，单击该按钮会导致弹出窗口保存图像？因为如果是这样，那么我一定会进一步调查。

您可以，但它会是 PDF，对我而言，它适用于需要高质量打印质量的行业。因此，我认为一个简单的保存为 jpeg 将起作用，我现在将在我的答案中发布一个 jquery 解决方案。

感谢您抽出宝贵时间通过 Johnny 发送。我现在已经有了 html2canvas，但是由于它捕获图像的方式，分辨率显着下降（尤其是在视网膜上）。 PDF 提供了我想要的高质量（并将用于其他用途），但目前我正在寻找高质量的 jpeg 或 png，然后用户可以将其发布到社交媒体。这就是为什么我想尝试为每张图片使用原始 src url。

我将尝试使用 rasterizeHTML.js 看看会发生什么。另一个问题是配置器嵌入了一个短代码，除了默认的 wordpress 文本编辑器之外，它不喜欢在任何地方使用。这是我正在寻找一种可以仅利用页面上生成的 SRC url 的解决方案的另一个原因。