Javascript: Unterschied zwischen den Versionen

Version vom 4. Januar 2018, 14:27 Uhr

Bilder drehen

Um ein Bild zu drehen, muss man es in ein sog. "canvas" malen, das vorher gedreht wurde.
Eine Stolperfalle hierbei ist, dass sich beim Drehen das Koordinatensystem des canvas dreht, und man das beim malen des Bildes beachten muss:

// img sei ein HTMLImageElement, angle ein Winkel in Grad (0, 90, 180, 270)
function (img, angle)
{
  // Ergebnis-Canvas erzeugen.
  var targetCanvas = document.createElement("canvas");
  // Seitenverhältnis speichern.
  var imgRatio = img.width / img.height;
  // Je nach Drehung müssen Länge und Höhe des Canvas vertauscht werden.
  if (angle == 90 || angle == 270)
  {
    targetCanvas.width = img.height;
    targetCanvas.height = targetCanvas.width * imgRatio;
  }
  else
  {
    targetCanvas.width = img.width;
    targetCanvas.height = targetCanvas.width / imgRatio;
  }
  // Mitte des canvas berechnen, um das Koordinatensystem zentral zu drehen und nicht um die linke obere Ecke.
  var centerX = Math.round(targetCanvas.width / 2);
  var centerY = Math.round(targetCanvas.height / 2);
  var ctx = targetCanvas.getContext("2d");
  // Mitte des Canvas zu (0|0) machen!
  ctx.translate(centerX, centerY);
  // Drehung durchführen!
  ctx.rotate(angle/360 * 2 * Math.PI);
  // Die richtige Ecke des Canvas zu (0|0) machen.
  if (angle == 90 || angle == 270)
    ctx.translate(-centerY, -centerX);
  else
    ctx.translate(-centerX, -centerY);
  // Das Bild bei dem korrekt gesetzten (0|0) hineinzeichnen.
  ctx.drawImage(img, 0, 0);

  return targetCanvas.toDataUrl("image/jpeg");
}

Quelle: http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/
oder
Datei:CreativeJS - Drawing rotated images into canvas.pdf

CSV Erzeugen

Um aus einem Objektarray einen CSV-String zu erzeugen, kann man wie folgt vorgehen:

var objectArray = [ { Property1: "Value1", Property2: "Value2" }, { Property1: "Value3", Property2: "Value4" } ];
var header = Object.keys(objectArray[0]); // Take first object to represent the headers
var csvArray = objectArray.map(item => header.map(fieldName =>
{
  if (item[fieldName] === null)
    return ""; // Column with no content, not stringyfied.
  else if (typeof (item[fieldName]) == "number")
    return (<number>item[fieldName]).toLocaleString(); // Ensure that decimals get the correct (local) decimal point.
  else
    return JSON.stringify(item[fieldName]); // Stringyfy any other data type.
}
csvArray.unshift(header.join(';'));
var csvStr = csvArray.join('\r\n');

Download

Um einen Download in UTF-8 auszulösen mit Dateinamen-Vorschlag, geht man wie folgt vor:

var downloadURI = "data:text/csv;charset=utf-8,\uFEFF" + encodeURIComponent("TEXT...");
var downloadLink = document.createElement("a");
downloadLink.style.display = "none";
downloadLink.href = downloadURI;
if (typeof(downloadLink.download) == "string")
  downloadLink.download = "Dateiname.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

Hier wird ein HTML A-Element erzeugt, dem BODY hinzugefügt (muss für Firefox so sein), ausgelöst und anschließend wieder entfernt.

\uFEFF ist wichtig, damit die spätere Datei korrekt UTF-8 formatiert ist.

Für manche Browser ist "download" keine Eigenschaft eines A-Elementes. Hier kann der Dateiname nicht vorbelegt werden.

JSON Eigenschaft löschen

var objekt = { "id": 4, "name": "Test", "aktiv": true };

Soll die Eigenschaft "id" gelöscht werden, lautet der Befehl:

delete objekt.id;

Danach sieht das Objekt so aus:

{ "name": "Test", "aktiv": true }