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

HARLEY-DAVIDSON EYEWEAR

90 Products

Filter

HARLEY-DAVIDSON HD50027

HARLEY-DAVIDSON HD0860

HARLEY-DAVIDSON HD0774

HARLEY-DAVIDSON HD9024

HARLEY-DAVIDSON HD0146T

HARLEY-DAVIDSON HD0982

HARLEY-DAVIDSON HD50032

HARLEY-DAVIDSON HD50059

HARLEY-DAVIDSON HD50019

HARLEY-DAVIDSON HD0496

HARLEY-DAVIDSON HD50020

HARLEY-DAVIDSON HD0760

HARLEY-DAVIDSON HD1011X

HARLEY-DAVIDSON HD0766

HARLEY-DAVIDSON HD50057

HARLEY-DAVIDSON HD0976

HARLEY-DAVIDSON HD0912X

HARLEY-DAVIDSON HD9026

HARLEY-DAVIDSON HD9028

HARLEY-DAVIDSON HD0575

HARLEY-DAVIDSON HD0576

HARLEY-DAVIDSON HD1015X

HARLEY-DAVIDSON HD0951

HARLEY-DAVIDSON HD0977

HARLEY-DAVIDSON HD0577

HARLEY-DAVIDSON HD0787

HARLEY-DAVIDSON HD0982X

HARLEY-DAVIDSON HD0955

HARLEY-DAVIDSON HD0978X

HARLEY-DAVIDSON HD0142T

HARLEY-DAVIDSON HD0880

HARLEY-DAVIDSON HD0970X

HARLEY-DAVIDSON HD0578

HARLEY-DAVIDSON HD9025

HARLEY-DAVIDSON HD0759

HARLEY-DAVIDSON HD0141T

HARLEY-DAVIDSON HD0946X

HARLEY-DAVIDSON HD0981X

HARLEY-DAVIDSON HD00013

HARLEY-DAVIDSON HD0903X

HARLEY-DAVIDSON HD0752

HARLEY-DAVIDSON HD0827

HARLEY-DAVIDSON HD0365

HARLEY-DAVIDSON HD0957X

HARLEY-DAVIDSON HD0913X

HARLEY-DAVIDSON HD50058

HARLEY-DAVIDSON HD0959X

+1

HARLEY-DAVIDSON HD50021

HARLEY-DAVIDSON HD50055

HARLEY-DAVIDSON HD50018

HARLEY-DAVIDSON HD0879

HARLEY-DAVIDSON HD0983X

HARLEY-DAVIDSON HD0975

HARLEY-DAVIDSON HD0540

HARLEY-DAVIDSON HD1012X

HARLEY-DAVIDSON HD50025

HARLEY-DAVIDSON HD9027

HARLEY-DAVIDSON HD0954

HARLEY-DAVIDSON HD0932X

HARLEY-DAVIDSON HD0860X

HARLEY-DAVIDSON HD0822

HARLEY-DAVIDSON HD50031

HARLEY-DAVIDSON HD0945X

HARLEY-DAVIDSON HD0914X

HARLEY-DAVIDSON HD0135T

HARLEY-DAVIDSON HD0816X

HARLEY-DAVIDSON HD0138T

HARLEY-DAVIDSON HD0145T

HARLEY-DAVIDSON HD0949

HARLEY-DAVIDSON HD0151T

HARLEY-DAVIDSON HD0152T

HARLEY-DAVIDSON HD0950

HARLEY-DAVIDSON HD50028

HARLEY-DAVIDSON HD0779

HARLEY-DAVIDSON HD50026

HARLEY-DAVIDSON HD0951X

HARLEY-DAVIDSON HD0143T

HARLEY-DAVIDSON HD0137T

HARLEY-DAVIDSON HD0149T

HARLEY-DAVIDSON HD00015

Harley-Davidson Eyewear | Tough & Stylish Glasses at BlakSpecs

Rev up your style with the Harley-Davidson Eyewear collection at BlakSpecs. This rugged and stylish range is designed for those who live life on the edge. Each piece combines the iconic Harley-Davidson spirit with practical features, making these sunglasses and eyeglasses perfect for motorcycle enthusiasts and adventure seekers alike. With a robust design and high-quality materials, these glasses offer both durability and a bold look. Plus, enjoy FREE polycarbonate single vision lenses with anti-glare for enhanced vision and protection on the road.

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'); }); } takePhoto() { const videoDom = document.getElementById('tryon-photo-video'); const canvasDom = document.getElementById('tryon-photo-canvas'); canvasDom.width = videoDom.offsetWidth * 2; canvasDom.height = videoDom.offsetHeight * 2; const ctx = canvasDom.getContext('2d'); ctx.translate(canvasDom.width, 0); ctx.scale(-1, 1); ctx.drawImage( videoDom, 0, 0, canvasDom.width, canvasDom.height, ) canvasDom.imgSrc = canvasDom.toDataURL("image/jpeg"); canvasDom.style.width = vi