|
|
- <template>
- <view class="page">
- <view class="flex-colt content">
- <view style="width: 750rpx; height: 1125rpx;">
- <canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
- </view>
-
- <view class="flex-rowc btns">
- <button plain class="flex-rowc btn btn-save" @click="saveImg" >保存海报</button>
- </view>
- </view>
- </view>
- </template>
-
- <script setup>
- import { ref, reactive, computed } from 'vue'
- import { onLoad } from '@dcloudio/uni-app'
- import { useStore } from "vuex"
- import authorize from '@/utils/authorize.js'
-
- const store = useStore();
-
- const configList = computed(() => {
- return store.getters.configList
- })
-
- const url = ref()
-
- const canvasData = reactive({
- width: null,
- height: null,
- canvas: null
- })
-
- const savePath = ref()
-
- const draw = () => {
-
- uni.showLoading({
- title: "拼命绘画中..."
- })
-
- wx.createSelectorQuery()
- .select('#myCanvas') // 绘制的canvas的id
- .fields({
- node: true,
- size: true
- })
- .exec(async (res) => {
- const _canvas = res[0].node
- // 渲染上下文
- const ctx = _canvas.getContext('2d')
- // Canvas 画布的实际绘制宽高
- const width = res[0].width
- const height = res[0].height
- // 初始化画布大小
- const dpr = wx.getWindowInfo().pixelRatio
-
- //根据dpr调整
- // dpr 2 4
- // 3 6
- console.log("--dpr", dpr)
- _canvas.width = width * dpr
- _canvas.height = height * dpr
-
- let Ratio = _canvas.width / 750
-
- canvasData.canvas = _canvas
- ctx.scale(dpr, dpr)
- ctx.clearRect(0, 0, width, height)
-
- canvasData.width = _canvas.width
- canvasData.height = _canvas.height
-
- //背景图片
- const bgImage = _canvas.createImage()
- bgImage.src = configList.value.background_poster.paramValueImage
- bgImage.onload = () => {
-
- ctx.drawImage(bgImage, 0, 0, width, height)
-
- //二维码图片
- const coderImage = _canvas.createImage()
- coderImage.src = url.value
- coderImage.onload = () => {
- const x = 270 * Ratio / dpr
- const y = 672 * Ratio / dpr
- const size = 197 * Ratio / dpr
- ctx.drawImage(coderImage, x, y, size, size)
-
- uni.hideLoading()
-
- setTimeout(() => {
- wx.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: _canvas.width,
- height: _canvas.height,
- canvas: _canvas,
- success: (res) => {
- let tempFilePath = res.tempFilePath;
- savePath.value = tempFilePath
- console.log('--savePath', savePath.value)
- // saveImgToPhone(tempFilePath)
- },
- fail: (err) => {
- console.log('--canvasToTempFilePath--fail', err)
- }
- });
- })
- }
-
- }
-
- })
-
- }
-
- const saveImg = () => {
- authorize('scope.writePhotosAlbum').then((res) => {
- saveImgToPhone(savePath.value)
- })
- }
-
- const saveImgToPhone = (image) => {
- /* 获取图片的信息 */
- uni.getImageInfo({
- src: image,
- success: function(image) {
- /* 保存图片到手机相册 */
- uni.saveImageToPhotosAlbum({
- filePath: image.path,
- success: function() {
- uni.showModal({
- title: '保存成功',
- content: '图片已成功保存到相册',
- showCancel: false
- });
- },
- complete(res) {
- console.log(res);
- }
- });
- }
- });
- }
-
- onLoad((options) => {
- // url.value = options.url
- // 暂时用配置项
- url.value = configList.value.share_qr_url.paramValueImage
-
- draw()
- })
- </script>
-
- <style scoped lang="scss">
- .page {
- background-color: #FFFFFF;
- width: 100vw;
- min-height: 100vh;
-
- .content {
- padding-top: 19rpx;
- }
-
- .btns {
- width: 100%;
- margin-top: 7rpx;
- }
-
- .btn {
- display: inline-block;
- border: none;
- width: 594rpx;
- height: auto;
- padding: 27rpx 0;
- border-radius: 94rpx;
- background-color: #FFBF60;
- color: #FFFFFF;
- font-size: 30rpx;
- line-height: 40rpx;
- }
- }
- </style>
|