我正在画布,现在我可以保存到数据库,我可以将背景图像更改为一个我选择一个图像列表.
我的问题是当我试图保存画布与背景保存的图像只是给我画画,但不是图像背景…可以有人帮助我吗？
最好的祝福！
这里代码：
<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);
});
}
});
</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",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,canvas.width,canvas.height);
context.drawImage(this,0);
});
}
}
});
解决方法
你几乎完成了尝试更改此代码：
$(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",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,canvas.height);
context.drawImage(this,0);
});
}
}
});
并且将与您放在选择列表中的任何图像一起使用,请记住,它必须伴随有一个Access-Control-Allow-Origin标头,允许页面的来源(可能通过*通配符).
