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(); })();

RALPH LAUREN

116 Products

Filter

RALPH LAUREN 0RL6133

RALPH LAUREN 0RL7076

RALPH LAUREN 0RL6224U

RALPH LAUREN 0RL6196P

RALPH LAUREN 0RL8202B

RALPH LAUREN 0RL8211U

+1

RALPH LAUREN 0RL8224U

+2

RALPH LAUREN 0RL8142

RALPH LAUREN 0RL8188Q

+1

RALPH LAUREN 0RL8206U

+4

RALPH LAUREN 0RL5118

RALPH LAUREN 0RL8189Q

RALPH LAUREN 0RL5122

+1

RALPH LAUREN 0RL5125

+2

RALPH LAUREN 0RL6210Q

RALPH LAUREN 0RL6213

RALPH LAUREN 0RL8146P

RALPH LAUREN 0RL5119

+1

RALPH LAUREN 0RL5106

RALPH LAUREN 0RL6056

RALPH LAUREN 0RL8203QU

+2

RALPH LAUREN 0RL6202

RALPH LAUREN 0RL5089

RALPH LAUREN 0RL6236U

+1

RALPH LAUREN 0RL6205

RALPH LAUREN 0RL8214U

+3

RALPH LAUREN 0RL8221

+2

RALPH LAUREN 0RL8165

RALPH LAUREN 0RL6244U

+2

RALPH LAUREN 0RL7085

+1

RALPH LAUREN 0RL7047Q

RALPH LAUREN 0RL7066J

RALPH LAUREN 0RL6222

RALPH LAUREN 0RL7068

RALPH LAUREN 0RL6135

RALPH LAUREN 0RL7058

RALPH LAUREN 0RL6219U

RALPH LAUREN 0RL8220

+2

RALPH LAUREN 0RL6182

RALPH LAUREN 0RL7080Q

RALPH LAUREN 0RL6212

RALPH LAUREN 0RL6169

RALPH LAUREN 0RL8215BU

+3

RALPH LAUREN 0RL6226U

RALPH LAUREN 0RL8127B

RALPH LAUREN 0RL6208

RALPH LAUREN 0RL7055

RALPH LAUREN 0RL7077

RALPH LAUREN 0RL6228U

+1

RALPH LAUREN 0RL7081

+1

RALPH LAUREN 0RL8207U

+1

RALPH LAUREN 0RL6141

RALPH LAUREN 0RL6203

RALPH LAUREN 0RL7079

RALPH LAUREN 0RL6231U

+1

RALPH LAUREN 0RL6245

+2

RALPH LAUREN 0RL6230U

+1

RALPH LAUREN 0RL5120

+2

RALPH LAUREN 0RL6221U

RALPH LAUREN 0RL6206

RALPH LAUREN 0RL6240U

+1

RALPH LAUREN 0RL6062

RALPH LAUREN 0RL6227U

+1

RALPH LAUREN 0RL5110

RALPH LAUREN 0RL6223B

RALPH LAUREN 0RL5116T

RALPH LAUREN 0RL8218U

+2

RALPH LAUREN 0RL5095

RALPH LAUREN 0RL5124J

RALPH LAUREN 0RL8210

+1

RALPH LAUREN 0RL8219U

RALPH LAUREN 0RL8213

+4

RALPH LAUREN 0RL8199

RALPH LAUREN 0RL5099

RALPH LAUREN 0RL8205

+1

RALPH LAUREN 0RL6233U

+3

RALPH LAUREN 0RL8201

RALPH LAUREN 0RL5123

+1

RALPH LAUREN 0RL6238U

+1

RALPH LAUREN 0RL8204QU

+3

Explore Ralph Lauren Eyewear | Stylish Glasses & Sunglasses | BlakSpecs

Step into the world of Ralph Lauren eyewear, where classic elegance meets modern sophistication. This collection features an exquisite selection of sunglasses and eyeglasses designed to elevate any look with timeless style and contemporary flair. Each pair combines high-quality materials with meticulous craftsmanship, ensuring both durability and luxury. Experience the perfect blend of fashion and function with FREE polycarbonate single vision lenses that include anti-glare, offering you superior clarity and comfort.

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-actions'; class SpzBatchTryonFrameActions 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.batchTryonList = []; //当前展示批量试戴数据 this.batchTryonTotalList = []; //批量试戴所有数据 this.variant_ids = []; // 参与试戴的字款式id this.isEmptyTryon = false; this.page = { pageSize: 4, pageIndex: 0, totalPage: 0 } this.zoom_info = { zoomInStatus: false, //放大状态 variantId: null } if (window.innerWidth < 960) { this.cssFixedHeight = ((window.innerWidth - 56)/2) - 8; this.zoomInFixedHeight = window.innerWidth - 56; } else { this.cssFixedHeight = (480/2) - 8; this.zoomInFixedHeight = 480; } } buildCallback = () => { this.action_ = SPZServices.actionServiceForDoc(this.element); this.templates_ = SPZServices.templatesForDoc(this.element); this.xhr_ = SPZServices.xhrFor(this.win); this.setupAction_(); } static deferredMount() { return false; } mountCallback = () => { this.initEventName_(); } updateModelImg(url) { if(url) { this.currentImage = url } } resetPage() { this.page = { pageSize: 4, pageIndex: 0, totalPage: 0 } } resetZoomInfo() { this.zoom_info = { zoomInStatus: false, //放大状态 variantId: null } } render(url, variant_ids, isInit) { if(url) { this.currentImage = url; } if(variant_ids) { this.variant_ids = variant_ids; } if(!!isInit) { this.resetPage(); this.resetZoomInfo(); } if (!this.currentImage || this.currentImage === this.emptyModelImage) { this.renderEmptyImage(); 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); } } updatePageList() { const list = this.batchTryonTotalList; const totalCount = list.length; const totalPageNum = Math.ceil(totalCount / this.page.pageSize); this.page.totalPage = totalPageNum; const pageIndex = this.page.pageIndex; const pageSize = this.page.pageSize; const pageStart = pageIndex * pageSize; const pageEnd = pageStart + pageSize; const currentList = list.slice(pageStart, pageEnd); this.batchTryonList = currentList; } handleEmptyTryonList() { this.batchTryonTotalList = this.variant_ids.map(id => { return { tryonContainer: { width: this.cssFixedHeight, height: this.cssFixedHeight }, variantId: id } }); this.doRender_({ image_height: this.zoomInFixedHeight, image_width: this.zoomInFixedHeight }).then(()=>{ // 当试戴为放大状态，保留放大状态 if(!!this.zoom_info.variantId && !!this.zoom_info.zoomInStatus) { const variantId = this.zoom_info.variantId; this.tryonZoomIn(variantId); } this.triggerEvent_('success'); }); } renderEmptyGlasses(img) { this.currentImage = img; this.resetGlasses(); this.isEmptyTryon = true; this.handleEmptyTryonList(); } renderEmptyImage(variantIds, isInit) { if(!!isInit) { this.resetPage(); this.resetZoomInfo(); } this.triggerEvent_('emptyImageToast'); this.currentImage = this.emptyModelImage; if(variantIds) { this.variant_ids = variantIds; } this.resetGlasses(); this.isEmptyTryon = true; this.handleEmptyTryonList(); } // 外部组件清空之前渲染的template 节点 clearChildTemplate() { const children = this.element.querySelector('*:not(template)'); children && SPZCore.Dom.removeElement(children); } doRender_ = (response) => { this.response_ = response; // 更新当前页数据 this.updatePageList(); const data = { currentImage: this.currentImage, batchTryonList: this.batchTryonList, image_height: response.image_height, image_width: response.image_width, page: this.page, isEmptyTryon: this.isEmptyTryon }; 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); if (this.glasses_wh_scale !== 1) { this.batchLimitTryonData(); this.batchLimitDrawGlasses(); } }).then(() => { if(this.moveListener_) { this.moveListener_(); } this.addListener_(); }); } getSortBatchTryonList(batchList) { let list = []; if(this.variant_ids.length && batchList.length){ this.variant_ids.forEach(id => { let obj = batchList.find((item) => item.variantId == id); obj && list.push(obj); }) } return list; } 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(); const batchList = that.getBatchTryonDataList(response); if(batchList.length) { that.batchTryonTotalList = that.getSortBatchTryonList(batchList); that.doRender_(response).then(() => { // 当试戴为放大状态，保留放大状态 if(!!that.zoom_info.variantId && !!that.zoom_info.zoomInStatus) { const variantId = that.zoom_info.variantId; that.tryonZoomIn(variantId); } that.triggerEvent_('success'); }); } else { // 上传了模特图, 但glasses数据为空的情况 that.renderEmptyGlasses(that.currentImage) } }) .catch(function (error) { that.triggerEvent_('error'); console.log('error', error); }) .finally(function () { that.loading_ = false; }); } getBatchTryonDataList(resultG2dData) { let batchTryonTotalList = []; if(resultG2dData != null) { let glassesAssets = resultG2dData.glasses; if(Array.isArray(glassesAssets) && glassesAssets.length > 0) { glassesAssets.forEach(item => { if(item.code == 200){ 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 = (faceImageHeight * 1.0 / faceImageWidth) * cssImageWidth; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } else { cssImageHeight = this.cssFixedHeight; cssImageWidth = (faceImageWidth * 1.0 / faceImageHeight) * cssImageHeight; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } let frameTryon = item.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; const tryonObj = { faceImageWidth, faceImageHeight, positionX, positionY, frameWidth, frameHeight, cssImageScale, tryonContainer: { width: cssImageWidth, height: cssImageHeight }, glassesImg: { src: item.frame_img, left: positionX, top: positionY, width: frameWidth, height: frameHeight, transform: 'rotateZ(' + frameTryon[0].rotation.z + 'deg)', }, frameTryon:item.frame_tryon, variantId: item.variant_id } batchTryonTotalList.push(tryonObj) } } }) } } return batchTryonTotalList; } scaleGlasses(scale){ this.glasses_wh_scale = scale > 1 ? Math.min(scale, 3) : Math.max(scale, 0.1); this.handleOprateLimitDrawGlasses(); } rotateGlasses(angle){ this.glasses_rotate_angle = angle; this.handleOprateLimitDrawGlasses(); } updateGlassesShiftPos({operateType}) { const operate = operateType; const tryonObj = this.batchTryonList[0]; if(!tryonObj) { return; } const image_width = tryonObj.tryonContainer.width; const image_height = tryonObj.tryonContainer.height; const frame_width = tryonObj.glassesImg.width; const frame_height = tryonObj.glassesImg.height; const currentTop = tryonObj.glassesImg.top; const currentLeft = tryonObj.glassesImg.left; const glasses_shift_pos = this.glasses_shift_pos; if (currentLeft > 0 && currentLeft < parseInt(image_width - frame_width)) { 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(image_width - frame_width)) { if(operate === "left") { glasses_shift_pos.x -= 1; } } if (currentTop > 0 && currentTop < parseInt(image_height - frame_height)) { 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(image_height - frame_height)) { if(operate === "top") { glasses_shift_pos.y -= 1; } } this.glasses_shift_pos = glasses_shift_pos; } moveGlasses(operate) { this.updateGlassesShiftPos({operateType: operate}) this.handleOprateLimitDrawGlasses(); } resetGlasses() { this.isEmptyTryon = false; 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; } } batchLimitTryonData() { const glasses_wh_scale = this.glasses_wh_scale; const glasses_rotate_angle = this.glasses_rotate_angle; const glasses_shift_pos = this.glasses_shift_pos; if(this.batchTryonTotalList.length) { this.batchTryonTotalList.forEach(item => { let frameTryon = item.frameTryon || []; if (frameTryon.length === 0) { return; } let cssImageScale = item.cssImageScale let frameWidth = item.frameWidth; let frameHeight = item.frameHeight; let positionX = item.positionX; let positionY = item.positionY; 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; positionX = shiftGlassPositionX; positionY = shiftGlassPositionY; } item.glassesImg.left = positionX; item.glassesImg.top = positionY; item.glassesImg.width = frameWidth; item.glassesImg.height = frameHeight; item.glassesImg.transform = 'rotateZ(' + glassesRotateZ + 'deg)' }) } } batchLimitDrawGlasses() { const batchTryonTotalList = this.batchTryonTotalList; // 批量试戴数据 const tryonNodeList = this.element.querySelectorAll('.tryon-item'); if(tryonNodeList.length) { Array.from(tryonNodeList).map(node => { const curVariantId = node.getAttribute('variant_id'); const curTryonObj = batchTryonTotalList.find(item => item.variantId == curVariantId); if(!curTryonObj?.glassesImg) { return; } const glassesImgEl = node.querySelector('.tryon-glass-image') glassesImgEl.style.left = curTryonObj.glassesImg.left + 'px'; glassesImgEl.style.top = curTryonObj.glassesImg.top + 'px'; glassesImgEl.style.width = curTryonObj.glassesImg.width + 'px'; glassesImgEl.style.height = curTryonObj.glassesImg.height + 'px'; glassesImgEl.style.transform = curTryonObj.glassesImg.transform; }); } } handleOprateLimitDrawGlasses() { this.batchLimitTryonData(); this.batchLimitDrawGlasses(); if(this.zoom_info.variantId) { const data = this.batchTryonTotalList.find(item => item.variantId == this.zoom_info.variantId); data && this.drawZoomInGlass(data); } } 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.element, 'a', this.interactEvent_, (event) => { this.handleFrameAction(event) } ); } 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; } case 'batch_tryon_prev': { this.prevPage(); break; } case 'batch_tryon_next': { this.nextPage(); break; } } } // 上一页 prevPage() { const pageIndex = this.page.pageIndex - 1; if(pageIndex >= 0) { this.triggerEvent_('loading'); this.page.pageIndex = pageIndex; const data = { image_height: this.batchTryonTotalList[0].faceImageHeight, image_width: this.batchTryonTotalList[0].faceImageWidth }; this.doRender_(data).then(() => { setTimeout(()=> { this.triggerEvent_('success'); }, 500) }); } } // 下一页 nextPage(){ const pageIndex = this.page.pageIndex + 1; if(pageIndex <= (this.page.totalPage - 1)) { this.triggerEvent_('loading'); this.page.pageIndex = pageIndex; const data = { image_height: this.batchTryonTotalList[0].faceImageHeight, image_width: this.batchTryonTotalList[0].faceImageWidth }; this.doRender_(data).then(() => { setTimeout(()=> { this.triggerEvent_('success'); }, 500) }); } } handleGetStyle() { } drawZoomInGlass(item) { const glasses_wh_scale = this.glasses_wh_scale; const glasses_rotate_angle = this.glasses_rotate_angle; const glasses_shift_pos = this.glasses_shift_pos; let faceImageWidth = item.faceImageWidth; let faceImageHeight = item.faceImageHeight; let cssImageWidth, cssImageHeight, cssImageScale; if (faceImageWidth / faceImageHeight > 1) { cssImageWidth = this.zoomInFixedHeight; cssImageHeight = (faceImageHeight * 1.0 / faceImageWidth) * cssImageWidth; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } else { cssImageHeight = this.zoomInFixedHeight; cssImageWidth = (faceImageWidth * 1.0 / faceImageHeight) * cssImageHeight; cssImageScale = cssImageWidth * 1.0 / faceImageWidth; } let frameTryon = item.frameTryon; 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) { const glassesShiftPosScale = cssImageWidth * 1.0 / item.tryonContainer.width; let shiftGlassPositionX = Number(positionX) + glasses_shift_pos.x * glassesShiftPosScale; let shiftGlassPositionY = Number(positionY) + glasses_shift_pos.y * glassesShiftPosScale; positionX = shiftGlassPositionX; positionY = shiftGlassPositionY; } const tryonZoomInWrapEl = SPZCore.Dom.scopedQuerySelector( this.element, '#tryon_zoom_in_image' ); const tryonZoomInGlassEl = SPZCore.Dom.scopedQuerySelector( this.element, '#tryon_zoom_in_glass_image' ); tryonZoomInWrapEl.style.width = cssImageWidth + 'px'; tryonZoomInWrapEl.style.height = cssImageHeight + 'px'; tryonZoomInGlassEl.src = item.glassesImg.src; tryonZoomInGlassEl.style.left = positionX + 'px'; tryonZoomInGlassEl.style.top = positionY + 'px'; tryonZoomInGlassEl.style.width = frameWidth + 'px'; tryonZoomInGlassEl.style.height = frameHeight + 'px'; tryonZoomInGlassEl.style.transform = 'rotateZ(' + glassesRotateZ + 'deg)' } tryonZoomIn(variant_id) { const variantId = variant_id; const tryonListEl = SPZCore.Dom.scopedQuerySelector( this.element, '#batch_tryon_list' ); const tryonZoomInEl = SPZCore.Dom.scopedQuerySelector( this.element, '#tryon_zoom_in_wrap' ); const tryonPreNextEl = SPZCore.Dom.scopedQuerySelector( this.element, '#batch_tryon_pre_next_btn' ); tryonListEl.classList.add('tr-hidden'); tryonPreNextEl && tryonPreNextEl.classList.add('!tr-hidden'); if(this.isEmptyTryon === true){ const tryonZoomInWrapEl = SPZCore.Dom.scopedQuerySelector( this.element, '#tryon_zoom_in_image' ); tryonZoomInWrapEl.style.width = this.zoomInFixedHeight + 'px'; tryonZoomInWrapEl.style.height = this.zoomInFixedHeight + 'px'; } else { const data = this.batchTryonTotalList.find(item => item.variantId == variantId) data && this.drawZoomInGlass(data); } tryonZoomInEl && tryonZoomInEl.classList.remove('tr-hidden'); // 更新 this.zoom_info this.zoom_info = { zoomInStatus: true, //放大状态 variantId: variantId } } tryonZoomOut() { const tryonZoomInEl = SPZCore.Dom.scopedQuerySelector( this.element, '#tryon_zoom_in_wrap' ); const tryonListEl = SPZCore.Dom.scopedQuerySelector( this.element, '#batch_tryon_list' ); const tryonPreNextEl = SPZCore.Dom.scopedQuerySelector( this.element, '#batch_tryon_pre_next_btn' ); tryonZoomInEl && tryonZoomInEl.classList.add('tr-hidden'); tryonPreNextEl && tryonPreNextEl.classList.remove('!tr-hidden'); tryonListEl.classList.remove('tr-hidden'); // 更新 this.zoom_info this.zoom_info = { zoomInStatus: false, //放大状态 variantId: null } } saTrackZoomIn_() { 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", element_type: "button", element_name: "zoom_in", product_id: productId }) } window.sa && window.sa.track('function_click', eventParams); } setupAction_ = () => { this.registerAction('rerender', (detail) => { this.render(detail.args.data); }); this.registerAction('render_empty_image', (detail) => { this.renderEmptyImage(); }); // 放大试戴 this.registerAction('handleTryonZoomIn', (detail) => { // pc端只在按钮点击放大，M端点击整个模特图放大 const isUseInMobile = detail.args.isUseInMobile; if(window.innerWidth >= 960 && isUseInMobile) { return; } this.saTrackZoomIn_(); const variantId = detail.args.variantId; this.tryonZoomIn(variantId); }); // 缩小试戴 this.registerAction('handleTryonZoomOut', (detail) => { this.tryonZoomOut(); }); } 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, SpzBatchTryonFrameActions);

const CUSTOMER_ID = `null` const CUSTOMER_EMAIL = `null` const TAG = 'spz-custom-tryon-photograph'; class SpzCustomTryonPhotograph extends SPZ.BaseElement{ constructor(element) { super(element); this.hasPhoto_=false; this.loading_=false; this.stream = null; this.xhr_ = SPZServices.xhrFor(this.win); } buildCallback() { this.action_ = SPZServices.actionServiceForDoc(this.element); this.setupAction_(); } mountCallback() {} getUserMedia(constrains, success, error) { if(navigator.mediaDevices.getUserMedia){ navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error=>{ this.trigger_('error'); }); } else if (navigator.webkitGetUserMedia){ navigator.webkitGetUserMedia(constrains).then(success).catch(error => { this.trigger_('error'); }); } else if (navigator.mozGetUserMedia){ navagator.mozGetUserMedia(constrains).then(success).catch(error => { this.trigger_('error'); }); } else if (navigator.getUserMedia){ navigator.getUserMedia(constrains).then(success).catch(error => { this.trigger_('error'); }); } } async getMediaDevice() { const videoDom = document.getElementById('tryon-photo-video'); const videoWidth = document.body.clientWidth < 960 ? document.body.clientWidth - 56 : 480; const videoHeight = document.body.clientWidth < 960 ? document.body.clientWidth - 56 : 480; await this.getUserMedia({ video:{ aspectRatio: videoWidth / videoHeight, width: { min: videoWidth, max: videoWidth * 2, }, height: { min: videoHeight, max: videoHeight * 2, }, facingMode: 'user', }, audio: false, }, stream => { if ("srcObject" in videoDom) { videoDom.srcObject = stream } else { videoDom.src = window.URL.createObjectURL(stream) } videoDom.onloadedmetadata = function(e) { videoDom.play() } this.trigger_('success'); this.stream = stream; }, err => { this.trigger_('error');