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

Question

I'm working on a client's web design and development powered by Wordpress and Woocommerce, the plugin is great but there's a few functions I wish it had. The main one is giving the ability for the user to save the preview of their configuration.

The plug-in is 'Woocommerce Visual Products Configurator':

It allows buyers to build their own item by selecting from a series of different attributes for different parts of an item. Ex, choosing different types of Soles for a shoe, as well as being able to choose from a series of laces for the same shoe.

My Issue: The configuration images are layered on top of each other as the user selects their options so any normal "save as" function will just save the top image.

I have succesfully managed to combine and save the images using html2canvas-Data URL() but the way it generates the screenshots means the quality becomes very poor.

My thoughts are to merge all the images within the "vpc-preview" DIV then force the download.

Hunting through the functions of the plugin I found this:

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;
}

However the function isn't called anywhere. There's also a couple of "save" buttons that are commented out which makes me wonder if they removed from a previous build.

Ideally I'd like the user to be able to instantly share their creation to facebook but thought this would be a good start.

Any ideas would be greatly appreciated!

Thanks!

UPDATE:

I've managed to use the following code to output an alert of the url's of each of the config images. Useless for the user but at least I know it's targeting exactly what I need.

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);
}

Any suggestions on how to manipulate this and merge the corresponding image of each URL then force the download?

Cick to see Fiddle

UPDATE 2: The following fiddle lets users upload images and then merges them into a single photo for download. Unfortunately my coding skills aren't good enough to manipulate this into using the SRC urls of images within certain DIV and to Merge all the photos on top of each other.

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;
}

Answer 1

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

Answer 2

What I have done in the past is use a @print css file to only capture the divs needed. Very simple concept but works well.

After looking at your link, that is exactly the situations I use it in..online designers. It is a little more difficult keeping your layers responsively aligned, but in the end I feel your codes become cleaner and it works well across devices and OS'.

If you dont want PDF and a simple preview and download than html2image.js is perfect.

 $(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> 

For High quality you want to use rasterizeHTML.js

Found here: https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html