123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <template>
- <view class="container">
- <canvas canvas-id='myCanvas' class="myCanvas"
- :style="'height:'+windowHeight+'px'+';'+'width:'+windowWidth+'px'">
- </canvas>
- <image class="container_img" :src="imagePath" mode="aspectFit"></image>
- </view>
- </template>
- <script>
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
- export default {
- data() {
- return {
- pixelRatio: 0,
- windowWidth: 0,
- windowHeight: 0,
- paycode_img: "",
- showBgImagePath2: '../../static/images/wx_bg.png',
- showBgImagePath1: '../../static/images/pay_wx.png',
- URL: getApp().globalData.URL,
- imagePath: "",
- tempFilePath: ""
- }
- },
- onLoad(e) {
- this.paycode_img = decodeURI(e.paycode_img);
- uni.getSystemInfo({
- success: (res) => {
- console.log(res)
- this.pixelRatio = res.pixelRatio;
- this.windowWidth = res.windowWidth;
- this.windowHeight = res.windowHeight;
- }
- })
- },
-
- onReady(e) {
- uni.downloadFile({
- url: this.paycode_img, //仅为示例,并非真实的资源
- success: (res) => {
- if (res.statusCode === 200) {
- this.tempFilePath = res.tempFilePath;
- this.drawCanvas();
- }
- }
- });
- },
- onReachBottom(e) {
- },
- methods: {
- drawCanvas() {
- console.log("eeeeee")
- var that = this;
- let ctx = wx.createCanvasContext('myCanvas');
- // 画布宽高
- let ctxW = this.windowWidth;
- let ctxH = this.windowHeight;
- ctx.drawImage(this.showBgImagePath2, 0, 0, ctxW, ctxH);
- ctx.fillStyle = '#ffffff';
- ctx.fillRect(ctxW / 2 - 200 / 2, ctxH / 2 - 120, 200, 240);
- ctx.drawImage(this.tempFilePath, ctxW / 2 - 180 / 2, ctxH / 2 - 110, 180, 180);
- ctx.font = 'bold 20px Arial';
- ctx.textAlign = 'center';
- ctx.fillStyle = '#000000';
- var texTwidth = ctx.measureText('长按识别付款').width;
- ctx.fillText("长按识别付款", ctxW / 2, ctxH / 2 + 100);
- ctx.stroke();
- // ctx.draw();
-
- ctx.draw(false, () => {
- uni.canvasToTempFilePath({
- canvasId: 'myCanvas',
- success: (res) => {
- console.log(res, "myCanvas");
- that.imagePath = res.tempFilePath;
- // this.$wx.previewImage({
- // urls:['https://www.zchys.net/uploads/images/20220223/32dc33e3a4245788f1d6b9440d15a061.jpg'],
- // success: (res) => {
- // // 设置成功
- // console.log("设置成功", res)
- // }
- // })
- this.request({
- url: "funeng/addpicturce",
- data: {
- image: res.tempFilePath,
- },
- }).then(res => {
- console.log(res, "图片")
- var img = res.data;
- this.$wx.previewImage({
- urls: [URL + img],
- success: (res) => {
- // 设置成功
- console.log("设置成功", res)
- }
- })
- })
- }
- })
- })
- }
- },
- }
- </script>
- <style>
- page {
- width: 100%;
- height: 100%;
- }
- .container {
- width: 100%;
- height: 100%;
- }
- .container_img {
- width: 100%;
- height: 100%;
- }
- .myCanvas {
- position: fixed;
- bottom: 999px;
- }
- </style>
|