|  |  |  | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.preImgW = w; | 
|---|
|  |  |  | // 设置蒙层 | 
|---|
|  |  |  | this.setBgBox(); | 
|---|
|  |  |  | // 图像预览 | 
|---|
|  |  |  | this.previewCanvas({ | 
|---|
|  |  |  | w, | 
|---|
|  |  |  | h, | 
|---|
|  |  |  | path | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | // 图像预览 | 
|---|
|  |  |  | this.previewCanvas({ | 
|---|
|  |  |  | w, | 
|---|
|  |  |  | h, | 
|---|
|  |  |  | path | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, 500) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 设置蒙层 | 
|---|
|  |  |  | setBgBox() { | 
|---|
|  |  |  | const { | 
|---|
|  |  |  | 
|---|
|  |  |  | h, | 
|---|
|  |  |  | path | 
|---|
|  |  |  | }) { | 
|---|
|  |  |  | console.log(path, w, h) | 
|---|
|  |  |  | const ctx = uni.createCanvasContext('mycanvas'); | 
|---|
|  |  |  | ctx.drawImage(path, 0, 0, w, h); | 
|---|
|  |  |  | ctx.draw(); | 
|---|
|  |  |  | 
|---|
|  |  |  | let y = (res[0].height - res[0].width) / 2; | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 判断照片可移动的距离是否大于留白的值,如果大于向右划时图片的宽减去基准框的宽减去留白向左时留白,小于时按图片的可移动值 | 
|---|
|  |  |  | * */ | 
|---|
|  |  |  | * */ | 
|---|
|  |  |  | let x = (preImgW - maxW) / 2 > 40 ? (fx < 0 ? preImgW - maxW - 40 : 40) : (preImgW - maxW) / 2; | 
|---|
|  |  |  | if (preImgH > maxH) { | 
|---|
|  |  |  | this.y = this.y > y ? y : this.y < -y ? -y : this.y; | 
|---|
|  |  |  | 
|---|
|  |  |  | destHeight: maxH, | 
|---|
|  |  |  | canvasId: 'mycanvas', | 
|---|
|  |  |  | success: fileRes => { | 
|---|
|  |  |  | console.log(fileRes); | 
|---|
|  |  |  | uni.previewImage({ | 
|---|
|  |  |  | count: 1, | 
|---|
|  |  |  | urls: [fileRes.tempFilePath] | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | uni.$emit('update', fileRes) | 
|---|
|  |  |  | uni.navigateBack({ delta: 1 }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | fail: function(err) { | 
|---|
|  |  |  | console.log(err); | 
|---|
|  |  |  | uni.showToast({ | 
|---|
|  |  |  | title: '上传失败:图片生成过程中遇到错误', | 
|---|
|  |  |  | icon: 'none' | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | .settingHeadImage { | 
|---|
|  |  |  | background-color: #000000; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pre-canvas { | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | left: 0; | 
|---|
|  |  |  | z-index: 20; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .preImage { | 
|---|
|  |  |  | min-width: 100vw; | 
|---|
|  |  |  | height: 100vh; | 
|---|
|  |  |  | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | z-index: 1; | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .pre-i { | 
|---|
|  |  |  | // transition: all 0.1s; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .setting-btns { | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | bottom: 0; | 
|---|