Seçilen arka planla birlikte kanvas kaydetme

Question

Tuval ile çalışıyorum, şu anda DB'ye kaydedebiliyorum ve arka plan resmini bir resim listesinden seçerek değiştirebiliyorum.

Sorunum, tuvali arka planla kaydetmeye çalıştığımda kaydedilen görüntünün bana yalnızca çekimi gösterdiğini ancak görüntü arka planının görüntülenmemesini sağlaması ... bana yardımcı olabilir mi?

Saygılarımızla! İşte

kodu: Burada

<script src="js/drawingboard.min.js"></script> 
    <script data-example="1"> 
     var defaultBoard = new DrawingBoard.Board("default-board", { 
      background: "#ffff", 
      droppable: true, 
      webStorage: false, 
      enlargeYourContainer: true, 
      addToBoard: true, 
      stretchImg: false 
     }); 
     defaultBoard.addControl("Download"); 
     $(".drawing-form").on("submit", function(e) { 
      var img = defaultBoard.getImg(); 
      var imgInput = (defaultBoard.blankCanvas == img) ? "" : img; 
      $(this).find("input[name=image]").val(imgInput); 
      defaultBoard.clearWebStorage(); 
     }); 
     $(function() { 
      $("#file-input").change(function(e) { 
       var file = e.target.files[0], 
       imageType = /image.*/; 
       if (!file.type.match(imageType)) 
       return; 
       var reader = new FileReader(); 
       reader.onload = fileOnload; 
       reader.readAsDataURL(file);   
      }); 
      function fileOnload(e) { 
       var $img = $("<img>", { src: e.target.result }); 
       var canvas = $("#default-board")[0]; 
       var context = canvas.getContext("2d"); 
       $img.load(function() { 
        context.drawImage(this, 0, 0); 
       }); 
      } 
     }); 
    </script> 
    <script src="js/yepnope.js"></script> 
    <script> 
     var iHasRangeInput = function() { 
      var inputElem = document.createElement("input"), 
       smile = ":)", 
       docElement = document.documentElement, 
       inputElemType = "range", 
       available; 
      inputElem.setAttribute("type", inputElemType); 
      available = inputElem.type !== "text"; 
      inputElem.value   = smile; 
      inputElem.style.cssText = "position:absolute;visibility:hidden;"; 
      if (/^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined) { 
       docElement.appendChild(inputElem); 
       defaultView = document.defaultView; 
       available = defaultView.getComputedStyle && 
        defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== "textfield" && 
        (inputElem.offsetHeight !== 0); 
       docElement.removeChild(inputElem); 
      } 
      return !!available; 
     }; 

     yepnope({ 
      test : iHasRangeInput(), 
      nope : ["css/fd-slider.min.css", "js/fd-slider.min.js"], 
      callback: function(id, testResult) { 
       if("fdSlider" in window && typeof (fdSlider.onDomReady) != "undefined") { 
        try { fdSlider.onDomReady(); } catch(err) {} 
       } 
      } 
     }); 
// with this code I can change the background 
      $(document).ready(function() { 
       $("#cambiocanvas > input").click(function() { 
        var img = $(this).attr("src"); 
        $(".drawing-board-canvas").css("background", "url(" + img + ")"); 
       }); 
      }); 
     </script> 

görüntülerle formu:

<div class="tab-pane" id="derm"> 
    <div class="row-fluid sortable"> 
     <div class="box span3"> 
      <section id="cambiocanvas"> 
       <input id="yellowcanvas" class="canvasborder" type="image" src="http://2.imimg.com/data2/MB/BH/MY-651900/23-250x250.jpg"> 
       <input id="bluecanvas" class="canvasborder" type="image" src="http://jsfiddle.net/img/logo.png"> 
       <input id="greencanvas" class="canvasborder" type="image" src="https://www.gravatar.com/avatar/86364f16634c5ecbb25bea33dd9819da?s=128&d=identicon&r=PG&f=1"> 
      </section> 
     </div> 
    <div class="box span9"> 
    <div class="box-header well" data-original-title> 
     <h2><i class="icon-tasks"></i> </h2> 
     <div class="box-icon"> 
      <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a> 
      <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a> 
     </div> 
    </div> 
    <div class="box-content"> 
     <div id="container"> 
      <div class="example" data-example="1"> 
       <div class="board" id="default-board"></div> 
      </div> 
      <form class="drawing-form" method="post" name="diagram" id="diagram" enctype="multipart/form-data"> 
       <div id="board"></div> 
       <input type="hidden" name="image" value=""> 
       <input type="hidden" name="id_user" value="<?php echo $id" /> 
<br><hr> 
       <button class="btn btn-info" id="btnUpload">Save</button> 
      </form> 
      <div id="ldiag" style="display:none;"><img src="images/loading4.gif" /></div> 
      <div class="progress1"></div> 
      <div id="diaga"></div> 
     </div> 
    </div> 
</div> 

---

KOD EDITED Burada

kodu:

<script src="js/drawingboard.min.js"></script> 
<script data-example="1"> 
    var defaultBoard = new DrawingBoard.Board("default-board", { 
     background: "#ffff", 
     droppable: true, 
     webStorage: false, 
     enlargeYourContainer: true, 
     addToBoard: true, 
     stretchImg: false 
    }); 
    defaultBoard.addControl("Download"); 
    $(".drawing-form").on("submit", function(e) { 
     var img = defaultBoard.getImg(); 
     var imgInput = (defaultBoard.blankCanvas == img) ? "" : img; 
     $(this).find("input[name=image]").val(imgInput); 
     defaultBoard.clearWebStorage(); 
    }); 
$(function() { 
    $("#file-input").change(function(e) { 
     var file = e.target.files[0], 
     imageType = /image.*/; 
     if (!file.type.match(imageType)) 
     return; 
     var reader = new FileReader(); 
     reader.onload = fileOnload; 
     reader.readAsDataURL(file);   
    }); 
    function fileOnload(e) { 
     var canvas = $("#default-board")[0]; 
     var context = canvas.getContext("2d"); 
     var background = new Image; 
     background.src = canvas.style.background.replace(/url\(/|\)/gi,"").trim(); 
     background.onload = function(){ 
      var $img = $("<img>", { src: e.target.result }); 
      $img.load(function() { 
       context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); 
       context.drawImage(this, 0, 0); 
      }); 
     } 
    } 
}); 

Answer 1

kopyalanıp yapıştırılmış bir çözüm sağlamak için. Bunun gibi

$(".canvasborder").click(function(){ 
     var src = $(this).attr("src"); 
     defaultBoard.setImg(src); 
    }); 

: Bu Birine

$(document).ready(function() { 
     $("#cambiocanvas > input").click(function() { 
      var img = $(this).attr("src"); 
      $("#default-board").css("background", "url(" + img + ")"); 
     }); 
    }); 

:

var defaultBoard = new DrawingBoard.Board("default-board", { 
     background: "#fff", 
     droppable: true, 
     webStorage: false, 
     enlargeYourContainer: true, 
     addToBoard: true, 
     stretchImg: true 
    }); 
    defaultBoard.addControl("Download"); 

    $(".canvasborder").click(function(){ 
     var src = $(this).attr("src"); 
     defaultBoard.setImg(src); 
    });  


    $(".drawing-form").on("submit", function(e) { 
     var img = defaultBoard.getImg(); 
     var imgInput = (defaultBoard.blankCanvas == img) ? "" : img; 
     $(this).find("input[name=image]").val(imgInput); 
     defaultBoard.clearWebStorage(); 
    }); 
    $(function() { 
     $("#file-input").change(function(e) { 
      var file = e.target.files[0], 
      imageType = /image.*/; 
      if (!file.type.match(imageType)) 
      return; 
      var reader = new FileReader(); 
      reader.onload = fileOnload; 
      reader.readAsDataURL(file);   
     }); 
     function fileOnload(e) { 
      var canvas = $("#default-board")[0]; 
      var context = canvas.getContext("2d"); 
      var background = new Image; 
      background.src = canvas.style.background.replace(/url\(|\)/gi,"").trim(); 
      background.onload = function(){ 
       var $img = $("<img>", { src: e.target.result }); 
       $img.load(function() { 
        context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); 
        context.drawImage(this, 0, 0); 
       }); 
      } 
     } 
    }); 

Ve seçim listesine koymak herhangi bir görüntü ile çalışma olacak, sahip olduğu hatırlıyorum bu kodu değişir deneyin sayfanızın kaynağına izin veren bir Access-Control-Allow-Origin başlığı ile birlikte (potansiyel olarak * joker karakteri ile).

Answer 2

Tuval öğesinin arka planı (resmi), kanvas içeriğinin bir parçası değildir ve bu nedenle kaydedilmez. Eğer kompozit işlemi kullanılarak kaydetmeden önce arka plan sadece tuval üzerine işlemek istiyorsanız

Çözüm Eğer tuval

yeniden çizme olamazsa "hedef-over" tuval şeffaftır ya da nerede sadece pikselleri katacak yarı saydam ve Elements arka planını göreceksin.

ctx.globalCompositeOperation = "destination-over"; 
ctx.drawImage(backgroundImage,0,0); 
ctx.globalCompositeOperation = "source-over"; // restore default 

Sen Alternatif çözüm ekran dışında tuval kullanır ve ilk önce orijinal tuval arka planını çizer

ctx.drawImage(background,0,0,ctx.canvas.width,ctx.canvas.height); 

imajını germek zorunda kalabilirsiniz tuval CSS arka plan resim

var background = new Image; 
background.src = canvas.style.background.replace(/url\(/|\)/gi,"").trim(); 
// wait till it has loaded. 

yüklemek için.

// ensure that the image has loaded before running this code. 
// canvas is the original canvas that you want to add the background to 
// ctx is the origin canvas context 
var can2 = document.createElement("canvas"); 
can2.width = canvas.width; 
can2.height = canvas.height; 
var ctx2 = can2.getContext("2d"); 
ctx2.drawImage(background,0,0,ctx.canvas.width,ctx.canvas.height); 
ctx2.drawImage(canvas,0,0); 
// put the new result back in the original canvas so you can save it without changing code. 
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
ctx.drawImage(can2,0,0); 

VEYA

neredeyse tamamlandı

function fileOnload(e) { 
     var canvas = $("#default-board")[0]; 
     var context = canvas.getContext("2d"); 
     var background = new Image; 
     background.src = canvas.style.background.replace(/url\(|\)/gi,"").trim(); 
     background.onload = function(){ 
      var $img = $("<img>", { src: e.target.result }); 
      $img.load(function() { 
       context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); 
       context.drawImage(this, 0, 0); 
      }); 
     } 
    });