У меня есть холст, где пользователь может создать дизайн, используя изображения в другом div
, который они нажимают, отправляя его на холст Fabric.js, где он перемещается и т. Д. Так как размер холста width="270"
и height="519"
, меньше, чем готовый продукт, мне нужно его заново создать с помощью холста размером width="1001"
и height="1920"
, а затем снимок экрана, чтобы получить все это в одном единственном изображении. Как мне это сделать?Воссоздать ткань Fabric.js и экспортировать как изображение?
Это то, что мой код выглядит так далеко:
HTML
<div id="CanvasContainer">
<canvas id="Canvas" width="270" height="519"></canvas>
</div>
CSS
#CanvasContainer {
width: 270px;
height: 519px;
margin-left: 15px;
}
#Canvas {
overflow: hidden;
}
JAVASCRIPT
//Defining Canvas and object array
var canvas = new fabric.Canvas('Canvas');
//When clicked
$(document).ready(function() {
$("#Backgrounds img").click(function() {
var getId = $(this).attr("id");
//adding all clicked images
var imgElement = document.getElementById(getId);
var imgInstance = new fabric.Image(imgElement, {
left: 135,
top: 259,
width: 270,
height: 519
});
//Corner color for clicked images
imgInstance.set({
borderColor: 'white',
cornerColor: 'black',
transparentCorners: false,
cornerSize: 12
});
canvas.add(imgInstance);
});
});
Спасибо. У меня возникли проблемы с тем, чтобы работать в Firefox и Safari. Он хорошо работает в Chrome. В Safari этот код открывает новую вкладку. В Firefox ничего не делает – Kirby
@kyledavide Я знаю, что прошло какое-то время, но знаете ли вы, если что-то подобное для SVG, а не PNG? –
@ code4ever существует метод toSvg(), чтобы получить строку svg из холста, но оттуда вам нужно будет вручную создать URL-адрес данных. Я сейчас далеко от компьютера, но когда я вернусь, я сделаю фрагмент. – kyledavide