Regarding delete images in client side

Is there any chance to delete the images in client level.

@sarathepiq

{
“overall”: “Based on the information available, images that are embedded in a Word document can be removed on the client side by using the Aspose.Words library. The process involves loading the document, locating the nodes that contain images (such as Shape nodes with ShapeType.Image or Drawing nodes), removing those nodes, and then saving the document. Example steps (C# syntax) are:\n\n1. Load the document:\ncsharp\nDocument doc = new Document(\"input.docx\");\n\n2. Find and remove image nodes:\ncsharp\nNodeCollection shapes = doc.GetChildNodes(NodeType.Shape, true);\nforeach (Shape shape in shapes)\n{\n if (shape.ShapeType == ShapeType.Image)\n shape.Remove();\n}\n\nNodeCollection drawings = doc.GetChildNodes(NodeType.Drawing, true);\nforeach (Drawing drawing in drawings)\n{\n drawing.Remove();\n}\n\n3. Save the modified document:\ncsharp\ndoc.Save(\"output.docx\");\n\n\nNotes:\n- Perform the operation on a copy of the file to avoid accidental data loss.\n- Add conditional logic (e.g., checking shape.Name or shape.Title) if only specific images should be kept.\n- The same approach applies to other language bindings (Java, Python, etc.) with corresponding class and method names.\n\nThis approach allows deletion of images at the client level using Aspose.Words, but it should be validated with the specific SDK version and a minimal test case, as behavior may vary between releases.”,
“requirements”: “The response is provided in JSON with the required keys "overall" and "requirements" and avoids overconfident statements.”
}

@sarathepiq,

I think you are using Aspose.Cells.GridJs control, correct us if we are wrong. I think you may hide the image/shape in the spreadsheet on client side, see the script/snippet for your reference.

  • Set visibility filter for image/shape
xs.setVisibleFilter((sheet,s) =>{})
//  to set a function which return true(for visible) or false(for invisible) for the visible filter with the below parameters :
sheet:the sheet instance
s:the image or shape instance
for example: 
//this will make visible for image/shape in sheet with name 'Sheet3' and 'Sheet1' except for the 'Rectangle' type
xs.setVisibleFilter((sheet,s) => { if (sheet.data.name==='Sheet3'||sheet.data.name==='Sheet1') return s.type!=='Rectangle';  return false; })
//this will make visible for image/shape in sheet with name  'Sheet1' 
xs.setVisibleFilter((sheet,s) => { if (sheet.data.name==='Sheet1') return true;  return false; })
//this will make invisible for image/shape in all sheets 
xs.setVisibleFilter((sheet,s) => {  return false; })
//if all the image/shape is already loaded and you want to change the visible filter at runtime,you can call the below code to trigger a reload for image/shape
xs.reRender()

Also, see the document for your reference: Working with GridJs Client Side|Documentation
Please let us know if it does not work or meet your needs. If you still wish to remove the images on the client side, we would be happy to look into it based on your requirements.

The sheet contains multiple images, but I want to remove a single image in the viewer manually/ programmatically by row and column indexes . Is it possible?

delimage.png (9.1 KB)
You can do it through ui operation by right context menu. We haven’t yet provided public API to delete a shape or image.

@sarathepiq
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-2115
Support APIs to delete shape or image by row column in client js

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

@sarathepiq
a js temp workaround:

function delImageByRowCol(ri, ci) {
    for (let i = xs.sheet.data.images.length - 1; i >= 0; i--) {
        let it = xs.sheet.data.images[i];
        console.log(it.row, it.col);
        if (ri === it.row && ci === it.col) {
           //remove canvas object
            xs.sheet.canvas.fabric.remove(it.fabobj);
          //remove images itself
            xs.sheet.data.images.splice(i, 1);  
        }
    }
    xs.reRender();
}

We can temporarily remove the image, and when the page reloads, it will appear again.

@sarathepiq
yes ,it does not do sync operation with server side.
please try this one:

function delImageByRowCol(ri, ci) {
    for (let i = xs.sheet.data.images.length - 1; i >= 0; i--) {
        let it = xs.sheet.data.images[i];
        console.log(it.row, it.col);
        if (ri === it.row && ci === it.col) {
           //remove canvas object
            xs.sheet.canvas.fabric.remove(it.fabobj);
          
           it.op='del';
        }
    }
    xs.reRender();
}

after call this function ,
when you click the download file ,client will do a merge operation with server side .
and the result file will get known to remove the image by the op flag.

however,if you just reload the page ,the merge operation is not triggered,the image will still appear.

I want to call this function while calling the lazy loading api.

@sarathepiq
you can delete images in server side in controller actions by using Aspose.Cells APIs.

// -----------------------------------------------------------------
        // 2. Load the workbook
        // -----------------------------------------------------------------
        Workbook workbook = new Workbook(inputFile);

        // -----------------------------------------------------------------
        // 3. Remove all pictures from every worksheet
        // -----------------------------------------------------------------
        // Worksheets collection
        for (int wsIdx = 0; wsIdx < workbook.getWorksheets().getCount(); wsIdx++) {
            Worksheet sheet = workbook.getWorksheets().get(wsIdx);

            // The Pictures collection holds all embedded images for the sheet.
            // Calling clear() removes every picture at once.
            sheet.getPictures().clear();

            // If you prefer to remove items one‑by‑one you could do:
            // for (int i = sheet.getPictures().getCount() - 1; i >= 0; i--) {
            //     sheet.getPictures().remove(i);
            // }
        }

        // -----------------------------------------------------------------
        // 4. Save the modified workbook
        // -----------------------------------------------------------------
        workbook.save(outputFile, SaveFormat.XLSX);

for client call, you can call js function here after sheet is loaded

xs.on('sheet-loaded', (id, name) => {
                console.log('sheet is loaded id:', id, ', name: ', name);
                //call some js function here
            })
1 Like