FREE POLYCARBONATE SINGLE VISION LENSES WITH ANTI-GLARE

FREE POLYCARBONATE SINGLE VISION LENSES WITH ANTI-GLARE

(function(){ let w = window.innerWidth; function setHeaderCssVar() { const headerEle = document.getElementById('shoplaza-section-header'); if(!headerEle){ return }; document.body.style.setProperty('--window-height', `${window.innerHeight}px`); document.body.style.setProperty('--header-height', `${headerEle.clientHeight}px`); const mdScorllHideEle = headerEle.querySelector('.header__mobile .header__scroll_hide'); if (mdScorllHideEle) { document.body.style.setProperty('--header-scroll-hide-height-md', `${mdScorllHideEle.clientHeight}px`); } const pcScorllHideEle = headerEle.querySelector('.header__desktop .header__scroll_hide'); if (pcScorllHideEle) { document.body.style.setProperty('--header-scroll-hide-height-pc', `${pcScorllHideEle.clientHeight}px`); } } function handlResize() { if(w == window.innerWidth){return}; w = window.innerWidth; setHeaderCssVar(); }; function init(){ setHeaderCssVar(); window.removeEventListener('resize', window._theme_header_listener) window._theme_header_listener = handlResize; window.addEventListener('resize', window._theme_header_listener); } init(); })();

NOSTLGC

131 Products

Filter

NOSTLGC ADELINA

+2

NOSTLGC ALISON

+2

NOSTLGC ALIZE

+1

NOSTLGC ALLEN POE

NOSTLGC ALONSO

+1

NOSTLGC ALWIN

+2

NOSTLGC AMAYA

+3

NOSTLGC ANDOR

+1

NOSTLGC ANDREW

NOSTLGC ANGIE

NOSTLGC ANKE

+2

NOSTLGC ANNIE

+2

NOSTLGC ANTARES

NOSTLGC ASHLEY

+2

NOSTLGC ATLAS

+2

NOSTLGC AUDREY

+2

NOSTLGC BAILEY

+2

NOSTLGC BENJAMIN

+2

NOSTLGC BENNET

+2

NOSTLGC BLAIR

+2

NOSTLGC BLANCA

+1

NOSTLGC BRADLY

+1

NOSTLGC BRANDON

+2

NOSTLGC BRAXTON

+2

NOSTLGC BROOKS

+2

NOSTLGC BRUNETTE

+2

NOSTLGC BUD

+1

NOSTLGC CADEN

+3

NOSTLGC CALI

+3

NOSTLGC CAMERON

+3

NOSTLGC CAMILO

+3

NOSTLGC CAMPOS

+2

NOSTLGC CANON

+3

NOSTLGC CANTON

+3

NOSTLGC CAPRI

+2

NOSTLGC CARLA

+2

NOSTLGC CARTER

+3

NOSTLGC CASH

+2

NOSTLGC CASSIE

+3

NOSTLGC CASTRO

+2

NOSTLGC CECILIA

+2

NOSTLGC CEDRIC

+3

NOSTLGC CHAD

+3

NOSTLGC CHANDLER

+3

NOSTLGC CHASE

+3

NOSTLGC CHELSEA

+3

NOSTLGC CHERISH

+3

NOSTLGC CHERRY

+3

NOSTLGC CHESTER

+3

NOSTLGC CHIKA

+3

NOSTLGC CINDY

+2

NOSTLGC CLAIR

+3

NOSTLGC CLAUDIA

+2

NOSTLGC CLEMENT

+3

NOSTLGC CLIFFORD

+2

NOSTLGC COLLEEN

+3

NOSTLGC COLTRANE - LIMITED

NOSTLGC CONNIE

+3

NOSTLGC CONNOR

+2

NOSTLGC CORNELL

+3

NOSTLGC COURTNEY

+3

NOSTLGC LILITH

+2

NOSTLGC LUCA B701 - LIMITED

+2

NOSTLGC LUCA B702 - LIMITED

+1

NOSTLGC LUCA B703 - LIMITED

+2

NOSTLGC MARIAN M801-LIMITED

+2

NOSTLGC MARIAN M802-LIMITED

+2

NOSTLGC MARIAN M803-LIMITED

+2

NOSTLGC MARIAN M804-LIMITED

+2

NOSTLGC MARIAN M805-LIMITED

+3

NOSTLGC MARIAN M806-LIMITED

+3

NOSTLGC MARIAN M807-LIMITED

+2

NOSTLGC MICHAEL

+2

NOSTLGC MIRIAM

+3

NOSTLGC NEIL

NOSTLGC RUFUS

+2

NOSTLGC SABINE

NOSTLGC SAL

+3

NOSTLGC SALOMON

+2

NOSTLGC SAMSON

+2

Shop NOSTLGC Eyewear | Designer Sunglasses & Glasses | BlakSpecs

Explore the innovative NOSTLGC eyewear collection, where cutting-edge design meets impeccable craftsmanship. Featuring a bold range of sunglasses and eyeglasses, NOSTLGC combines modern aesthetics with advanced technology to deliver eyewear that stands out. Each piece is crafted with precision, offering unique style and unmatched quality. Discover frames that not only enhance your look but also ensure superior comfort and vision clarity. Enjoy FREE polycarbonate single vision lenses with anti-glare, blending style with functionality.

Subscribe today to hear first about our sales.

1-516-962-5985

customer.support@blakspecs.com

1-516-962-5985

customer.support@blakspecs.com

© 2024 BlakSpecs

const TryonTypeMap = { BATCH: 'tryonAll', SINGLE: 'tryonSingle' } class SpzTryonComponent extends SPZ.BaseElement { constructor(element) { super(element); this.settings_ = null; this.mdOverflow = undefined; this.variant_id = ''; } static deferredMount() { return false; } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER; } buildCallback() { this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setAction_(); const tryonLocalList = localStorage.getItem('tryon_local_list'); const localData = (tryonLocalList && tryonLocalList != 'undefined') ? JSON.parse(tryonLocalList) : []; this.local_list = localData; } mountCallback() { document.addEventListener('dj.variantChange', (event) => { const variant = event.detail.selected; this.variant_id = variant.id; if (variant.product_id == '') { if (!this.settings_) { this.getSettings().then((data) => { this.showBtn(); }); } else { this.showBtn(); } } }); if (!this.settings_) { this.getSettings().then((data) => { this.showBtn(); }); } else { this.showBtn(); } } getSettings () { return this.xhr_.fetchJson('/api/whiteant/setting') .then((data) => { data.model_list = this.local_list.concat(data.model_image_enable ? data.applyed_face_model_images : []); this.settings_ = data; document.documentElement.style.setProperty('--tryon-custom-color', data.color_style); return data; }) .catch((err) => { console.log(err); }) } showBtn() { if (this.settings_ && this.settings_.product_page_tryon_enable) { this.getVariantMeta(this.variant_id).then((meta) => { const preview_mode = location.search.replace('?', '').split('&').find(v => v.includes('preview_mode')); const isCanPreview = preview_mode && meta?.metafields[0]; if ((meta && meta.metafields && meta.metafields.length && meta.metafields[0].value) || isCanPreview) { this.toggleTryonBtn(true); } else { this.toggleTryonBtn(false); } }); } } getVariantMeta(id) { return this.xhr_.fetchJson('/api/front/metafields/product_variant/batch?namespace=tryon&key=tryon_switch&owner_ids=' + id) .then((data) => { return data; }) .catch((err) => { console.log(err); }); } handlePopupExpose_ = async() => { const cattleUtilApi = await SPZ.whenApiDefined(document.getElementById('spz_custom_cattle_util')); cattleUtilApi.impressListen('#tryon_modal',function(){ const {template_name} = window.SHOPLAZZA.meta.page; const pageMap = { collection: { card_name:'product_list' }, product: { card_name:'product_img' } } const eventParams = { ...commonTrackData, event_type: "popup_expose", card_name: pageMap[template_name]?.card_name, event_developer: "jozy", event_info: JSON.stringify({ action_type: 'glass_try_on', popup_name: "tryon_popup", product_id: '', from_element_type: "button", from_element_name: "try_on" }) } window.sa && window.sa.track("function_expose", eventParams); window.spzutm && window.spzutm.registerParams('add_to_cart', eventParams ); }) } toggleTryonBtn(visible = true) { const that = this; const container = document.querySelector('.product-main-images-container'); let btnContainer = document.getElementById('tryon_product_image_btn'); if (container && !btnContainer) { const tryonBtn = document.createElement('div'); tryonBtn.id = 'tryon_product_image_btn'; tryonBtn.style.position = 'absolute'; tryonBtn.style.right = '8px'; tryonBtn.style.top = '8px'; tryonBtn.style.background = this.settings_.color_style; tryonBtn.style.padding = '3px 12px'; tryonBtn.style.borderRadius = '200px'; tryonBtn.style.color = 'white'; tryonBtn.style.zIndex = 1; tryonBtn.style.cursor = 'pointer'; const tryonImg = new Image(); tryonImg.src = 'https://static.staticdj.com/oss/operation/a15007c50c67bd3ec7cd3474bd7e397c.png'; tryonImg.width = 12; tryonImg.height = 9; tryonImg.style.marginRight = '8px'; tryonImg.alt = ''; tryonBtn.append(tryonImg); tryonBtn.append('Try on'); container.appendChild(tryonBtn); btnContainer = document.getElementById('tryon_product_image_btn'); btnContainer && btnContainer.addEventListener('click', function(e) { const eventParams = { ...commonTrackData, event_type: "click", card_name: 'product_img', event_developer: "jozy", event_info: JSON.stringify({ action_type: 'glass_try_on', element_type: "button", element_name: "try_on", product_id: '' }) } window.sa && window.sa.track('function_click', eventParams); const renderEl = document.getElementById('tryon_modal_render'); SPZ.whenApiDefined(renderEl).then((api) => { api.render({ settings: that.settings_, variant_id: that.variant_id, product_id: '' }, true).then((data) => { that.handlePopupExpose_(); const modalEl = document.getElementById('tryon_modal'); SPZ.whenApiDefined(modalEl).then((modal) => { modal.open(); }); const pdValueEl = document.getElementById('tryon_pd_input'); pdValueEl && pdValueEl.addEventListener('blur',function(e) { that.handlePdValidate(e.target); }) }); }); const videoFailRenderEl = document.getElementById('tryon_video_failed_modal_render'); SPZ.whenApiDefined(videoFailRenderEl).then((api) => { api.render({ settings: that.settings_ }, true); }); }); } if(btnContainer) { btnContainer.style.display = visible ? 'block' : 'none'; } } async handlePdValidate(data) { const inputEl = document.getElementById('tryon_pd_input'); const valideValue = data.value.replace(/^(\d+)\.(\d\d).*$/,'$1.$2'); inputEl.value = valideValue; inputEl.setAttribute('value', valideValue); if (data.valueAsNumber === 0 && data.value !== '') { inputEl.setAttribute('error', undefined); } else { inputEl.removeAttribute('error'); // 当前模特图为空,则不需render glasses const $tryonModeList = document.querySelector('#tryon_model_list'); const modelApi = await SPZ.whenApiDefined($tryonModeList); const modelImgUrl = modelApi.getCurrentModelImg(); if(!modelImgUrl) { return; } // 获取当前试戴类型批量试戴/单个试戴 const tryonUtil = document.querySelector('#tryon-actions'); const tryonUtilApi = await SPZ.whenApiDefined(tryonUtil); const tryonType = tryonUtilApi.getTryonType(); if(tryonType == TryonTypeMap.BATCH) { const batchFrame = document.querySelector('#batch-tryon-frame-actions'); batchFrame && SPZ.whenApiDefined(batchFrame).then((api) => { api.scaleGlasses((62 / (data.valueAsNumber || 62)).toFixed(2)); }); } else { const frame = document.querySelector('#tryon-frame-actions'); frame && SPZ.whenApiDefined(frame).then((api) => { api.scaleGlasses((62 / (data.valueAsNumber || 62)).toFixed(2)); }); } } } setAction_() { this.registerAction('modalOpen', (detail) => { const inputEl = document.getElementById('tryon_pd_input'); if (inputEl) { inputEl.addEventListener("keypress", function (evt) { if (!(evt.which == 46 || (evt.which >= 48 && evt.which <= 57))) { evt.preventDefault(); } }); } }); this.registerAction('modalClose', (detail) => { }); this.registerAction('pd_validate', (detail) => { const data = detail.args.data; this.handlePdValidate(data); }); this.registerAction('pd_resetColor', (detail) => { const data = detail.args.data; const inputEl = document.getElementById('tryon_pd_input'); if (data.valueAsNumber === 0 && data.value !== '') { inputEl.setAttribute('error', undefined); } else { inputEl.removeAttribute('error'); } }); this.registerAction('goToMessure', () => { const {template_name} = window.SHOPLAZZA.meta.page; const pageMap = { collection: { card_name:'product_list' }, product: { card_name:'product_img' } } const productId = document.querySelector('#tryon_sku_list')?.getAttribute('product_id'); const eventParams = { ...commonTrackData, event_type: "popup_click", card_name: pageMap[template_name]?.card_name, event_developer: "jozy", event_info: JSON.stringify({ action_type: 'glass_try_on', popup_name: "tryon_popup", product_id: productId, element_type: "button", element_name: "pd_measure" }) } window.sa && window.sa.track('function_click', eventParams); window.open("https://img.staticdj.com/oss/operation/22644ecb502da5f078dfabbeee7a069e.pdf", "_blank"); }); this.registerAction('setFrameOverflow', (detail) => { if (window.innerWidth > 960) { return; } const force = detail.args.force; if (force === undefined && this.mdOverflow) { return; } const container = document.querySelector('#tryon_frame_model'); const scrollHeight = container.scrollHeight; const clientHeight = container.clientHeight; if (force === true) { container.style.overflowY = 'scroll'; } else if (force === false) { container.style.overflowY = this.mdOverflow; } else if (force === undefined) { this.mdOverflow = scrollHeight > clientHeight ? 'scroll' : 'hidden'; container.style.overflowY = this.mdOverflow; } else if (force === 'update') { setTimeout(() => { const scrollHeight = container.scrollHeight; const clientHeight = container.clientHeight; const mdOverflow = scrollHeight > clientHeight ? 'scroll' : 'hidden'; container.style.overflowY = mdOverflow; }, 500) } }); } } SPZ.defineElement('spz-custom-tryon', SpzTryonComponent);

const TAG = 'spz-custom-cattle-util'; class SpzCustomTryonUtils extends SPZ.BaseElement { constructor(element) { super(element); } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); } mountCallback = () => { } impressListen(selector, cb) { const el = document.querySelector(selector); const onImpress = (e) => { if (e) { e.stopPropagation(); } cb(); }; if (el && !el.getAttribute('imprsd')) { el.addEventListener('impress', onImpress) } else if (el) { onImpress(); } } saTrackUpload_(data) { const element_name = data.type === 'photo'? 'take_photo' : 'upload_picture'; const {template_name} = window.SHOPLAZZA.meta.page; const pageMap = { collection: { card_name:'product_list' }, product: { card_name:'product_img' } } const productId = document.querySelector('#tryon_sku_list')?.getAttribute('product_id'); const eventParams = { ...commonTrackData, event_type: "popup_click", card_name: data.cardName || pageMap[template_name]?.card_name, event_developer: "jozy", event_info: JSON.stringify({ action_type: 'glass_try_on', popup_name: "tryon_popup", element_type: "button", element_name, product_id: productId }) } window.sa && window.sa.track('function_click', eventParams); } setupAction_ = () => { this.registerAction('updatePdInputValue', (detail) => { const data = detail.args; const value = data.value; this.updatePdInputValue(value); }); this.registerAction('saTrackUpload', (detail) => { const data = detail.args; this.saTrackUpload_(data); }); } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, `${ TAG }.${ name }`, data || {}); this.action_.trigger(this.element, name, event); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER; } } SPZ.defineElement(TAG, SpzCustomTryonUtils)

const TAG = 'spz-custom-tryon-actions'; const TryonTypeMap = { BATCH: 'tryonAll', SINGLE: 'tryonSingle' } class SpzCustomTryonUtils extends SPZ.BaseElement { constructor(element) { super(element); this.tryonType = TryonTypeMap.SINGLE; this.pdInputValue = 62; } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); } mountCallback = () => { } getTryonType() { return this.tryonType; } updateTryonType(tryonType) { if(tryonType) { this.tryonType = tryonType; } } getPdValue() { return this.pdInputValue; } updatePdInputValue(value) { this.pdInputValue = value; } setupAction_ = () => { this.registerAction('updateTryonType', (detail) => { const data = detail.args; const tryonType = data.type; this.updateTryonType(tryonType); }); this.registerAction('updatePdInputValue', (detail) => { const data = detail.args; const value = data.value; this.updatePdInputValue(value); }); } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, `${ TAG }.${ name }`, data || {}); this.action_.trigger(this.element, name, event); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER; } } SPZ.defineElement(TAG, SpzCustomTryonUtils)

const TAG = 'spz-custom-tryon-file-upload'; class SpzCustomFileUpload extends SPZ.BaseElement { constructor(element) { super(element); this.file_ = ""; this.file_input_ = null; this.input_file_image_delete_ = null; this.input_file_content_ = null; this.nput_file_image_content_ = null; this.input_file_image_ = null; this.input_file_image_img_ = null; this.prescription_image = null; this.xhr_ = SPZServices.xhrFor(this.win); this.whenInitialized_ = Promise.resolve(); } static deferredMount() { return false; } onDocumentState = (doc, stateFn, callback) => { let ready = stateFn(doc); if (ready) { callback(doc); } else { const readyListener = () => { if (stateFn(doc)) { if (!ready) { ready = true; callback(doc); } doc.removeEventListener('readystatechange', readyListener); } }; doc.addEventListener('readystatechange', readyListener); } } isDocumentReady = (doc) => { return doc.readyState != 'loading' && doc.readyState != 'uninitialized'; } whenReadyFuc = () => { return new Promise((resolve) => { this.onDocumentState(window.document,this.isDocumentReady,resolve) }); } buildCallback = () => { this.whenInitialized_ = this.whenReadyFuc().then(() => { this.file_input_ = SPZCore.Dom.scopedQuerySelector( this.element, '#cattle_file_upload' ); this.registerAction('delete', (invocation) => { this.handleDelete_(); }); this.registerAction('imageShow', (invocation) => { const data = invocation && invocation.args && invocation.args.data || {}; }); this.file_input_ && SPZUtils.Event.listen(this.file_input_, 'change', this.handleChange_); }); } isLayoutSupported = (layout) => { return layout == SPZCore.Layout.CONTAINER; } doRender_ = (data) => { return this.templates_ .findAndRenderTemplate(this.element, data) .then((el) => { const children = this.element.querySelector('*:not(template)'); children && SPZCore.Dom.removeElement(children); this.element.appendChild(el); this.container_ = el; }); } handleChange_ = (e)=> { this.file_ = e.target.files[0]; let type = ["image/png","image/jpeg","image/jpg", "image/bmp", "image/ttf"]; if (this.file_ && type.includes(this.file_.type)) { if (this.file_.size > 5242880) { const toast = SPZCore.Dom.scopedQuerySelector(document, "#tryon_toast"); toast && SPZ.whenApiDefined(toast).then((api) => { api.showToast('File size exceeds 5MB, please change to a smaller one.') }); this.file_input_.value = ""; return; } this.compressorImageFile(this.file_); } else if(this.file_ ) { const toast = SPZCore.Dom.scopedQuerySelector(document, "#tryon_toast"); toast && SPZ.whenApiDefined(toast).then((api) => { api.showToast('File format not supported.') }); this.file_input_.value = ""; return; } } compressorImageFile(file) { const fileThis = file; const that = this; if (fileThis.size > 2 * 1024 * 1024) { let quality = 0.4; new Compressor(fileThis, { quality: quality, maxWidth: 800, maxHeight: 800, success: (result) => { result = new File([result], fileThis.name, {type: fileThis.type, lastModified: Date.now()}); that.file_ = result; that.uploadImage_(); }, error(err) { console.error('compressor err', err); } }); } else { that.uploadImage_(); } } uploadImage_ = ()=> { var objectName = window.SHOPLAZZA.shop.shop_id + "/" + (new Date()).getTime() + "." + this.file_.name.split(".").pop(); var that = this; this.xhr_.fetchJson('/api/file/signv2').then((sign) => { if (sign) { const signData = sign.data; const formData = new FormData(); const hashKey = (new Date()).getTime(); formData.append('key', hashKey + '.png'); formData.append('policy', signData.policy); formData.append('OSSAccessKeyId', signData.access_id); formData.append('success_action_status', '200'); formData.append('x-oss-forbid-overwrite', 'true'); formData.append('signature', signData.sign); formData.append('file', that.file_); fetch(signData.write_host, { method: 'post', mode: 'cors', body: formData, }).then((data) =>{ var file_url = signData.read_host + hashKey + '.png'; const list = document.querySelector('#tryon_model_list'); list && (SPZ.whenApiDefined(list).then(api => { api.render({ user: true, src: file_url, timestamp: Date.now() }, true); // 专辑页 const collection_list = document.querySelector('#spz_custom_cattle_model_list'); collection_list && (SPZ.whenApiDefined(collection_list).then(collectApi => { collectApi.uploadCallback(); })); })); }).catch(function (e) { console.log("上传图片失败", e); }).finally(()=>{ that.file_input_.value = ""; }) } }); } } SPZ.defineElement(TAG, SpzCustomFileUpload)

const DEFAULT_DELAY_TIME = 200; const TAG = 'spz-custom-tryon-frame-actions'; class SpzTryonFrameActions extends SPZ.BaseElement{ constructor(element) { super(element); this.container_ = null; this.response_ = {}; this.frameDomId_ = 'tryon-glass-image'; this.imageDomId_ = 'tryon-image'; this.currentImage = ''; this.emptyModelImage = 'https://img.staticdj.com/oss/operation/0d0522b404db4db6727c91ef5167e97f.png'; this.loading_ = false; this.frameImage = ''; this.resultG2dData = {}; this.glasses_wh_scale = 1; this.glasses_rotate_angle = 0; this.glasses_shift_pos = { x: 0, y: 0}; this.shiftGlassLimits = { t: 1, b: 1, l: 1, r: 1 }; this.rotateGlassLimits = { min: -30, max: 30 }; this.scaleGlassLimits = { min: 0.8, max: 1.2 }; this.isRenderGlassOnly = null; if (window.innerWidth < 960) { this.cssFixedHeight = window.innerWidth - 56; } else { this.cssFixedHeight = 480; } } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); this.variant_ids = [this.element.getAttribute('variant_id')]; } static deferredMount() { return false; } mountCallback = () => { this.initEventName_(); } render(url, variant_ids, isRenderGlassOnly, isInit) { this.isRenderGlassOnly = isRenderGlassOnly; if (!isInit && this.currentImage === url && variant_ids && variant_ids.length && this.variant_ids && this.variant_ids.length) { if (this.variant_ids.length === variant_ids.length) { let isSame = true; for (let i = 0; i < this.variant_ids.length; i++) { if (this.variant_ids[i] !== variant_ids[i]) { isSame = false; break; } } if (isSame) { return; } } } if(url) { this.currentImage = url; } if(variant_ids) { this.variant_ids = variant_ids; } if (!this.currentImage || this.currentImage === this.emptyModelImage) { return; } this.triggerEvent_('loading'); this.compressorImage(this.currentImage); } compressorImage(url) { const name = url.split('/').pop(); const fileType = 'image/jpeg'; fetch(url) .then((res) => res.blob()) .then((blob) => { let file = new File([blob], name, { type: fileType }); this.compressorImageFile(url, file); }) .catch(err => { this.compressorImageFile(url, null); }); } compressorImageFile(url, file) { const fileThis = file; const that = this; if (fileThis?.size > 10 * 1024) { let quality = 0.2; new Compressor(fileThis, { quality: quality, maxWidth: 300, maxHeight: 300, success: (result) => { const reader = new FileReader(); reader.readAsDataURL(result); reader.onloadend = function() { const base64data = reader.result; that.tryG2d(null, base64data); } }, error(err) { that.tryG2d(url, null); } }); } else { that.tryG2d(url, null); } } renderEmptyImage() { this.triggerEvent_('emptyImageToast'); this.currentImage = this.emptyModelImage; this.doRender_({ image_height: this.cssFixedHeight, image_width: this.cssFixedHeight }); } // 外部组件清空之前渲染的template 节点 clearChildTemplate() { const children = this.element.querySelector('*:not(template)'); children && SPZCore.Dom.removeElement(children); } doRender_ = (response) => { this.response_ = response; const data = { currentImage: this.currentImage, image_height: response.image_height, image_width: response.image_width }; return this.templates_ .findAndRenderTemplate(this.element, data) .then((el) => { const newRender_ = el.outerHTML; this.lastRender_ = newRender_; return this.smoothRender_(el).then(this.attemptToFit_.bind(this)); }).then(() => { if(this.moveListener_) { this.moveListener_(); } this.addListener_(); }); } smoothRender_(newEl) { this.appendAsUnvisibleContainer_(newEl); const components = newEl.querySelectorAll('[layout]'); return Promise.race([ Promise.all( Array.prototype.map.call(components, (e) => SPZ.whenDefined(e).then(() => e.whenBuilt()) ) ), SPZServices.timerFor(this.win).promise(DEFAULT_DELAY_TIME), ]).then(() => { const qickReplace = () => { this.container_ && this.toggleVisible_(this.container_); this.toggleVisible_(newEl, true); this.container_ && SPZCore.Dom.removeElement(this.container_); this.container_ = newEl; if (this.isIos_ || this.isSafari_) { this.setMinWidth_(); } }; return this.animate_ ? this.animateReplace_(newEl) : this.mutateElement(qickReplace); }).then(() => { const response = this.response_; const data = { currentImage: this.currentImage, image_height: this.cssFixedHeight, image_width: this.cssFixedHeight }; if (response.glasses) { let faceImageHeight = response.image_height; let faceImageWidth = response.image_width; let cssImageWidth, cssImageHeight; cssImageHeight = (faceImageHeight * 1.0 / faceImageWidth) * this.cssFixedHeight; data.image_height = cssImageHeight; this.drawGlasses(response); if (this.glasses_wh_scale !== 1) { this.limitDrawGlasses(); } } }); } appendAsUnvisibleContainer_(el) { this.toggleVisible_(el); this.element.appendChild(el); } attemptToFit_() { const fitFunc = () => { this.mutateElement(this.setElementHeight_.bind(this)); }; if (this.container_) { const children = this.container_.querySelectorAll('*:not(template)'); const spzChildren = Array.prototype.filter .call(children, SPZUtils.isSpzElement) .filter((e) => !(e.isMount && e.isMount())); spzChildren .map((e) => SPZ.whenDefined(e).then(() => e.whenMounted())) .forEach((p) => p.then(() => fitFunc())); } return fitFunc(); } setElementHeight_() { // fixed height. const targetHeight = this.container_?./*OK*/ scrollHeight; const height = this.element./*OK*/ offsetHeight; if (height !== targetHeight) { SPZCore.Dom.setStyles(this.element, { height: `${targetHeight}px`, }); } } toggleVisible_(el, visible = false) { if (!visible) { el.classList.add('i-spzhtml-layout-fill'); SPZCore.Dom.setStyles(el, { 'z-index': -100000, 'opacity': 0, }); } else { el.classList.remove('i-spzhtml-layout-fill'); SPZCore.Dom.setStyles(el, { 'z-index': 'auto', 'opacity': 1, }); } } /** set min-width */ setMinWidth_() { const targetWidth = this.container_?./*OK*/ scrollWidth; const width = this.element./*OK*/ offsetWidth; if (width !== targetWidth) { SPZCore.Dom.setStyles(this.element, { 'min-width': `${targetWidth}px`, }); } } tryG2d(imageUrl, base64) { if (this.loading_) return; this.loading_ = true; const that = this; const requestG2dUrl = '/api/whiteant/tryon'; let formData = new FormData(); const previewMode = location.search.replace('?', '').split('&').find(v => v.includes('preview_mode')); const body = { variant_ids: this.variant_ids, preview_mode: previewMode ? true : false }; if (base64) { body.image_base64 = base64; } else if (imageUrl) { body.image_url = imageUrl; } fetch(requestG2dUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }) .then(v => v.json()) .then(function (response) { if (response.errors) { that.triggerEvent_('error'); } that.resetGlasses(); if (!!that.isRenderGlassOnly) { let glassesImg = document.getElementById(that.frameDomId_); glassesImg.style = ''; glassesImg.src = ''; if (response.glasses) { that.drawGlasses(response); if (that.glasses_wh_scale !== 1) { that.limitDrawGlasses(); } } that.triggerEvent_('success', { variant_id: that.variant_ids[0] }); return; } that.doRender_(response).then(() => { that.triggerEvent_('success', { variant_id: that.variant_ids[0] }); }); }) .catch(function (error) { that.triggerEvent_('error'); console.log('error', error); }) .finally(function () { that.isRenderGlassOnly = null; that.loading_ = false; }); } drawGlasses(resultG2dData) { this.resultG2dData = resultG2dData; if (resultG2dData != null) { let glassesAssets = resultG2dData.glasses; if (glassesAssets !== undefined && glassesAssets !== null && glassesAssets.length > 0) { let glassesIndex = 0; if (glassesAssets[glassesIndex].code === 200) { this.frameImage = glassesAssets[glassesIndex].frame_img; let faceImageWidth = resultG2dData.image_width; let faceImageHeight = resultG2dData.image_height; if (faceImageWidth > 0 && faceImageHeight > 0) { let cssImageWidth, cssImageHeight, cssImageScale; if (resultG2dData.image_width / resultG2dData.image_height > 1) { cssImageWidth = this.cssFixedHeight; cssImageHeight = (faceImageWidth * 1.0 / faceImageHeight) * cssImageHeight; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } else { cssImageHeight = this.cssFixedHeight; cssImageWidth = (faceImageWidth * 1.0 / faceImageHeight) * cssImageHeight; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } let tryonContainer = document.getElementById(this.imageDomId_); tryonContainer.style.width = cssImageWidth + 'px'; tryonContainer.style.height = cssImageHeight + 'px'; let frameTryon = glassesAssets[glassesIndex].frame_tryon || []; if (frameTryon.length === 0) { return; } let frameWidth = (frameTryon[0].scale.width * cssImageScale); let frameHeight = (frameTryon[0].scale.height * cssImageScale); let positionX = frameTryon[0].position.x * cssImageScale - frameWidth / 2.0; let positionY = frameTryon[0].position.y * cssImageScale - frameHeight / 2.0; let glassesImg = document.getElementById(this.frameDomId_); glassesImg.src = glassesAssets[glassesIndex].frame_img; glassesImg.style.display = 'block'; glassesImg.style.left = positionX + 'px'; glassesImg.style.top = positionY + 'px'; glassesImg.style.width = frameWidth + 'px'; glassesImg.style.height = frameHeight + 'px'; glassesImg.style.transform = 'rotateZ(' + frameTryon[0].rotation.z + 'deg)' } } } } } scaleGlasses(scale){ this.glasses_wh_scale = scale > 1 ? Math.min(scale, 3) : Math.max(scale, 0.1); this.limitDrawGlasses(); } rotateGlasses(angle){ this.glasses_rotate_angle = angle; this.limitDrawGlasses(); } moveGlasses(operate) { const glasses_shift_pos = this.glasses_shift_pos; const imageDom_ = document.getElementById(this.imageDomId_); const frameDom_ = document.getElementById(this.frameDomId_); const currentTop = frameDom_.offsetTop; const currentLeft = frameDom_.offsetLeft; if (currentLeft > 0 && currentLeft < parseInt(imageDom_.offsetWidth - frameDom_.offsetWidth)) { if(operate === "left") { glasses_shift_pos.x -= 1; } else if(operate === "right") { glasses_shift_pos.x += 1; } } else if (currentLeft <=0) { if(operate === "right") { glasses_shift_pos.x += 1; } } else if (currentLeft >= parseInt(imageDom_.offsetWidth - frameDom_.offsetWidth)) { if(operate === "left") { glasses_shift_pos.x -= 1; } } if (currentTop > 0 && currentTop < parseInt(imageDom_.offsetHeight - frameDom_.offsetHeight)) { if(operate === "top") { glasses_shift_pos.y -= 1; } else if(operate === "bottom") { glasses_shift_pos.y += 1; } } else if (currentTop <=0) { if(operate === "bottom") { glasses_shift_pos.y += 1; } } else if (currentTop >= parseInt(imageDom_.offsetHeight - frameDom_.offsetHeight)) { if(operate === "top") { glasses_shift_pos.y -= 1; } } this.glasses_shift_pos = glasses_shift_pos; this.limitDrawGlasses(); } resetGlasses() { this.resultG2dData = null; this.glasses_shift_pos = { x: 0, y: 0}; this.glasses_rotate_angle = 0; const inputEl = document.getElementById('tryon_pd_input'); if (inputEl) { const value = inputEl.getAttribute('value'); if (value && Number(value) !== 62) { const scale = ( 62 / Number(value) ).toFixed(2); this.glasses_wh_scale = scale > 1 ? Math.min(scale, 3) : Math.max(scale, 0.1); } else { this.glasses_wh_scale = 1; } } else { this.glasses_wh_scale = 1; } } limitDrawGlasses() { const glasses_wh_scale = this.glasses_wh_scale; const glasses_rotate_angle = this.glasses_rotate_angle; const glasses_shift_pos = this.glasses_shift_pos; const resultG2dData = this.resultG2dData; const shiftGlassLimits = this.shiftGlassLimits; const shiftLimitCallback = function(operate, value) { } if (resultG2dData != null) { var glassesAssets = resultG2dData.glasses; if (glassesAssets !== undefined && glassesAssets !== null && glassesAssets.length > 0) { let glassesIndex = 0; if (glassesAssets[glassesIndex].code === 200) { var faceImageWidth = resultG2dData.image_width; var faceImageHeight = resultG2dData.image_height; if (faceImageWidth > 0 && faceImageHeight > 0) { var cssImageWidth, cssImageHeight, cssImageScale; if (resultG2dData.image_width / resultG2dData.image_height > 1) { cssImageWidth = this.cssFixedHeight; cssImageHeight = (faceImageWidth * 1.0 / faceImageHeight) * cssImageHeight; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } else { cssImageHeight = this.cssFixedHeight; cssImageWidth = (faceImageWidth * 1.0 / faceImageHeight) * cssImageHeight; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } let tryonContainer = document.getElementById(this.imageDomId_); tryonContainer.style.width = cssImageWidth + 'px'; tryonContainer.style.height = cssImageHeight + 'px'; var frameTryon = glassesAssets[glassesIndex].frame_tryon || []; if (frameTryon.length === 0) { return; } let frameWidth = (frameTryon[0].scale.width * cssImageScale); let frameHeight = (frameTryon[0].scale.height * cssImageScale); let positionX = frameTryon[0].position.x * cssImageScale - frameWidth / 2.0; let positionY = frameTryon[0].position.y * cssImageScale - frameHeight / 2.0; let scaleGlassWH = 1; let positionOffsetXByScale = 0, positionOffsetYByScale = 0; /// 存放因缩放大小而导致的位置偏移 if (glasses_wh_scale !== 1) { if (glasses_wh_scale >= 0.01) { scaleGlassWH = glasses_wh_scale; } else { scaleGlassWH = 0.01; } } if (scaleGlassWH !== 1) { let scaleFrameWidth = Number(frameWidth) * (Number(scaleGlassWH) - 1); // width缩放了多少 let scaleFrameHeight = Number(frameHeight) * (Number(scaleGlassWH) - 1); // height缩放了多少 frameWidth = Number(frameWidth) + scaleFrameWidth; frameHeight = Number(frameHeight) + scaleFrameHeight; positionOffsetXByScale = scaleFrameWidth / 2.0; positionOffsetYByScale = scaleFrameHeight / 2.0; positionX = Number(positionX) - positionOffsetXByScale; positionY = Number(positionY) - positionOffsetYByScale; } let glassesRotateZ = frameTryon[0].rotation.z || 0; let rotateGlassAngle = 0; if(glasses_rotate_angle != 0) { rotateGlassAngle = glasses_rotate_angle; } glassesRotateZ = Number(glassesRotateZ) + Number(rotateGlassAngle); if (glasses_shift_pos.x !== 0 || glasses_shift_pos.y !== 0) { let shiftGlassPositionX = Number(positionX) + glasses_shift_pos.x; let shiftGlassPositionY = Number(positionY) + glasses_shift_pos.y; let css_tOffset = { x: frameTryon[0].tOffset.x * cssImageScale - frameWidth / 2.0, y: frameTryon[0].tOffset.y * cssImageScale - frameHeight / 2.0 } css_tOffset.x -= Number(positionOffsetXByScale); css_tOffset.y -= Number(positionOffsetYByScale); let css_bOffset = { x: frameTryon[0].bOffset.x * cssImageScale - frameWidth / 2.0, y: frameTryon[0].bOffset.y * cssImageScale - frameHeight / 2.0 } css_bOffset.x -= Number(positionOffsetXByScale); css_bOffset.y -= Number(positionOffsetYByScale); let css_lOffset = { x: frameTryon[0].lOffset.x * cssImageScale - frameWidth / 2.0, y: frameTryon[0].lOffset.y * cssImageScale - frameHeight / 2.0 } css_lOffset.x -= Number(positionOffsetXByScale); css_lOffset.y -= Number(positionOffsetYByScale); let css_rOffset = { x: frameTryon[0].rOffset.x * cssImageScale - frameWidth / 2.0, y: frameTryon[0].rOffset.y * cssImageScale - frameHeight / 2.0 } css_rOffset.x -= Number(positionOffsetXByScale); css_rOffset.y -= Number(positionOffsetYByScale); positionX = shiftGlassPositionX; positionY = shiftGlassPositionY; } var glassesImg = document.getElementById(this.frameDomId_); glassesImg.src = glassesAssets[glassesIndex].frame_img; glassesImg.style.display = 'block'; glassesImg.style.left = positionX + 'px'; glassesImg.style.top = positionY + 'px'; glassesImg.style.width = frameWidth + 'px'; glassesImg.style.height = frameHeight + 'px'; glassesImg.style.transform = 'rotateZ(' + glassesRotateZ + 'deg)' } } } } } initEventName_() { this.mouseDownEvent_ = 'mousedown'; this.mouseUpEvent_ = 'mouseup'; this.mouseMoveEvent_ = 'mousemove'; this.interactEvent_ = 'click'; if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i) ) { this.mouseDownEvent_ = 'touchstart'; this.mouseUpEvent_ = 'touchend'; this.mouseMoveEvent_ = 'touchmove'; this.interactEvent_ = 'touchstart'; } } addListener_() { this.moveListener_ = SPZUtils.Event.delegateListen( this.container_, 'a', this.interactEvent_, (event) => { this.handleFrameAction(event) } ); this.mousedownListener_ = SPZUtils.Event.listen( document.getElementById(this.frameDomId_), this.mouseDownEvent_, (event) => { this.handleFrameDrag(event); } ); SPZUtils.Event.listen(document.getElementById(this.frameDomId_), this.interactEvent_, (event) => { event.stopPropagation(); }); } handleFrameAction(event) { switch(event.target.id) { case 'tryon_arrow_up_btn': { this.moveGlasses('top'); break; } case 'tryon_arrow_down_btn': { this.moveGlasses('bottom'); break; } case 'tryon_arrow_left_btn': { this.moveGlasses('left'); break; } case 'tryon_arrow_right_btn': { this.moveGlasses('right'); break; } case 'tryon_scale_plus_btn': { this.scaleGlasses(this.glasses_wh_scale+0.1); break; } case 'tryon_scale_minus_btn': { this.scaleGlasses(this.glasses_wh_scale-0.1); break; } case 'tryon_rotate_left_btn': { this.rotateGlasses(this.glasses_rotate_angle-10); break; } case 'tryon_rotate_right_btn': { this.rotateGlasses(this.glasses_rotate_angle+10); break; } } } handleFrameDrag(event){ event.preventDefault(); event.stopPropagation(); this.mouseFlag = true; const that = this; const frameDom_ = document.getElementById(this.frameDomId_); frameDom_.style.transition = "none"; const touchX = event.clientX||event.touches?.[0].clientX||0; const touchY = event.clientY||event.touches?.[0].clientY||0; const fTop = frameDom_.offsetTop; const fLeft = frameDom_.offsetLeft; this.mousemoveListener_ = SPZUtils.Event.listen( document.getElementById(this.frameDomId_), this.mouseMoveEvent_, (e) => { e.preventDefault(); e.stopPropagation(); const glasses_shift_pos = this.glasses_shift_pos; const currentTouchX = e.clientX||e.touches?.[0].clientX||0; const currentTouchY = e.clientY||e.touches?.[0].clientY||0; const moveX = currentTouchX - touchX; const moveY = currentTouchY - touchY; const currentLeft = parseInt(fLeft + moveX); const currentTop = parseInt(fTop + moveY); const imageDom_ = document.getElementById(this.imageDomId_); if(currentLeft > 0){ if(currentLeft >= parseInt(imageDom_.offsetWidth - frameDom_.offsetWidth)){ frameDom_.style.left = parseInt(imageDom_.offsetWidth - frameDom_.offsetWidth) + "px"; }else{ frameDom_.style.left = currentLeft + "px"; } }else{ frameDom_.style.left = "0px"; } if(currentTop > 0){ if(currentTop >= parseInt(imageDom_.offsetHeight - frameDom_.offsetHeight)){ frameDom_.style.top = parseInt(imageDom_.offsetHeight - frameDom_.offsetHeight) + "px"; }else{ frameDom_.style.top = currentTop + "px"; } }else{ frameDom_.style.top = "0px"; } } ); this.mouseupListener_ = SPZUtils.Event.listen( document, this.mouseUpEvent_, (e) => { e.preventDefault(); e.stopPropagation(); this.mousemoveListener_&&this.mousemoveListener_(); this.mouseupListener_&&this.mouseupListener_(); frameDom_.style.transition = "all .3s"; const glasses_shift_pos = this.glasses_shift_pos; glasses_shift_pos.x = glasses_shift_pos.x + Number(frameDom_.style.left.replace('px','')) - fLeft; glasses_shift_pos.y = glasses_shift_pos.y + Number(frameDom_.style.top.replace('px','')) - fTop; that.glasses_shift_pos = glasses_shift_pos; } ); SPZUtils.Event.listen(frameDom_, this.interactEvent_, (event) => { if (this.mouseFlag) { event.stopPropagation(); this.mouseFlag = false; } }); } setupAction_ = () => { this.registerAction('rerender', (detail) => { this.render(detail.args.data); }); this.registerAction('render_empty_image', (detail) => { this.renderEmptyImage(); }); } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, `${ TAG }.${ name }`, data || {}); this.action_.trigger(this.element, name, event); } isLayoutSupported(layout) { return layout == SPZCore.Layout.CONTAINER; } } SPZ.defineElement(TAG, SpzTryonFrameActions);

const DEFAULT_DELAY_TIME = 200; const TAG = 'spz-custom-batch-tryon-frame-act