Cropped images from sheets based on RangeCell

Cropped images from sheets based on RangeCell

Posted by: ricardo.aleixo on 16 November 2023, 8:04 am EST

• 

  ricardo.aleixo

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 November 2023, 8:04 am EST

  Hi.

  I wanna know if i can crop a image based on a range?
  
  For exemple:
  
  select A1:B6, then generate a crop of this range, if is possible in a SVG type.

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 17 November 2023, 8:24 am EST

  Hi,

  As I can understand, you want to create an image from a cell range on the sheet. For this, you can use the cellRange.toHtml() method to get the html table string for the specified cell range. The html of table can be used to create the SVG image.

  Please refer to the code snippet below and the attached sample for more understanding.

  // returns blob of svg of cell range
  function getCellRangeSvg(sheet, range) {
      let htmlString = sheet.getRange(range.row, range.col, range.rowCount, range.colCount).toHtml(GC.Spread.Sheets.HeaderOptions.noHeaders, true);
  
      let height = getCellRangeHeight(sheet, range), width = getCellRangeWidth(sheet, range);
      const svg = `
              <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
              <foreignObject width="100%" height="100%">
                  <div xmlns="http://www.w3.org/1999/xhtml">${htmlString}</div>
              </foreignObject>
              </svg>
          `;
  
      const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
      return svgBlob;
  }

  sample: https://jscodemine.grapecity.com/share/k9dbZMjPH0qJAqRyxbdbYg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  If you face any issues, please let us know.

  References:

  cellRange.toHtml(): https://developer.mescius.com/spreadjs/api/v16/classes/GC.Spread.Sheets.CellRange#tohtml

  Regards