当前位置：首页 > news >正文

canvas保存图片

news 2025/6/29 12:42:19

需求：上面有几个按钮，其中有一个切换是图片

用v-if会导致图片加载慢

实现方法：

一进来就加载，通过监听元素显示，用于控制canvas的宽高，从而达到隐藏的效果

组件dowolad.vue

<template><view style="margin-top: 20rpx;"><canvas canvas-id="myCanvas" :style="scaleObj"></canvas><button :loading="loading" :disabled="loading" @click="saveImg" class="confirmBnt" v-if="!weixin && show">保存二维码</button></view></template><script>export 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.width+'px';scale.height = this.canvaseAttr.height+'px';}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();}    },},}</script><style lang="scss" 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>

调用