0
我使用HTML5和麪料js。我正在拍攝兩張背景圖片並在此背景圖片上上傳圖片。但是當我將畫布轉換爲圖像時，只有上傳的圖像纔會出現。我會告訴你屏幕截圖。 
點擊提交按鈕後： 
上傳的圖像顯示與背景圖像後點擊從畫布上的按鈕HTML5
在第二截屏只是上傳的圖片會來。但我想上傳的圖像應該帶有背景圖像。
CODE：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
</head>
<body>
<style>
canvas{
border: 1px solid black;
}
#canvascolor input {
height:50px;
width:50px;
}
</style>
<input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
<input class="canvasborder" type="image" src="http://assets.craniumfitteds.com/images/main/Houston-Astros-New-Era-Crew-Neck-Tshirt-3.jpg">
<input class="canvasborder" type="image" src="http://skyje.com/wp-content/uploads/2010/12/Free-Blank-T-Shirt-Template-500x500.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button>
<br />
<img id="preview" />
<script>
var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
var img = $(this).attr('src');
$('#canvas').css("background-image", "url(" + img + ")");
});
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
</script>
</body>
</html>
你可以看到兩個黑色T恤和白色。點擊它後，您可以從兩件T恤中選擇背景圖像。
var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
var img = $(this).attr('src');
$('#canvas').css("background-image", "url(" + img + ")");
});
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};canvas{
border: 1px solid black;
}
#canvascolor input {
height:50px;
width:50px;
}\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="520" height="520"></canvas>
<section id="canvascolor">
<input class="canvasborder" type="image" src="http://assets.craniumfitteds.com/images/main/Houston-Astros-New-Era-Crew-Neck-Tshirt-3.jpg">
<input class="canvasborder" type="image" src="http://skyje.com/wp-content/uploads/2010/12/Free-Blank-T-Shirt-Template-500x500.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button>
<br />
<img id="preview" />