我正在开发一个由Wordpress和Woocommerce提供支持的客户端网页设计和开发，这个插件很棒但是我希望它有一些功能。主要的是让用户能够保存其配置的预览。
该插件是＆＃39; Woocommerce Visual Products配置器＆＃39;：
它允许买家通过从项目的不同部分的一系列不同属性中进行选择来构建他们自己的项目。例如，为鞋子选择不同类型的鞋底，以及能够为同一鞋子选择一系列鞋带。
我的问题：当用户选择他们的选项时，配置图像会相互叠加，因此任何正常的＆＃34;另存为＆＃34;功能只会保存顶部图像。
我已成功设法使用html2canvas-Data URL（）组合并保存图像，但它生成屏幕截图的方式意味着质量变得非常差。
我的想法是合并＆＃34; vpc-preview＆＃34;中的所有图片。然后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;
}
然而，该功能并未在任何地方调用。还有一些＆＃34; save＆＃34;注释掉的按钮让我想知道它们是否从之前的版本中删除了。
理想情况下，我希望用户能够立即将他们的创作分享给Facebook，但我认为这将是一个良好的开端。
任何想法都将不胜感激！
谢谢！
更新
我设法使用以下代码输出每个配置图像的网址的提醒。对于用户来说没用，但至少我知道它正是我所需要的目标。
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;
}
答案 0 :(得分：0)
根据此question/answer，我会看一下node-canvas。
答案 1 :(得分：0)
我过去所做的是使用@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