uniapp canvas生成推广海报-uniapp截图保存为什么截图不了二维码

地址为:

因为这个二维码是通过canvas画出来的,在测试中发现,ios中可以被保存到相册,在安卓中就是,页面中的其他内容都被截图下来了,但是二维码不行

预览效果

1.主页面  (引入组件,编写数据逻辑)

<template>

<view class="content">

<view class="context">

<modulationColor

:colorWidth="colorWidth"

:colorHeight="colorHeight"

:colorImg="colorImg"

:colorShape="colorShape"

@getColorRGB="getColorRGB"

></modulationColor>

</view>

</view>

</template>

<script>

import modulationColor from "./";

export default {

name: "lighting",

components: {

modulationColor,

},

data() {

return {

colorWidth: 200,

colorHeight: 200,

colorShape: 2,

colorImg: require("@/static/"),

};

},

methods: {

getColorRGB(rgbColor) {

(rgbColor, "获取的颜色");

},

async initializeData() {},

},

mounted() {

();

},

};

</script>

<style lang="scss" scoped>

.context {

width: 90vw;

margin-top: 30rpx;

background: #ffffff;

border-radius: 44rpx;

}

</style>

2.组件页面    (组件页面,负责选择颜色)

<template>

<view class="canvasPage">

<!-- 红(R)、绿(G)、蓝(B) -->

<view class="textArea">

<view class="title">灯光调节</view>

<view class="RGB">

<view

:style="{ background: canvasBackground }"

class="showColor"

></view>

<view class=""> {{ canvasBackground }}</view>

</view>

</view>

<view

class="canvasArea"

:style="{

height: colorHeights + 'px',

zIndex: 999,

}"

>

<view>

<canvas

@tap="tapCanvas"

:style="{

width: colorWidths + 'px',

height: colorHeights + 'px',

}"

canvas-id="myCanvas"

id="myCanvas"

></canvas>

</view>

</view>

<view class="colorItem">

<view

class="default"

v-for="(item, index) in defaultColorList"

:key="index"

@click="handleDefaultColor(item)"

>

<view class="color" :style="{ background:  }"></view>

<view class="text">{{  }}</view>

</view>

</view>

</view>

</template>

<script>

export default {

props: {

//选中图的宽度

colorWidth: {

type: Number,

default: 300,

},

//选中图的高度

colorHeight: {

type: Number,

default: 300,

},

//是否进行裁剪,1.正方形 2.圆形

colorShape: {

type: Number,

default: 1,

},

//是否进行裁剪,1.正方形 2.圆形

colorImg: {

type: String,

default: require("@/static/"),

},

},

data() {

return {

colorWidths: 1, //canvas图片的宽度

colorHeights: 1, //canvas图片的高度

pointWidth: 1, //选中点的宽度

pointHeight: 1, //选中点的高度

canvasBackground: "RGB(234, 216, 78)",

defaultColorList: [

{

title: "极光白",

background: "RGB(255, 255, 255)",

},

{

title: "日光白",

background: "RGB(255, 252, 213)",

},

{

title: "精致黄",

background: "RGB(242, 234, 157)",

},

{

title: "日落黄",

background: "RGB(234, 216, 78)",

},

],

};

},

mounted() {

 = parseInt();

 = parseInt();

();

},

methods: {

/*初始化画布*/

initCanvas() {

let that = this;

const context = ("myCanvas", this);

if ( == 2) {

(

 / 2,

 / 2,

 / 2,

0,

2 * ,

true

); //裁剪形状

(); //进行裁剪

}

(

,

0,

0,

,

); // 画图片在画布上

();

();

setTimeout(function () {

//必须延迟执行 不然H5不显示

(); //修复图层

(); //必须加上  uniapp 没这儿玩意儿 显示不出来不比原生  不加可以显示

}, 500);

},

//点击调色板事件

tapCanvas(e) {

let that = this;

let clientX = e.target.x - e.;

let clientY = e.target.y - e.;

let color = ({

canvasId: "myCanvas",

x: clientX,

y: clientY,

width: ,

height: ,

success(res) {

if ( >= 4) {

let getColorRGB =

"RGB(" +

[0] +

"," +

[1] +

"," +

[2] +

")";

 = getColorRGB;

that.$emit("getColorRGB", );

} else {

("获取颜色异常");

}

},

fail: function (error) {

("fail", error);

},

});

},

//选择默认颜色事件

handleDefaultColor(data) {

 = ;

this.$emit("getColorRGB", );

},

},

};

</script>

<style scope lang="scss">

.canvasPage {

width: 100%;

padding: 50rpx 40rpx 50rpx 40rpx;

}

.textArea {

width: 100%;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

margin-top: 20rpx;

margin-bottom: 20rpx;

.title {

font-size: 24rpx;

font-weight: bold;

color: #344d78;

}

.RGB {

font-size: 24rpx;

font-weight: 400;

color: #aebdd7;

}

}

.canvasArea {

display: flex;

flex-direction: row;

justify-content: center;

align-items: flex-start;

}

.showColor {

width: 20rpx;

height: 20rpx;

margin-right: 20rpx;

}

.colorItem {

width: 100%;

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 50rpx;

.default {

.color {

width: 100rpx;

height: 100rpx;

border-radius: 50%;

}

.text {

font-size: 24rpx;

font-weight: 400;

color: #aebdd7;

line-height: 80rpx;

}

}

}

</style>

3.调色板图片

4.最终效果