【发布时间】：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，可以相互叠加。
标签： javascript jquery html wordpress canvas