我想将画布图像保存在另一张图像上。
$(document).on('click','#local-save', function(event) {
var imgURL = "assets/images/bg.png";
canvas.overlayImage.filters = [];
canvas.overlayImage.applyFilters();
canvas.renderAll();
window.open(canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 500,
width: 500
}));
});
在这里,我可以获得画布图像。但我想将它保存在背景图像上。这该怎么做?
答案 0 :(得分:0)
使用您的数据网址作为某事物的背景属性..
var dataurl = canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 500,
width: 500
});
someElement.style.background = "url("+dataurl+")";
答案 1 :(得分:0)
运行代码段并单击“我”,然后将画布转换为图像。我觉得这对你有帮助
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg',
canvas.renderAll.bind(canvas),
// here set the crossOrigin attribute
{crossOrigin: 'anonymous'}
);
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();
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function(e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};
<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>
<div class="col-sm-12">
<div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"><strong>Customize T-Shirt From Here</strong>
</div>
<input type="file" id="file">
<br/>
<canvas id="canvas" width="750" height="550" style="border: 1px solid black; box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />
</div>
答案 2 :(得分:0)
我已经解决了我的问题如下。我的背景图片在另一个画布标识MyID
下打开。我的普通画布ID为canvas
。
var MaskImg = canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 400,
width: 400
});
var c=document.getElementById("MyID");
var ctx=c.getContext("2d");
c.width = 1748;
c.height = 2481;
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "assets/images/bg.png"
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 1748, 2480);
imageObj2.src = MaskImg;
imageObj2.onload = function() {
event.preventDefault();
ctx.drawImage(imageObj2, (100, 100 , 400, 400);
event.preventDefault();
var img = c.toDataURL({
format: 'png',
});
window.open(img);
}
};