चयनित पृष्ठभूमि के साथ कैनवास सहेजें

Question

मैं कैनवास के साथ काम कर रहा हूं, अभी मैं डीबी में सहेज सकता हूं और मैं पृष्ठभूमि छवि को एक छवि सूची में से एक में बदल सकता हूं।

मेरी समस्या तब होती है जब मैंने पृष्ठभूमि के साथ कैनवास को सहेजने की कोशिश की, सहेजी गई छवि सिर्फ मुझे ड्रॉ दिखाती है लेकिन छवि पृष्ठभूमि नहीं है ... क्या कोई मेरी मदद कर सकता है?

सर्वश्रेष्ठ सादर!

यहाँ कोड:

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

---

कोड संपादित

यहाँ कोड:

<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

आपका काम लगभग पूरा प्रदान करते हैं। इस कोड को परिवर्तित का प्रयास करें:

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

कैनवास तत्व की पृष्ठभूमि (छवि) कैनवास सामग्री का हिस्सा नहीं है और इस प्रकार सहेजा नहीं गया है। आप कैनवास

पुनः बनाने नहीं कर सकते

समाधान आप पृष्ठभूमि सिर्फ कैनवास पर यह प्रस्तुत करना इससे पहले कि आप संयुक्त आपरेशन का उपयोग कर बचाने के लिए चाहते हैं, तो "गंतव्य से अधिक" यह केवल पिक्सल जोड़ देगा जहां कैनवास पारदर्शी है या अर्ध पारदर्शी और आप तत्व पृष्ठभूमि देखेंगे।

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

कैनवास सीएसएस पृष्ठभूमि छवि लोड करने के लिए

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

आप छवि

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

या एक कॉपी और पेस्ट समाधान

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