我正在处理由WordPress和WooCommerce驱动的客户端的Web设计和开发，该插件很棒，但是我希望它具有一些功能。主要的是用户保存其配置预览的能力。
插件是" WooCommerce Visual Products配置器"：
它允许买家通过从一系列不同属性中选择项目不同部分的不同属性来构建自己的物品。ex，为鞋子选择不同类型的鞋底，并能够从一系列鞋带中选择同一鞋。
我的问题：当用户选择其选项时，配置映像彼此层面上层面上，因此任何正常的"另存为"函数都只能保存顶部图像。
我已经成功地设法使用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看到小提琴
更新2：以下小提琴让用户上传图像，然后将它们合并到一个照片中以供下载。不幸的是，我的编码技巧不足以操纵这一点，以使用某些DIV中的图像的SRC URL并彼此之间合并所有照片。
小提琴
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;
}
基于此问题/答案，我会看节点canvas。
我过去所做的就是使用@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