Управление изображениями с помощью JavaScript через C++
Contents
[
Hide
]
Aspose.Cells позволяет разработчикам добавлять изображения в электронные таблицы во время выполнения. Более подробно об этом будет рассказано в следующих разделах.
В этой статье объясняется, как добавлять изображения и как вставлять изображение, показывающее содержимое определённых ячеек.
Добавление изображений
Добавление изображений в электронную таблицу очень просто. Нужно лишь несколько строк кода:
Просто вызовите метод Add коллекции Pictures (обёрнутой в объект Worksheet). Метод Add принимает следующие параметры:
- Индекс верхнего левого ряда, индекс верхнего левого ряда.
- Индекс верхнего левого столбца, индекс верхнего левого столбца.
- Имя файла изображения, имя файла изображения с полным путем.
<!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>
Позиционирование изображений
Существует два возможных способа контроля позиционирования изображений с помощью Aspose.Cells:
- Пропорциональное позиционирование: определение положения пропорционально высоте и ширине строки.
- Абсолютное позиционирование: задайте точное расположение на странице, например, 40 пикселей слева и 20 пикселей ниже края ячейки.
Пропорциональное позиционирование
Разработчики могут позиционировать изображения пропорционально высоте строки и ширине столбца, используя свойства upperDeltaX и upperDeltaY объекта Picture. Объект Picture может быть получен из коллекции Pictures по индексу изображения. Этот пример размещает изображение в ячейке F6.
<!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>
Абсолютное позиционирование
Разработчики также могут абсолютно позиционировать изображения, используя свойства left и top объекта Picture. Этот пример размещает изображение в ячейке F6, на 60 пикселей слева и 10 пикселей сверху относительно ячейки.
<!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>
Вставка изображения на основе ссылки на ячейку
Aspose.Cells позволяет отображать содержимое ячейки листа в виде изображения. Можно связать изображение с ячейкой, содержащей данные, которые нужно отобразить. Поскольку ячейка или диапазон ячеек связаны с графическим объектом, изменения, внесенные в данные в этой ячейке или диапазоне ячеек, автоматически отобразятся в графическом объекте.
Добавьте изображение на лист, вызвав метод ShapeCollection.addPicture(number, number, number, number, Uint8Array) коллекции ShapeCollection (обёрнутой в объект Worksheet). Укажите диапазон ячеек с помощью атрибута formula объекта Picture.
<!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>