uniapp APP端 DOM生成图片保存到相册

<template>

<view class="container" style="padding-bottom: 30rpx;">

<view class="hdbg pr w100 " style="height: 150rpx;">

<top-bar content='分享' @Back="Back"></top-bar>

</view>

<view id="capture" class="page-body">

<view class="fx">

<image :src="list.image_base" mode="" crossorigin="anonymous"></image>

</view>

<view class="cred-arr">

<view class="cred">

<view class="erweim">

<image :src="list.qrcode" mode=""></image>

</view>

<!-- <view class="fs28 smwb smt">扫码下载APP</view> -->

</view>

</view>

</view>

<view class="page-foot flex justify-center pt30">

<view class="butten_left mr30" @click="generateImage">分享海报</view>

<view class="butten_right" @click="onshare">分享链接</view>

</view>

<canvas canvas-id="shareCanvas"

style="width: 750rpx; height: 1334rpx; position: fixed; left: -9999rpx;"></canvas>

</view>

</template>

<script>

import html2canvas from 'html2canvas';

export default {

data() {

return {

list: {},

canvasWidth: 355,

canvasHeight: 600

}

},

onLoad() {

this.getlist()

},

methods: {

Back() {

uni.navigateBack()

},

getlist() {

this.https('xxxxxxx', 'Post').then((res) => {

console.log(res)

this.list = res

})

},

onshare() {

uni.setClipboardData({

data: this.list.url,

success: function() {

uni.showToast({

title: '复制链接成功',

icon: 'none',

duration: 2000

});

},

fail: function() {

console.log('复制失败');

}

});

},

async generateImage() {

// #ifdef APP

const ctx = uni.createCanvasContext('shareCanvas', this);

// 绘制背景

ctx.save();

ctx.drawImage(this.list.image_base, 0, 0, this.canvasWidth, this.canvasHeight);

ctx.restore();

// 绘制二维码

ctx.save();

const qrCodeSize = 160;

const qrCodeX = (this.canvasWidth - qrCodeSize) / 2;

const qrCodeY = this.canvasHeight - 240;

ctx.drawImage(this.list.qrcode, qrCodeX, qrCodeY, qrCodeSize, qrCodeSize);

ctx.restore();

// 绘制完成

ctx.draw(false, () => {

// 将canvas转换为图片

uni.canvasToTempFilePath({

canvasId: 'shareCanvas',

success: (res) => {

// 保存图片到相册

uni.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success: () => {

uni.showToast({

title: '保存成功',

icon: 'success'

});

},

fail: () => {

uni.showToast({

title: '保存失败',

icon: 'none'

});

}

});

},

fail: (err) => {

console.log('生成图片失败', err);

uni.showToast({

title: '生成图片失败',

icon: 'none'

});

}

}, this);

});

// #endif

// #ifndef APP

const element = document.getElementById('capture')

console.log(element)

html2canvas(element).then((canvas) => {

console.log(canvas)

const imagedata = canvas.toDataURL('image/png')

const link = document.createElement('a');

link.href = imagedata;

link.download = 'filename.png'; // 设置下载文件名

link.click(); // 触发下载

uni.showToast({

title: '下载海报成功',

icon: 'none',

duration: 2000

});

})

// #endif

}

}

}

</script>

<style>

.container {

width: 100%;

min-height: 100vh;

background-color: #f5f5f5;

}

.page-body {

width: 100%;

padding: 30rpx;

box-sizing: border-box;

position: relative;

}

.fx {

width: 100%;

margin-bottom: 30rpx;

}

.fx image {

width: 100%;

height: 1226rpx;

}

.cred-arr {

width: calc(100% - 60rpx);

display: flex;

justify-content: center;

position: absolute;

bottom: 260rpx;

}

.cred {

text-align: center;

}

.erweim {

width: 300rpx;

height: 300rpx;

margin: 0 auto;

}

.erweim image {

width: 100%;

height: 100%;

}

.page-foot {

width: 100%;

height: 158rpx;

background-color: #fff;

box-shadow: 0rpx 2rpx 14rpx 6rpx rgba(0,0,0,0.08);

margin-top: 30rpx;

}

.butten_left,

.butten_right {

width: 300rpx;

height: 80rpx;

line-height: 80rpx;

text-align: center;

border-radius: 40rpx;

font-size: 28rpx;

}

.butten_left {

background-color: #ff6b6b;

color: #fff;

}

.butten_right {

background-color: #4CAF50;

color: #fff;

}

</style>

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手5 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_15 小时前
搭建商城系统
java·uni-app·php
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏9 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
CRMEB定制开发11 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
today喝咖啡了吗18 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战20 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术1 天前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递