单击画布HTML5上的按钮后，上传的图像显示与背景图像 [英] Uploaded image display with background image after click on button from canvas HTML5
本文介绍了单击画布HTML5上的按钮后，上传的图像显示与背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用HTML5和fabric js。我正在拍摄背景图像并在此背景图像上传图像。但是，当我将画布转换为图像时，只有上传的图像才会出现。我将向您展示屏幕截图。
点击提交按钮后：
I am using HTML5 and fabric js. I am taking tow background images and upload image on this background image. But when i am converting canvas into image then only uploaded image come. I will show you screen shot.
After click on submit button:
在第二个屏幕截图中，只有上传的图像会出现。但我想上传的图片应该带有背景图片。
In second screen shot only uploaded image will come. But i want uploaded image should be come with background image.
代码：
<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恤中选择背景图片。
You can see two t-shirt black and white. You can select background image from two t-shirt after click on it.
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;
}
<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" />
推荐答案
您将图像设置为背景图像 CSS属性< canvas> element。
You are setting your images as the background-image CSS property of you <canvas> element.
toDataURL（）方法只接受画布的内容。适用于它的css规则不是其内容的一部分。
toDataURL() method only does take the content of the canvas. The css rules applied to it are not part of its content.
您可以使用 fabricjs.setBackgroundImage（）方法：
var canvas = new fabric.Canvas('canvas');
$("#canvascolor > input").click(function() {
canvas.setBackgroundImage(this.src, canvas.renderAll.bind(canvas), {
crossOrigin: 'anonymous'
});
});
// trigger the first one at startup
$("#canvascolor > input:first-of-type()")[0].click();
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;
}
<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="https://dl.dropboxusercontent.com/s/9leyl96qd3tytn8/tshirt-front.jpg">
<input class="canvasborder" type="image" src="https://dl.dropboxusercontent.com/s/tk0fs5v4muo6898/tshirt-back.jpg">
</section>
<button href='' id='txt' target="_blank">submit</button><br/>
<img id="preview" />
这篇关于单击画布HTML5上的按钮后，上传的图像显示与背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
