Managing Pictures with JavaScript via C++
Contents
[
Hide
]
Aspose.Cells allows developers to add pictures to spreadsheets at runtime. Moreover, the positioning of these pictures can be controlled at runtime, which is discussed in more detail in the coming sections.
This article explains how to add pictures and how to insert an image that shows the content of certain cells.
Adding Pictures
Adding pictures to a spreadsheet is very easy. It only takes a few lines of code:
Simply call the Add method of the Pictures collection (encapsulated in the Worksheet object). The Add method takes the following parameters:
- Upper left row index, the index of the upper left row.
- Upper left column index, the index of the upper left column.
- Image file name, the name of the image file, complete with path.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Add Picture to Workbook Example</h1>
<p>Select an optional Excel file to update (or leave empty to create a new workbook), and select an image file to insert as a picture.</p>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<input type="file" id="imageInput" accept="image/*" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const imageInput = document.getElementById('imageInput');
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
if (!imageInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an image file to insert.</p>';
return;
}
// Load existing workbook if provided, otherwise create a new one
let workbook;
if (fileInput.files.length) {
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Read image file bytes
const imageFile = imageInput.files[0];
const imageArrayBuffer = await imageFile.arrayBuffer();
const imageBytes = new Uint8Array(imageArrayBuffer);
// Adding a picture at the location of a cell whose row and column indices are 5 (F6)
worksheet.pictures.add(5, 5, imageBytes);
// Saving the Excel file (Excel 97-2003 .xls format)
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
resultDiv.innerHTML = '<p style="color: green;">Picture added successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Positioning Pictures
There are two possible ways to control the positioning of pictures using Aspose.Cells:
- Proportional positioning: define a position proportional to the row height and width.
- Absolute positioning: define the exact position on the page where the image will be inserted, for example, 40 pixels to the left and 20 pixels below the edge of the cell.
Proportional Positioning
Developers can position the pictures proportional to row height and column width using the upperDeltaX and upperDeltaY properties of the Picture object. A Picture object can be obtained from the Pictures collection by passing its picture index. This example places an image in the F6 cell.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells - Add Picture to New Workbook</h1>
<p>Select an image to insert into a new Excel workbook. The picture will be placed at cell F6 (row 5, column 5).</p>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<br/><br/>
<label for="imageInput">Select image to insert:</label>
<input type="file" id="imageInput" accept="image/*" />
<br/><br/>
<button id="runExample">Create Workbook and Add Picture</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const imageInput = document.getElementById('imageInput');
if (!imageInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an image file to insert.</p>';
return;
}
// Instantiate a new Workbook
const workbook = new Workbook();
// Add a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtain the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Read the selected image file as bytes
const imageFile = imageInput.files[0];
const arrayBuffer = await imageFile.arrayBuffer();
const imageBytes = new Uint8Array(arrayBuffer);
// Adding a picture at the location of a cell whose row and column indices are 5 (F6)
const pictureIndex = worksheet.pictures.add(5, 5, imageBytes);
// Accessing the newly added picture
const picture = worksheet.pictures.get(pictureIndex);
// Positioning the picture proportional to row height and column width (property assignments)
picture.upperDeltaX = 200;
picture.upperDeltaY = 200;
// Saving the Excel file (Excel 97-2003 format)
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and picture added successfully! Click the download link to get the file.</p>';
});
</script>
</html>
Absolute Positioning
Developers can also position the pictures absolutely by using the left and top properties of the Picture object. This example places an image in cell F6, 60 pixels from the left and 10 pixels from the top of the cell.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Add Picture</title>
</head>
<body>
<h1>Add Picture to Workbook Example</h1>
<p>Select an image file to insert into a new Excel workbook:</p>
<input type="file" id="fileInput" accept="image/*" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an image file.</p>';
return;
}
// Read image file as bytes
const imageFile = fileInput.files[0];
const arrayBuffer = await imageFile.arrayBuffer();
const imageBytes = new Uint8Array(arrayBuffer);
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding a picture at the location of a cell whose row and column indices are 5 in the worksheet ("F6")
const pictureIndex = worksheet.pictures.add(5, 5, imageBytes);
// Accessing the newly added picture
const picture = worksheet.pictures.get(pictureIndex);
// Absolute positioning of the picture in unit of pixels
picture.left = 60;
picture.top = 10;
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
resultDiv.innerHTML = '<p style="color: green;">Picture added successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Inserting a Picture Based on Cell Reference
Aspose.Cells lets you display the contents of a worksheet cell in an image shape. You can link the picture to the cell that contains the data that you want to display. Since the cell, or cell range, is linked to the graphic object, changes that you make to the data in that cell or cell range automatically appear in the graphic object.
Add a picture to the worksheet by calling the ShapeCollection.addPicture(number, number, number, number, Uint8Array) method of the ShapeCollection collection (encapsulated in the Worksheet object). Specify the cell range by using the formula attribute of the Picture object.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Aspose.Cells Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
// This example creates a new workbook, modifies cells and pictures, and saves it.
const workbook = new Workbook();
// Get the first worksheet's cells collection
const worksheet = workbook.worksheets.get(0);
const cells = worksheet.cells;
// Add string values to the cells
cells.get("A1").value = "A1";
cells.get("C10").value = "C10";
// Get pictures collection and add a blank picture to the D1 cell
const picts = worksheet.pictures;
const picIndex = picts.add(0, 3, 10, 6, null);
const pic = picts.get(picIndex);
// Specify the formula that refers to the source range of cells
pic.formula = "A1:C10";
// Update the shapes selected value in the worksheet
worksheet.shapes.updateSelectedValue();
// Save the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>