Lens

Google Lens is famous and powerful for image search. Users could use its fancy UI for image selection. I like its effect and wanna to apply it for services I owned. That's also the main reason I wrapped it into <msc-lens />.

Developers could received exactly the image which users just selected and do some analytics and recommend. Then render results through event which <msc-lens /> provided.

Check the following demos and see what can <msc-lens /> do.（first one comes with a preview window to indicate which part will send.）

lens image
lens preview
lens image
lens image tap me to switch image source

Basic Usage

<msc-lens /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-lens />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://your-domain/wc-msc-lens.js"> </script>

Structure

Put img[slot="msc-lens-vision"] inside <msc-lens /> as its child. It will use it as source.

<msc-lens> <script type="application/json"> { "sensorsize": 28, "active": false, "delay": 500, "format": "blob", "webservice": { "uri": "https://your-domain/analytic", "fieldName": "lens", "params": { "origin": "extra param you like", "id": "extra param you like" } }, "boundings": [ { "top": 42.998, "right": 11.8, "bottom": 5.652, "left": 35.987 } ] } </script> <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-lens />.

<msc-lens remoteconfig="https://your-domain/api-path"> <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

JavaScript Instantiation

<msc-lens /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscLens } from 'https://your-domain/wc-msc-lens.js'; const content = document.querySelector('img[slot="msc-lens-vision"]'); // use DOM api const nodeA = document.createElement('msc-lens'); nodeA.appendChild(content.cloneNode(true)); document.body.appendChild(nodeA); nodeA.webservice = { uri: 'https://your-domain/analytic', fieldName: 'lens', params: { origin: 'extra param you like', id: 'extra param you like' } }; // new instance with Class const nodeB = new MscLens(); nodeB.appendChild(content.cloneNode(true)); document.body.appendChild(nodeB); nodeB.webservice = { uri: 'https://your-domain/analytic', fieldName: 'lens', params: { origin: 'extra param you like', id: 'extra param you like' } }; // new instance with Class & default config const config = { sensorsize: 40, webservice: { uri: 'https://your-domain/analytic', fieldName: 'lens', params: { origin: 'extra param you like', id: 'extra param you like' } } }; const nodeC = new MscLens(config); nodeC.appendChild(content.cloneNode(true)); document.body.appendChild(nodeC); </script>

Style Customization

<msc-lens /> uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.

<style> msc-lens { --msc-lens-overlay-color: rgba(0,0,0,.5); --msc-lens-sensor-color: rgba(255,255,255,1); } </style>

Attributes

<msc-lens /> supports some attributes to let it become more convenience & useful.

sensorsize

Set sersor size for <msc-lens />. Default is 28 (px).

<msc-lens sensorsize="28" > <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

active

Set active for <msc-lens />. It will switch to select mode once set. Default is false (not set).

<msc-lens active > <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

delay

Set delay for <msc-lens />. It will delay fetch web service once user finish select. Default is 500 (ms).

<msc-lens delay="500" > <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

format

Set image format for <msc-lens />. This attribute can only accept "blob" or "dataURL". Default is "blob".

<msc-lens format="blob" > <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

webservice

Set web service information for <msc-lens />. It should be JSON string. Developers could set uri、fieldName and extra params here.（uri must be full path）

<msc-lens webservice='{"uri":"https://your-domain/analytic","fieldName":"lens","params":{"origin":"extra param you like","id":"extra param you like"}}' > <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

boundings

Set boundings information for <msc-lens />. Developers could defined objects' bounding information through this. Each unit should be JSON string and required top、right、bottom、left（percentage）. When <msc-lens /> active, there will be some indicators display.

boundings <msc-lens boundings='[{"top":42.998,"right":11.8,"bottom":5.652,"left":35.987}]' > <img src="https://picsum.photos/id/635/1000/670" slot="msc-lens-vision" /> </msc-lens>

Properties

Property Name Type Description
sensorsize Number Getter / Setter for senser size. Developers could use this property to setup sensor size.
active Boolean Getter / Setter for active. It will switch to select / normal mode.
delay Number Getter / Setter for delay. It will delay fetch web service once user finish select.
format String Getter / Setter for format. It will set image format. This property can only accept "blob" or "dataURL". Default is "blob".
webservice Object Getter / Setter for web service information. Developers could set uri、fieldName and extra params here.（uri must be full path）
boundings Object Getter / Setter for object bounding information. Developers could defined objects' bounding information in top、right、bottom、left.（percentage）

Method

Methos Signature Description
toggle([force]) Toggle <msc-lens /> select or normal mode. When argument is present: If the argument is true, <msc-lens /> will switch to select mode, and if it is false, back to normal.
switchSource(source-address) Switch <msc-lens /> image source.（this is an async method）

Events

Event Signature Description
msc-lens-switch Fired when <msc-lens /> mode switched. Developers could get active through event.detail.
msc-lens-capture Fired when <msc-lens /> captures image selection. Developers could get image、bounding through event.detail.
msc-lens-process Fired when <msc-lens /> fetch web service.
msc-lens-switching Fired when <msc-lens /> switch image source.
msc-lens-switchend Fired when <msc-lens /> switch image source end.
msc-lens-result Fired when <msc-lens /> finished web service fetching. Developers could get result through event.detail.

Reference