キャンバスを選択した背景で保存する

Question

私はキャンバスで作業していますが、今ではDBに保存でき、バックグラウンドイメージをイメージリストから選択することができます。

私の問題は、保存された画像を背景にキャンバスを保存しようとしたところで、画像の背景は表示されません...誰かがこれを手伝ってくれますか？

よろしく！

ここコード：ここ

<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> 

画像と形態：ここ

<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> 

---

CODE EDITED

コード：

Answer 1

をコピー＆ペーストソリューションを提供します。このいずれかに

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

：このよう

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

：このコードに変更してみ

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); 
       }); 
      } 
     } 
    }); 

そして、あなたが選択リストに置かれた任意の画像との仕事になりますが、それは持って覚えていますあなたのページの出所を可能にするAccess-Control-Allow-Originヘッダーが添付されている（潜在的には*ワイルドカード経由）。

Answer 2

キャンバス要素の背景（イメージ）はキャンバスのコンテンツの一部ではないため、保存されません。あなたは、複合操作を使用して保存する前に、背景がちょうどキャンバスにレンダリングしたい場合

ソリューションキャンバス

を再描画することができない場合は、「先オーバー」キャンバスが透明である場合や、それが唯一のピクセルを追加します半透明で、要素の背景が表示されます。キャンバスのCSSの背景画像

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

をロードするために

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

あなたは

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

画像をストレッチする必要があります代替ソリューションは、オフスクリーンキャンバスを使用し、最初に、元のキャンバスを背景を描画します。

// 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); 

ORあなたはほぼ完了

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); 
      }); 
     } 
    });