javascript - 在 C# 和 Fabric.js 中添加对象并保存图像

Question

我正在使用fabricjs 。使用asp.net mvc3。我想在图像上作为组绘制文本和矩形。文本和矩形可以多次添加。添加组后，我想保存该图像，准确性很重要。

我有两个选择。第一个选择是使用canvas.toJSON()。这种方法我必须使用 C# 图形类创建对象，这是痛苦且不准确的。其次是将 Canvas 导出为准确的 Base64。

这里是what I have done so far .

这是给出异常的代码:

function SaveResultImage() {
  canvas.deactivateAll().renderAll();
  var base64String = canvas.toDataURL("image/jpg");// this line gives exception
  if (!fabric.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
  } else {
    console.log(base64String);
    // save image posting base64String using ajax// this is working fine
  }
}

exception: VM1226 fabric.min.js:4 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.(…)

Answer 1

似乎您的图像来源有问题，我使用了 cross origin image provided by WikiMedia 。当您从 Fabric 中的 URL 加载图像时，添加 { crossOrigin: 'Anonymous' }.

查看下面更新后的代码片段:

alert('click apply to add text and rectangle');
$(document).ready(function() {
 
  
});

function createCustomComments() {
  try {

    var selText = $('#txtCustomComments').val();
    var color = new fabric.Color(colorPicker.val()).toRgb();
    var fontSize = fontPicker.val();

    commentText = new fabric.IText(selText, {
      fontSize: fontSize,
      hasControls: false,
      hasBorders: true,
      originX: 'center',
      backgroundColor: 'rgba(0,0,0,0)',
      borderColor: color,
      //opacity: 0.6,
      fill: color,
      fontFamily: "helvetica"
    });

    var commentRectange = new fabric.Rect({
      originX: 'center',
      top: 30,
      width: 300,
      height: 200,
      fill: 'rgba(0,0,0,0)',
      stroke: color,
      strokeWidth: 4
    });

    var group = new fabric.Group([commentText, commentRectange], {
      left: 100,
      top: 150
    });

    canvas.add(group);
    canvas.bringForward(group);

  } catch (exception) {
    console.log(exception);
  }
}
$('#btnApplyComments').on('click', function() {
  createCustomComments();
});
$('#btnSave').on('click', function() {
  SaveResultImage();
});

$('#getjson').on('click', function() {
  getfabricJsonToText();
});
var commentRectange, commentText;
var canvas = new fabric.Canvas('wmcCanvas', {
  selection: true
});
var colorPicker = $('#btnColor');
var fontPicker = $('#bntfontsize');
var image = new Image();
var imageComp;

image.crossOrigin = "Anonymous";
image.onload = function() {
// the url is sub domain the image below is dummy
  imageComp = fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function(img) {
    var oImg = img.set({
      angle: 0,
      cornersize: 10,
      hoverCursor: "default",
      lockMovementX: true,
      lockMovementY: true,
      lockRotation: true,
      hasRotatingPoint: true,
      hasControls: false,
      hasBorders: false,
      lockScalingFlip: true,
      lockScalingX: true,
      lockScalingY: true,
      lockSkewingX: true,
      lockSkewingY: true,
      height: image.naturalHeight,
      width: image.naturalWidth
    });
    canvas.add(oImg);
    canvas.moveTo(oImg, window.objectIndex);
  }, { crossOrigin: 'Anonymous' });
  canvas.setHeight(image.naturalHeight);
  canvas.setWidth(image.naturalWidth);
};
image.src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg";

function SaveResultImage() {
  canvas.deactivateAll().renderAll();
  var base64String = canvas.toDataURL("image/jpg");
  //var base64String = canvas.toSVG();
  //base64String = base64String.replace(/^data:image\/(png|jpg);base64,/, "");

  if (!fabric.Canvas.supports('toDataURL')) {
    alert('This browser doesn\'t provide means to serialize canvas to an image');
  } else {
	console.debug(base64String);
    // save image
  }
}

.wmc_main {
  width: 420px;
  background: #F7F7F7;
  height: 75px;
  margin: 0 auto;
  padding: 10px 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 5px solid #e3e3e3;
  padding-bottom: 8px;
}

.wmc_main span {
  color: #585858;
}

.main-dropdown form {
  width: 244px;
  float: left;
}

.main-dropdown form select.pls-select {
  height: 30px;
  width: 230px;
  border: 1px solid #dadada;
  color: #6b6b6b;
  padding: 0 10px;
}

.showhideCustomComment {
  width: 100%;
  float: left;
}

.comment-dropdown input.pls-select-comments {
  height: 27px;
  width: 210px;
  border: 1px solid #dadada;
  padding: 0 10px;
  color: #6b6b6b;
}

.comment-dropdown.showhideCustomComment {
  width: 100%;
  padding-bottom: 10px;
}

.showhideCustomComment span {
  width: 126px !important;
}

.comment-apply-btn {
  height: 30px;
  padding: 0 5px 0 5px;
  background: #05b5ef;
  border: none;
  color: #fff;
  line-height: 30px;
  margin-left: 0px;
  margin-top: 2px;
}

.wmc_main .main-dropdown span,
.wmc_main .comment-dropdown span {
  width: 126px;
  float: left;
  line-height: 30px;
  color: #05b5ef;
}

.wmc_main .main-dropdown {
  margin-bottom: 8px;
  width: 100%;
  float: left;
}

.wmc_main .color-picker {
  width: 182px;
  float: left;
}

.color-picker span {
  float: left;
  line-height: 26px;
  width: 126px;
}

.color-box {
  width: 16px;
  height: 14px;
  background: #ff0c0c;
  border: 6px solid #ebebeb;
  float: left;
}

.comment-dropdown {
  /*     width: 100px;     margin-bottom: 8px;     padding-top: 8px; */
  width: 105px;
  float: left;
  padding-top: 0;
}

input.wmc-font-size {
  width: 32px;
  padding: 0 0 0 4px;
  height: 24px;
  border: 1px solid #ebebeb;
}

input.wmc-font-color {
  width: 28px;
  height: 24px;
  border: 1px solid #ebebeb;
  padding: 3px;
}

.main-font-size {
  margin: 0 8px 0 0;
  width: 125px;
  float: left;
  display: block;
}

.font-setting {
  width: 100%;
  float: left;
  /*    padding: 0 0 0 36px;*/
}

.main-font-size span {
  line-height: 26px;
  float: left;
  margin-right: 5px;
  width: 68px;
}

.show-setting {
  width: 92%;
  float: left;
  margin-bottom: 10px;
}

.show-setting span {
  color: #575757;
}

.show-setting span img {
  padding-left: 10px;
}

.color-picker span {
  color: #575757;
}

.setting-btn:hover {
  background: #77b800;
}

.setting-btn {
  background: #8fd400 none repeat scroll 0 0;
  border: 0 none;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  height: 35px;
  margin-left: 2px;
  padding: 0;
  text-transform: uppercase;
  width: 130px;
}

.share-post-history .dialogshare {
  width: 228px;
}

.canvas-container {
  margin-top: 30px;
}

<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.js"></script>
<div class="wmc_main" style="display: flex;">
  <div class="main-dropdown">
    <span>Select comments:</span>

    <input id="txtCustomComments" name="Comment" value="dummy text" placeholder="Custom comments here" class="pls-select-comments" type="text">


    <button name="btn-apply" id="btnApplyComments" value="apply" class="comment-apply-btn">
      Apply</button>
  </div>

  <div class="font-setting">
    <div class="color-picker">
      <span>Font Color:</span>
      <input id="btnColor" class="wmc-font-color" name="favcolor" value="#FF0000" type="color">
    </div>
    <div class="main-font-size">
      <span>Font Size:</span>
      <input id="bntfontsize" class="wmc-font-size" min="6" max="72" step="2" value="20" type="number">
    </div>
    <div class="comment-dropdown">
      <span></span>
      <input id="btnSave" value="Save" class="comment-apply-btn" type="button">

      <input value="Reset" onclick="reset()" class="comment-apply-btn" type="button">
    </div>
  </div>


  <canvas id="wmcCanvas">Your browser does not support the canvas element.</canvas>
</div>

你的 fork fiddle