Lưu Canvas với nền đã chọn

Question

Tôi đang làm việc với canvas, ngay bây giờ tôi có thể lưu vào DB và tôi có thể thay đổi hình nền thành hình tôi chọn trong danh sách hình ảnh.

Vấn đề của tôi là khi tôi cố gắng lưu canvas với nền hình ảnh đã lưu chỉ hiển thị hình vẽ nhưng không phải hình nền ... ai đó có thể giúp tôi với điều này không?

Trân trọng!

Đây mã:

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

Đây là hình thức với những hình ảnh:

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

---

MÃ EDITED

Đây mã:

<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

Bạn gần như hoàn tất. Hãy thử thay đổi mã này:

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

Để này:

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

Như thế này:

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

Và sẽ được làm việc với bất kỳ hình ảnh mà bạn đưa vào danh sách lựa chọn, hãy nhớ nó có được kèm theo tiêu đề Access-Control-Allow-Origin cho phép xuất xứ trang của bạn (có thể thông qua ký tự đại diện *).

Answer 2

Nền của phần tử canvas (hình ảnh) không phải là một phần của nội dung canvas và do đó không được lưu.

Giải pháp nếu bạn không thể vẽ lại bức tranh

Nếu bạn muốn nền chỉ làm cho nó vào bức tranh trước khi bạn lưu bằng cách sử dụng hoạt động hợp "điểm giao" nó sẽ chỉ làm tăng thêm pixel nơi canvas là trong suốt hoặc bán trong suốt và bạn sẽ thấy nền Elements.

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

Để tải hình nền vải CSS

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

Bạn có thể phải kéo dài hình ảnh

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

giải pháp thay thế sử dụng một canvas offscreen và thu hút nền đầu tiên sau đó bức tranh gốc.

// 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 để cung cấp một giải pháp sao chép và dán

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