1
Я изменил 2 изображения на 2 разных холста (Основное изображение Canvas & Logo Canvas). Один из холстов (холст логотипа) выполнен перетаскиваемый поверх другого холста (холст основного изображения). После перемещения и размещения логотипа я хочу объединить оба холста в один холст (изображение) и отправить toDataURL(); вывода на сервер. Как мне это достичь?HTML5 Canvas: Как объединить 2 холста в 1 (из которых 1 перетаскивается)
Edit:
HTML код:
<div class="clearfix" style="position: relative;">
<div creativecanvasdirective style="position: absolute; z-index: 1"></div>
<div logocanvasdirective style="position: absolute; z-index: 2; cursor: move;"></div>
</div>
Javascript Код:
app.directive('creativecanvasdirective',['$rootScope','$templateRequest','$compile', function($rootScope,$templateRequest,$compile) {
return {
template: "<canvas id='creative' width='500' height='500'/>",
scope: true,
link: function(scope, element, attrs) {
var creative_canvas = document.getElementById('creative'),
creative_context = creative_canvas.getContext('2d');
make_creative();
function make_creative()
{
creativeimage = new Image();
creativeimage.src = scope.creative_image;
creativeimage.onload = function() {
creative_context.drawImage(creativeimage, 0, 0);
}
}
scope.$watch('creative_image', function(newValue) {
if (newValue) {
make_creative();
}
});
}
};
}]);
app.directive('logocanvasdirective',['$rootScope','$templateRequest','$compile', function($rootScope,$templateRequest,$compile) {
return {
template: "<canvas id='logo' width='500' height='500'/>",
scope: true,
link: function(scope, element, attrs) {
var canvas = document.getElementById('logo'),
logo_context = canvas.getContext('2d');
make_logo();
function make_logo()
{
logoimage = new Image();
logoimage.src = scope.brand_logo; // scope variable defined in controller
logoimage.onload = function() {
logo_context.drawImage(logoimage, 20, 20);
}
}
scope.$watch('brand_logo', function(newValue) {
if (newValue) {
make_logo();
var canvasOffset=$("#logo").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
var isDragging=false;
function handleMouseDown(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// set the drag flag
isDragging=true;
}
function handleMouseUp(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// clear the drag flag
isDragging=false;
}
function handleMouseOut(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// user has left the canvas, so clear the drag flag
isDragging=false;
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
// if the drag flag is set, clear the canvas and draw the image
if(isDragging){
logo_context.clearRect(0,0,canvasWidth,canvasHeight);
logo_context.drawImage(logoimage,canMouseX,canMouseY+canvasHeight/4);
}
}
$("#logo").mousedown(function(e){handleMouseDown(e);});
$("#logo").mousemove(function(e){handleMouseMove(e);});
$("#logo").mouseup(function(e){handleMouseUp(e);});
$("#logo").mouseout(function(e){handleMouseOut(e);});
}
});
}
};
}]);
Теперь, как я объединить эти два холста в один холст и отправить его на сервер?
Можете ли вы показать мне в скрипку? –
Конечно, покажите мне свой код, и я его изменю. – Shomz
Проверьте изменения. –