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.
<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><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><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><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.
<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>| 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 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） |
| 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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent