Question

在我的网站上，我有一些可以拖动的图像

 draggable()

因为它是可拖动的，所以图像是绝对的。

图像全部在一个div 800 x 400像素。

我想要做的是获取div中的所有图像并将其转换为1张图片。

所以从示例20张图片彼此之上（不同的z索引）我想制作1张图片。

我得到了一个用户创建的图像示例（拖动了不同的图像）http://ve.svenboogaart.nl/test/moodboards.php?id=46图像始终位于800 x 400 px div中。

需要将其保存为图片，以便用户将其保存为图片！

Answer 1

如果我理解正确的话：

你有一个800x400的图像，有20个精灵（20 x 160x100图像）
您有20个绝对定位元素，可以拖动
您想要在每个元素中显示图像

如果是这样，您只需要CSS来偏移背景图像。例如：

CSS

.big-image-container { position: relative; }
.big-image { background-image: url(path/to/your/image); background-repeat:no-repeat; }
.draggable-sprite { position:absolute; width: 160px; height: 100px; }

HTML

<div id="container" class="big-image-container">
</div>

JS

var spriteCountX = 5;
var spriteCountY = 4;
var container = $("#container");
var sprite, bgx, bgy;
for (var x=0; x<spriteCountX; x++) {
   for (var y=0; y<spriteCountY; y++) {
       sprite = $("<div>").addClass("big-image draggable-sprite")
          .appendTo(container);

       bgx = x * sprite.width();
       bgy = y * sprite.height();
       sprite.css("background-position", bgx + "px " + bgy + "px");
   }
}

这样做只是偏移每个可拖动元素中的大图像，因此它们似乎有不同的图像作为背景。许多JavaScript库将此技巧用于其图标集（例如，请参阅Bootstrap和jQuery UI。）

** 更新 **

要将可拖动图像转换为用户可以下载的大图像，您需要收集每个可拖动元素的位置，大小和背景图像，并构建它们的服务器端。例如

JS

function renderCanvas() {
    var imageInfo = [];
    $( <draggableElementsSelector> ).each(function(i, e) {
        imageInfo.push({
            position: $(e).position(),  // -> { top, left }
            dimension: { width: $(e).width(), height: $(e).height() },
            imageClass: $(e).attr("class")  // .. what you need to get the bg img
        });
    });

    $.post("url/to/script", { images: imageInfo })
       .done(function(response) { 

            // response.imageSrc should be a link to your image for download

       })
       .fail(function() { alert("Image creation failed"); });
}

PHP

$imageInfo = $_POST['images'];
$imgWidth = 1; // min, just in case, cannot be 0
$imgHeight = 1; // min, just in case, cannot be 0

// first pass to find the dest image size
foreach ($imageInfo as $img) {
    $imgWidth = max($imgWidth, $img->position->left + $img->dimension->width);
    $imgHeight = max($imgHeight, $img->position->top + $img->dimension->height);
}

$destImage = imagecreate($imgWidth, $imgHeight); // (x, y)

foreach ($imageInfo as $img) {
   $src = imagecreatefrompng( getImagePath($img->imageClass) );

   imagecopymerge($destImage, $src, 
       $img->position->left, $img->position->top,
       0, 0, $img->dimension->width, $img->dimension->height);
}

$imgFilename = generateImageFile( ... );  // whatever you need here

// Save the image to file.png 
imagepng($destImage, $imgFilename);


$imgLink = convertFileToUrl( $imgFilename );   // generate downloadable link

header('Content-type: application/json');
echo json_encode(array('imageSrc' => $imgLink));
exit();   // end here

将多个绝对图像保存为一个

1 个答案:

CSS

HTML

JS

JS

PHP