Сохранение Div как JPG Сохраняет, но некоторые содержимое пусто / пусто - PullRequest
Новая
       6

Сохранение Div как JPG Сохраняет, но некоторые содержимое пусто / пусто

0 голосов
/ 26 марта 2020

У меня есть небольшое приложение (весь код следует), которое должно скопировать c0 на другие полотна и разрешить печать; последнее - единственная часть этого, не работающая в настоящее время. Я имею в виду, что изображение сохраняется, но переданный холст кажется пустым, когда я открываю его на своем компьютере.

Почему это так? Заранее спасибо. 

var canvas = [],
  image;
var mainCanvas;
mainCanvas = new fabric.Canvas('c0');
for (i = 1; i <= 3; i++) {
  canvas[i] = new fabric.StaticCanvas('sc' + i);
}

function addText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
  });
  mainCanvas.add(text);
}

var rect = new fabric.Rect({
  fill: '#ff0000',
  width: 100,
  height: 100,
  id: 1
});
var circle = new fabric.Circle({
  fill: '#ffff00',
  radius: 50,
  left: 150,
  top: 150,
  originX: 'center',
  originY: 'center',
  id: 2
});

mainCanvas.on('object:added', onModified);
mainCanvas.on('object:modified', onModified);
mainCanvas.on('object:scaling', onModified);
mainCanvas.on('object:moving', onModified);
mainCanvas.add(rect, circle);

function onModified(option) {
  var ob = option.target;
  var index = mainCanvas.getObjects().indexOf(ob);
  ob.clone(function(obj) {
    for (i = 1; i <= 3; i++) {
      canvas[i].insertAt(obj, index, true);
    }
  });
};

$('#update').click(function() {
  updateCanvas();
});

function updateCanvas() {
  var json = JSON.stringify(mainCanvas);
  for (i = 1; i <= 3; i++) {
    canvas[i].loadFromJSON(json);
  }
}
// Toggling Images
function replaceImage(imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  image.setSrc(imgUrl, function() {
    mainCanvas.renderAll();
    updateCanvas();
  });
}

// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
  isImageLoaded = true;
  image = img.set({
    selectable: false,
    evented: false,
  });
  mainCanvas.add(image);
  mainCanvas.sendToBack(image);
  updateCanvas();
});

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});
html * {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  margin: 0px;
  display: block;
  padding: 0;
}

td,
tr {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#imagesave {
  background-color: white;
  height: 637.5px;
  width: 825px;
  padding-left: 75px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>

<button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button>

<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="636"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="636"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="636"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="636"></canvas>
      </td>
    </tr>

  </table>

</div>

1 Ответ

2 голосов
/ 26 марта 2020

Ваши полотна fabri c испорчены изображениями, которые вы рисуете на нем; html2canvas , таким образом, не будет рисовать их, поскольку они также испортят получившийся холст.

Поскольку ваши изображения обслуживаются с соответствующими заголовками, решение состоит в том, чтобы запрашивать их с флагом crossOrigin.

Это можно сделать как в начальном вызове fabri c .Image 

fabric.Image.fromURL( url, callback, { crossOrigin: true } )

, так и в функции replaceImage 

image.setSrc( imgUrl, callback, { crossOrigin: true } );


var canvas = [],
  image;
var mainCanvas;
mainCanvas = new fabric.Canvas('c0');
for (i = 1; i <= 3; i++) {
  canvas[i] = new fabric.StaticCanvas('sc' + i);
}

function addText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
  });
  mainCanvas.add(text);
}

var rect = new fabric.Rect({
  fill: '#ff0000',
  width: 100,
  height: 100,
  id: 1
});
var circle = new fabric.Circle({
  fill: '#ffff00',
  radius: 50,
  left: 150,
  top: 150,
  originX: 'center',
  originY: 'center',
  id: 2
});

mainCanvas.on('object:added', onModified);
mainCanvas.on('object:modified', onModified);
mainCanvas.on('object:scaling', onModified);
mainCanvas.on('object:moving', onModified);
mainCanvas.add(rect, circle);

function onModified(option) {
  var ob = option.target;
  var index = mainCanvas.getObjects().indexOf(ob);
  ob.clone(function(obj) {
    for (i = 1; i <= 3; i++) {
      canvas[i].insertAt(obj, index, true);
    }
  });
};

$('#update').click(function() {
  updateCanvas();
});

function updateCanvas() {
  var json = JSON.stringify(mainCanvas);
  for (i = 1; i <= 3; i++) {
    canvas[i].loadFromJSON(json);
  }
}
// Toggling Images
function replaceImage(imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  image.setSrc(imgUrl, function() {
    mainCanvas.renderAll();
    updateCanvas();
  },{ crossOrigin: 'anonymous' } );
}

// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
  isImageLoaded = true;
  image = img.set({
    selectable: false,
    evented: false,
  });
  mainCanvas.add(image);
  mainCanvas.sendToBack(image);
  updateCanvas();
},{ crossOrigin: 'anonymous' });

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});
html * {
  margin: 0px;
  padding: 0px;
  background: white;
}

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  margin: 0px;
  display: block;
  padding: 0;
}

td,
tr {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#imagesave {
  background-color: white;
  height: 637.5px;
  width: 825px;
  padding-left: 75px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>

<button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button>

<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="636"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="636"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="636"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="636"></canvas>
      </td>
    </tr>

  </table>

</div>

Также обратите внимание, что ваша версия html2canvas довольно устарела, вы можете использовать одну последнюю версию , где много исправлены ошибки (но не эта проблема).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...