Picture

This sample shows how you can customize a picture, including the picture layout, the picture's border, and so on.

If you want to set an image to the picture or change the picture's image, use the src method to change the image. The picture's src can be a base64 image. You can change the picture's layout using the pictureStretch method. Stretch for the picture is defined by the ImageLayout enumeration. Sometimes you can get the image's original size using getOriginalWidth and getOriginalHeight methods. You can add a border to the picture; the border is set as the DOM's border setting. For example: Sometimes part of the picture is transparent, in which case you want to set a backColor for the background area. Use the backColor method to get and set the background color of the picture. For example:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); var picture = sheet.pictures.add("f2", "$DEMOROOT$/spread/source/images/spreadLogo.png", 50, 50, 100, 100); picture.backColor("black"); document.getElementById('pictureStretch').onchange = function (e) { var sheet = spread.getActiveSheet(); var pictures = sheet.pictures.all(); var stretch = parseInt(e.target.value); if (pictures) { for (var index = 0, len = pictures.length; index < len; index++) { var picture = pictures[index]; if (picture.isSelected()) { picture.pictureStretch(stretch); } } } }; document.getElementById('borderStyle').onchange = function (e) { var sheet = spread.getActiveSheet(); var pictures = sheet.pictures.all(); var borderStyle = e.target.value; if (pictures) { for (var index = 0, len = pictures.length; index < len; index++) { var picture = pictures[index]; if (picture.isSelected()) { picture.borderStyle(borderStyle); } } } }; document.getElementById('set').onclick = function () { var sheet = spread.getActiveSheet(); var pictures = sheet.pictures.all(); var borderColor = document.getElementById('borderColor').value; var borderWidth = parseFloat(document.getElementById('borderWidth').value); var borderStyle = document.getElementById('borderStyle').value; var borderRadius = parseFloat(document.getElementById('borderRadius').value); var backColor = document.getElementById('backColor').value; var pictureStretch = parseInt(document.getElementById('pictureStretch').value); if (pictures) { for (var index = 0, len = pictures.length; index < len; index++) { var picture = pictures[index]; if (picture.isSelected()) { picture.borderColor(borderColor); picture.borderWidth(borderWidth); picture.borderStyle(borderStyle); picture.borderRadius(borderRadius); picture.backColor(backColor); picture.pictureStretch(pictureStretch); } } } sheet.repaint(); }; document.getElementById('resetPicture').onclick = function () { var sheet = spread.getActiveSheet(); var pictures = sheet.pictures.all(); if (pictures) { for (var index = 0, len = pictures.length; index < len; index++) { var picture = pictures[index]; if (picture.isSelected()) { var originalWidth = picture.getOriginalWidth(); var originalHeight = picture.getOriginalHeight(); if (originalWidth > 0 && originalHeight > 0) { picture.width(originalWidth); picture.height(originalHeight); } } } } sheet.repaint(); }; };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <p class="desc">Select the picture in the Spread component and change it using these options</p> </div> <div class="option-row"> <label for="borderColor">Border Color:</label> <input type="text" id="borderColor" /> </div> <div class="option-row"> <label for="borderWidth">Border Width:</label> <input type="text" id="borderWidth" /> </div> <div class="option-row"> <label for="borderRadius">Border Radius:</label> <input type="text" id="borderRadius" /> </div> <div class="option-row"> <label for="backColor">Back Color:</label> <input type="text" id="backColor" /> </div> <div class="option-row"> <label>Border Style:</label> <select id="borderStyle"> <option value="solid" selected="selected">solid</option> <option value="dotted">dotted</option> <option value="dashed">dashed</option> <option value="double">double</option> <option value="groove">groove</option> <option value="ridge">ridge</option> <option value="inset">inset</option> <option value="outset">outset</option> </select> </div> <div class="option-row"> <label>Picture Stretch:</label> <select id="pictureStretch"> <option value="0" selected="selected">Stretch</option> <option value="1">Center</option> <option value="2">Zoom</option> <option value="3">None</option> </select> </div> <div class="option-row"> <input type="button" id="set" value="Set" /> <input type="button" id="resetPicture" value="Reset to original size" /> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 5px; } select, input { padding: 4px 6px; box-sizing: border-box; margin-top: 6px; width: 100%; } .desc{ padding:2px 10px; background-color:lavender; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }