# Replace sticker background image We can use the [willRenderShapeControls](../../api/markup-editor/properties/#willrendershapecontrols) property to add a "select image" button above a sticker shape. We'll use a custom `browse()` function to select a new image from the file sytem. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) ```html
``` * [App.jsx](#App-jsx-panel-0) * [App.css](#App-css-panel-0) ```jsx import '@pqina/pintura/pintura.css'; import './App.css'; import { useRef, useState } from 'react'; import { PinturaEditor } from '@pqina/react-pintura'; import { getEditorDefaults, createNode } from '@pqina/pintura'; const editorDefaults = getEditorDefaults(); const browse = (options) => { return new Promise((resolve) => { const element = document.createElement('input'); element.type = 'file'; element.accept = options.accept; element.onchange = () => { const [file] = element.files; if (!file) return resolve(); resolve(file); }; element.click(); }); }; function App() { const [editorResult, setEditorResult] = useState(undefined); const editorRef = useRef(null); const willRenderShapeControls = (controls, selectedShapeId) => { controls[0][3].push( // Add a "Select image" button createNode('Button', 'my-button', { label: 'Select image', onclick: async () => { // Find the currently selected shape const annotations = editorRef.current.editor.imageAnnotation; const shape = annotations.find( (shape) => shape.id === selectedShapeId ); // browse for an image const file = await browse({ accept: 'image/*', }); // no file selected if (!file) return; // update background image shape.backgroundImage = URL.createObjectURL(file); // redraw annotations editorRef.current.editor.imageAnnotation = annotations; }, }) ); return controls; }; const handleEditorProcess = (imageState) => { setEditorResult(URL.createObjectURL(imageState.dest)); }; return (
{editorResult && }
); } export default App; ``` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-0) ```html ``` * [App.svelte](#App-svelte-panel-0) ```svelte
{#if editorResult} {/if}
``` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.component.css](#app-component-css-panel-0) * [app.module.ts](#app-module-ts-panel-0) ```javascript import { Component, ViewChild } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { getEditorDefaults, createNode, PinturaNode } from '@pqina/pintura'; const browse = (options: { accept: string }): Promise => { return new Promise((resolve) => { const element = document.createElement('input'); element.type = 'file'; element.accept = options.accept; element.onchange = () => { const [file] = element.files; if (!file) return resolve(); resolve(file); }; element.click(); }); }; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { constructor(private domSanitizer: DomSanitizer) {} @ViewChild('editor') editor?: any; editorResult?: string = undefined; editorDefaults: any = getEditorDefaults(); imageAnnotation: any = [ { x: 128, y: 128, width: 512, height: 384, backgroundSize: 'contain', backgroundImage: './my-sticker.jpeg', }, ]; willRenderShapeControls = ( controls: PinturaNode[], selectedShapeId: string ): PinturaNode[] => { controls[0][3].push( // Add a "Select image" button createNode('Button', 'my-button', { label: 'Select image', onclick: async () => { // Find the currently selected shape const annotations = this.editor.editor.imageAnnotation; const shape = annotations.find( (shape) => shape.id === selectedShapeId ); // browse for an image const file = await browse({ accept: 'image/*', }); // no file selected if (!file) return; // update background image shape.backgroundImage = ( this.domSanitizer.bypassSecurityTrustResourceUrl( URL.createObjectURL(file) ) ); // redraw annotations this.editor.editor.imageAnnotation = annotations; }, }) ); return controls; }; handleEditorProcess(imageState: any): void { this.editorResult = ( this.domSanitizer.bypassSecurityTrustResourceUrl( URL.createObjectURL(imageState.dest) ) ); } } ``` ```html ``` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularPinturaModule } from '@pqina/angular-pintura'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AngularPinturaModule], exports: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` * [index.html](#index-html-panel-0) ```html
```