单击canvasHTML5上的按钮后，上传的图像显示与背景图像

我正在使用HTML5和fabric js。 我正在拍摄背景图像，并在此背景图像上传图像。 但是，当我将canvas转换为图像时，只有上传的图像才会出现。 我会告诉你屏幕截图。

点击提交按钮后：

在第二个屏幕截图中，只会上传图像。 但我想上传的图像应该带有背景图片。

码：

       canvas{ border: 1px solid black; } #canvascolor input { height:50px; width:50px; }    
   
 submit 
   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(); };    

你可以看到两件黑色和白色的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; } 

      
   
 submit 
  

Answer 1

您将图像设置为元素的background-image CSS属性。

toDataURL()方法只占用canvas的内容。 适用于它的css规则不是其内容的一部分。

您可以使用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; } 

     
   
 submit