将多个绝对图像另存为一个 [英] Save multiple absolute images as one
问题描述
在我的网站上，我有一些可以拖动的图像
On my site i have some images which can be dragged around
draggable()
因为它是可拖动的，所以图像是绝对的.
Because it's draggable the images are absolute.
图像全部在800 x 400像素的一个格中.
The images are all in one div 800 x 400 px .
我想要做的是获取div中的所有图像并将其转换为1张图片.
What i want to do is get all images in the div and convert it to 1 picture.
因此，从上面的20张图片(不同的z索引)开始，我想制作1张图片.
So from example 20 pictures above each other (different z-indexes) I want to make 1 picture.
我有一个用户创建的图像示例(其中拖动的图像不同) http ://ve.svenboogaart.nl/test/moodboards.php?id = 46 图像始终位于800 x 400 px div中.
I got an example of user created image (wich is diffrent images dragged ) http://ve.svenboogaart.nl/test/moodboards.php?id=46 the images are always in the 800 x 400 px div .
需要将其另存为图片，以便用户将其另存为图片！
It needs to be saved as picture so users can save it as a picture !
推荐答案
如果我正确理解了这一点:
If I understand this correctly :
- 您有一个800x400的图片，其中包含20个精灵(20 x 160x100的图片)
- 您有20个绝对定位的元素，可以拖动
- 您要在每个元素中显示图像
是吗?
如果是这样，您只需要CSS即可偏移背景图像.例如:
If so, you simply need CSS to offset your background image. For example:
.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 和
What this does is simply offset the big image inside each draggable elements so they seem to have different images as background. Many JavaScript libraries uses this trick for their icon set (see Bootstrap and jQuery UI for example.)
** 更新 **
要将可拖动的图像转换为用户可以下载的大图像，您需要收集每个可拖动元素的位置，大小和背景图像，并在服务器端构建它们.例如
To convert the draggable images into a big image that users can download, you'll need to collect the position, sizes and background images of each draggable elements and construct them server side. For example
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
这篇关于将多个绝对图像另存为一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
