网页制作网站首页,苏州品牌网站设计企业,WordPress用户中心激活版,wordpress添加项目需求#xff1a;上面有几个按钮#xff0c;其中有一个切换是图片
用v-if会导致图片加载慢
实现方法#xff1a;
一进来就加载#xff0c;通过监听元素显示#xff0c;用于控制canvas的宽高#xff0c;从而达到隐藏的效果
组件dowolad.vue
templateview …需求上面有几个按钮其中有一个切换是图片
用v-if会导致图片加载慢
实现方法
一进来就加载通过监听元素显示用于控制canvas的宽高从而达到隐藏的效果
组件dowolad.vue
templateview stylemargin-top: 20rpx;canvas canvas-idmyCanvas :stylescaleObj/canvasbutton :loadingloading :disabledloading clicksaveImg classconfirmBnt v-if!weixin show保存二维码/button/view/templatescriptexport default {props: [show],data() {return {show: true,canvasId: myCanvas,imagePath: ,canvaseAttr:{width: 0,height: 0,},scaleObj:{},loading: false,weixin: false};},mounted(){this.weixin this.$wechat.isWeixin();this.init();},watch:{show:{handler(newData, oldData){let scale {width: 0,height: 0,}if(newData){scale.width this.canvaseAttr.widthpx;scale.height this.canvaseAttr.heightpx;}this.scaleObj scale;},deep: true,immediate: true}},methods: {init(){this.getImageInfo();},getImageInfo() {let that this;uni.getSystemInfo({success: (window) {const screenWidth window.windowWidth;uni.getImageInfo({src: https://media.sammu.top/pay_bank_img.png,success: (res) {let scale screenWidth/res.width;let height res.height*scale;that.canvaseAttr {width: screenWidth,height: height,}that.imagePath res.path;that.drawCanvas();},fail: (err) {console.log(err);}});},});},drawCanvas() {this.$nextTick((){const ctx uni.createCanvasContext(myCanvas, this);ctx.drawImage(this.imagePath, 0, 0, this.canvaseAttr.width, this.canvaseAttr.height);ctx.draw();})},saveImg(){const ctx uni.createCanvasContext(this.canvasId, this);let that this;that.loading true;// 绘制完成 ctx.draw(true, function () {uni.canvasToTempFilePath({canvasId: that.canvasId,success: (res) {// #ifdef H5that.saveH5Canvas(res)// #endif// #ifdef APPuni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: () {uni.showToast({title: 保存成功,icon: none})that.loading false;uni.hideLoading();},fail: () {uni.showToast({title: 保存失败,icon: none})that.loading false;uni.hideLoading();}});// #endif},fail: (err) {that.loading false;console.log(err, 错误信息);}});})},saveH5Canvas(res) {let that this;try {// 在 h5 中res.tempFilePath 返回的是 base64 类型要处理通过 a 标签的形式下载var arr res.tempFilePath.split(,);var bytes atob(arr[1]);let ab new ArrayBuffer(bytes.length);let ia new Uint8Array(ab);for (let i 0; i bytes.length; i) {ia[i] bytes.charCodeAt(i);}var blob new Blob([ab], {type: application/octet-stream});var url URL.createObjectURL(blob);var a document.createElement(a);a.href url;a.download new Date().valueOf() .png;var e document.createEvent(MouseEvents);e.initMouseEvent(click, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);a.dispatchEvent(e);URL.revokeObjectURL(url);uni.showToast({title: 保存成功,icon: none})that.loading false;uni.hideLoading();} catch (e) {uni.showToast({title: 保存失败,icon: none})that.loading false;uni.hideLoading();} },},}/scriptstyle langscss scoped.confirmBnt{position: fixed;bottom: 20rpx;width: calc(100% - 20rpx);left: 50%;transform: translateX(-50%);background: var(--view-theme);border-radius: 24rpx;height: 108rpx;line-height: 108rpx;font-size: 40rpx;font-weight: 700;text-align: center;color: #fff;}/style 调用 dowload refdowloadRef :showactive 1/dowload
