小程序 canvas

最新推荐文章于 2024-11-06 02:26:30 发布
原创 最新推荐文章于 2024-11-06 02:26:30 发布 · 265 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#canvas 


<view class="intro">
  <view>
    原始价格：<input class="price" type="num" value="{{price}}" bindinput="bindKeyP" placeholder="请输入"/>
  </view>
  <view>
    拼团价格：<input class="price" type="num" value="{{teamprice}}" bindinput="bindKeyT" placeholder="请输入"/>
  </view>
  <view>
    规格：<input class="price" value="{{specs}}" bindinput="bindKeyS" placeholder="请输入"/>
  </view>
  <view>
    文案：<input class="wenan" value="{{wenan}}" placeholder="请输入#号分割(8个字)" bindinput="bindKeyW"/>
  </view>
  <view class="imgitem" >
    上传图片：
    <image style="width: 100%; height: 100%" src="{{poster}}" bindtap="chooseImg" mode="aspectFill" />
  </view>
</view>

<button class='zfbtn m_l' bindtap='formSubmit'>融合</button>
<!--生成海报  -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
  <image src="{{imagePath}}" class='shengcheng' bindtap="previewImg"></image>
  <button class='baocun' bindtap='baocun'>保存</button>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view> 
<view class="canvas-box">
  <canvas type="2d" style="width: 500px;height: 400px;position:fixed;top:9999px" id="mycanvas"/>
</view> 


Page({
  data: {
    imagePath: "",
    maskHidden: false,
    price: '25.6',
    isCreate: false,
    teamprice: '66.3',
    specs: '3包',
    wenan: "卡时间段#快速度快",
    poster: "https://juxinbox.oss-cn-hangzhou.aliyuncs.com/a2ceb86356fd4d9895b0f1d38216f3ca.jpg",
  },
  onLoad: function () {
  },
  onReady() {

  },
  onShow: function () {
  },
  // /点击生成
  formSubmit: function (e) {
    var that = this;
    this.setData({
      maskHidden: false
    });
    wx.showToast({
      title: '融合中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden: true
      });
    }, 1000)
  },
  async createNewImg() {
    var that = this;
    const query = wx.createSelectorQuery();
    const canvasObj = await new Promise((resolve, reject) => {
      query.select('#mycanvas')
        .fields({ node: true, size: true })
        .exec(async (res) => {
          console.log('2323', res)
          resolve(res[0].node);
          const canvas = res[0].node
          const CanvasContext = canvas.getContext('2d')
          console.log('334', CanvasContext)
          
          const dpr = wx.getSystemInfoSync().pixelRatio;
          canvas.width = res[0].width * dpr;
          canvas.height = res[0].height * dpr;
          CanvasContext.scale(dpr, dpr);
          CanvasContext.clearRect(0, 0, 500, 400); //清空画板
          CanvasContext.fillStyle = "#fff";
          CanvasContext.fillRect(0, 0, 500, 400);
          

          let ImgG = canvas.createImage();
          ImgG.src = that.data.poster;
          ImgG.onload = () => {
            console.log('2121',ImgG)
            CanvasContext.drawImage(ImgG,0,0,500,400);
          }
          let ImgBg = canvas.createImage();
          ImgBg.src = 'https://juxinbox.oss-cn-hangzhou.aliyuncs.com/8a15590c713541928071696c7a576d13.png';
          ImgBg.onload = () => {
            console.log('212',ImgBg)
            CanvasContext.drawImage(ImgBg,0,0,500,400);
            //￥
            // CanvasContext.save()
            CanvasContext.font = '20px 宋体'
            CanvasContext.fillStyle = '#000';
            CanvasContext.textAlign = 'center';
            //("文案"，x轴，y轴)
            CanvasContext.fillText("￥", 20, 375);
            CanvasContext.stroke();

            // 团购价
            var pv = that.data.teamprice.split('.');
            CanvasContext.font = 'normal 500 40px DINAlternate-Bold'
            CanvasContext.fillStyle = '#FFF9F9';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)1位x=50;2位55
            CanvasContext.fillText(pv[0], 55, 377);
            CanvasContext.stroke();
            CanvasContext.font = 'normal 500 32px DINAlternate-Bold'
            CanvasContext.fillStyle = '#FFF9F9';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)1位x=75;2位55
            CanvasContext.fillText('.' + pv[1], 90, 377);
            CanvasContext.stroke();
            

            //规格
            
            CanvasContext.font = 'normal 500 16px DINAlternate-Bold'
            CanvasContext.fillStyle = '#FFF';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)1位x=92;2位109
            CanvasContext.fillText('/', 108, 375);
            CanvasContext.stroke();
            

            CanvasContext.font = 'normal 500 16px DINAlternate-Bold'
            CanvasContext.fillStyle = '#FFF';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)1位x=109;2位55
            CanvasContext.fillText(that.data.specs, 124, 377);
            CanvasContext.stroke();
            

            //原价
            CanvasContext.font = 'normal 500 12px Source Han Sans CN'
            CanvasContext.fillStyle = '#FFF';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)
            CanvasContext.fillText('原价:' + that.data.price, 70, 395);
            CanvasContext.stroke();
            CanvasContext.fillStyle = '#fff'
            // ("x轴","Y轴","宽","高")
            CanvasContext.strokeRect(40, 391, 60, 0)
            

            var name = that.data.wenan.split('#');
            //文案(normal->正常 500->粗细 32px->大小 Source Han Sans SC->字体)
            CanvasContext.font = '32px 宋体'
            CanvasContext.fillStyle = '#FFF';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)
            CanvasContext.fillText(name[0], 260, 380);
            CanvasContext.stroke();
            CanvasContext.font = '32px 宋体'
            CanvasContext.fillStyle = '#FFF';
            CanvasContext.textAlign = 'center';
            // ("文案"，x轴，y轴)
            CanvasContext.fillText(name[1], 410, 380);
            CanvasContext.stroke();
            // CanvasContext.restore()

          }
          
         
          
        })

    });
    console.log('33',canvasObj)
    wx.canvasToTempFilePath({
      canvas: canvasObj,
      success: function (res) {
        console.log('234', res)
        var tempFilePath = res.tempFilePath;
        that.setData({
          imagePath: tempFilePath,
          canvasHidden: true
        });
      },
      fail: function (res) {
        console.log(212,res);
      }
    });
    
    // var CanvasContext = wx.createCanvasContext('mycanvas');
    // CanvasContext.setFillStyle("#fff")
    // CanvasContext.fillRect(0, 0, 500, 400);
    // wx.getImageInfo({
    //   src: that.data.poster,
    //   success: function (res) {
    //     console.log('22',res.path)
    //     CanvasContext.drawImage(res.path, 0, 0, 500, 400);
    //     wx.getImageInfo({
    //       src: 'https://juxinbox.oss-cn-hangzhou.aliyuncs.com/8a15590c713541928071696c7a576d13.png',
    //       success: function (res) {
    //         console.log('223',res.path)
    //         CanvasContext.drawImage(res.path, 0, 0, 500, 400);
    //         //￥
    //         CanvasContext.font = 'normal 500 20px DIN Alternate'
    //         CanvasContext.setFillStyle('#FFF');
    //         CanvasContext.setTextAlign('center');
    //         //("文案"，x轴，y轴)
    //         CanvasContext.fillText("￥", 20, 375);
    //         CanvasContext.stroke();

    //         //团购价
    //         var pv = that.data.teamprice.split('.');
    //         CanvasContext.font = 'normal 500 40px DINAlternate-Bold'
    //         CanvasContext.setFillStyle('#FFF9F9');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)1位x=50;2位55
    //         CanvasContext.fillText(pv[0], 55, 377);
    //         CanvasContext.stroke();
    //         CanvasContext.font = 'normal 500 32px DINAlternate-Bold'
    //         CanvasContext.setFillStyle('#FFF9F9');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)1位x=75;2位55
    //         CanvasContext.fillText('.'+ pv[1],90, 377);
    //         CanvasContext.stroke();

    //         //规格
    //         CanvasContext.font = 'normal 500 16px DINAlternate-Bold'
    //         CanvasContext.setFillStyle('#FFF');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)1位x=92;2位109
    //         CanvasContext.fillText('/',108, 375);
    //         CanvasContext.stroke();
    //         CanvasContext.font = 'normal 500 16px DINAlternate-Bold'
    //         CanvasContext.setFillStyle('#FFF');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)1位x=109;2位55
    //         CanvasContext.fillText(that.data.specs,124, 377);
    //         CanvasContext.stroke();

    //         //原价
    //         CanvasContext.font = 'normal 500 12px Source Han Sans CN'
    //         CanvasContext.setFillStyle('#FFF');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)
    //         CanvasContext.fillText('原价:'+that.data.price,70, 395);
    //         CanvasContext.stroke();
    //         CanvasContext.setStrokeStyle('#fff')
    //         // ("x轴","Y轴","宽","高")
    //         CanvasContext.strokeRect(40, 391, 60, 0)

    //         var name = that.data.wenan.split('#');
    //         //文案(normal->正常 500->粗细 32px->大小 Source Han Sans SC->字体)
    //         CanvasContext.font = 'normal 500 32px Source Han Sans SC'
    //         CanvasContext.setFillStyle('#FFF');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)
    //         CanvasContext.fillText(name[0], 260, 380);
    //         CanvasContext.stroke();
    //         CanvasContext.font = 'normal 500 32px Source Han Sans SC'
    //         CanvasContext.setFillStyle('#FFF');
    //         CanvasContext.setTextAlign('center');
    //         // ("文案"，x轴，y轴)
    //         CanvasContext.fillText(name[1], 410, 380);
    //         CanvasContext.stroke();


    //         CanvasContext.draw();
    //       }
    //     })
    //   }
    // })

    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    //非2d
    // setTimeout(function () {
    //   wx.canvasToTempFilePath({
    //     canvasId: 'mycanvas',
    //     success: function (res) {
    //       console.log('234', res)
    //       var tempFilePath = res.tempFilePath;
    //       that.setData({
    //         imagePath: tempFilePath,
    //         canvasHidden: true
    //       });
    //     },
    //     fail: function (res) {
    //       console.log(res);
    //     }
    //   });
    // }, 1000);
  },














  previewImg() {
    if (this.data.imagePath) {
      //预览图片，预览后可长按保存或者分享给朋友
      wx.previewImage({
        urls: [this.data.imagePath]
      })
    }
  },
  bindKeyS: function (e) {
    this.setData({
      specs: e.detail.value
    })
  },
  bindKeyP: function (e) {
    this.setData({
      price: e.detail.value
    })
  },
  bindKeyT: function (e) {
    this.setData({
      teamprice: e.detail.value
    })
  },
  bindKeyW: function (e) {
    this.setData({
      wenan: e.detail.value
    })
  },
  chooseImg: function (e) {
    var that = this;
    // const urls = that.data.urls
    // 选择图片
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log('上传图片', res)
        wx.showLoading({
          title: '上传中',
          mask: true
        })
        const tempFilePaths = res.tempFilePaths[0]
        wx.uploadFile({
          //上传图片的网路请求地址
          url: 'https://test2.juxinbox.com/jmtyjmall/api/1.0/wx/goods/mng/uptImg',
          filePath: tempFilePaths,
          name: 'file',
          success: function (res) {
            console.log("success", res);
            var jsonStr = res.data;
            jsonStr = JSON.parse(jsonStr)
            console.log('313', jsonStr)
            const imgurls = jsonStr.data
            that.setData({
              poster: imgurls
            })
            wx.hideLoading()
          },
          fail: function (res) {
            console.log("error");
            wx.hideLoading()
          }
        });
      }
    })
    console.log('shangchuan', this.data)

  },
  baocun: function () {
    var that = this;
    console.log('用户点击保存');
    wx.getSetting({
      success(res) {
        console.log('223', res)
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              console.log('授权成功')
            },
            fail() {
              console.log('22311', res)
            }
          })
        } else {
          wx.saveImageToPhotosAlbum({
            filePath: that.data.imagePath,
            success(res) {
              wx.showModal({
                content: "已保存",
                showCancel: false,
                confirmText: "好的",
                confirmColor: "#333",
                success: function (res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                    /* 该隐藏的隐藏 */
                    that.setData({
                      maskHidden: false,
                      closeShare2: false,
                      isCreate: false,
                    });
                  }
                },
                fail: function (res) {
                  console.log(11111);
                }
              });
            }
          });
        }
      }
    })
  },
})
【Flutter 问题系列第 25 篇】Flutter 使用自定义字体
“Allen Su”的博客
07-08 1732
Flutter 使用自定义字体
DINAlternateBold.ttf
06-05
DINAlternateBold 字库，网上的都是不正确的，这是我从系统找到的
DINAlternate-bold.otf
08-12
DINAlternate-bold.otf
字体图标第三篇: 使用单个ttf字体
qq_36413371的博客
11-27 795
比如金额字体： DIN Alternate Bold 下载链接： 链接 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { font-family: 'MyNewF
探索Canva Apps SDK：快速开发工具包
gitblog_00041的博客
06-23 606
探索Canva Apps SDK：快速开发工具包 如果你正在寻找一个能够帮助你轻松构建Canva应用的高效平台，那么欢迎来到Canva Apps SDK的starter kit世界！这个项目为开发者提供了从零开始搭建应用所需的一切资源和实例，让你在几分钟内即可启动并运行你的第一个Canva应用。 项目介绍 Canva Apps SDK starter kit 是一个基于TypeScript和Rea...
【亲测免费】 Salesforce Force.com Canvas SDK：轻松集成第三方应用到Salesforce
gitblog_00075的博客
03-17 455
Salesforce Force.com Canvas SDK：轻松集成第三方应用到Salesforce 项目介绍 Salesforce Force.com Canvas SDK 是一个强大的工具，旨在帮助开发者将第三方应用程序无缝集成到 Salesforce 平台中。与传统的 API 集成不同，Canvas 提供了一种在 UI 层面连接应用程序的机制，使得第三方应用能够直接嵌入到 Salesfo...
精选资源
微信小程序canvas实现文字缩放
01-12
综上所述，实现微信小程序canvas的文字缩放主要涉及`setFontSize`方法的使用以及事件监听来动态调整字体大小。通过熟练掌握canvas API，开发者可以在微信小程序中构建出各种炫酷的图形和动画效果，提升用户体验。
精选资源
微信小程序canvas实现文字自由移动
01-12
通过阅读和理解这些文件，你可以深入了解微信小程序Canvas的使用以及如何实现文字动画效果。此外，实践操作是学习的最佳方式，尝试修改代码，调整参数，观察不同的结果，这将有助于加深对Canvas和微信小程序动画机制...
精选资源
微信小程序canvas实现椭圆（圆形）元素自由移动
01-09
总结来说，微信小程序Canvas实现椭圆（圆形）元素的自由移动，涉及到的主要知识点有：Canvas 2D渲染上下文、`arc()`方法绘制圆形、触摸事件监听以及根据触摸事件动态更新图形位置。通过实践和理解这些概念，开发者...
精选资源
微信小程序canvas实现矩形缩放
01-09
微信小程序canvas实现矩形缩放
精选资源
微信小程序canvas实现直线自由移动
01-12
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上绘制图形，包括直线、曲线、圆形等。本文将详细讲解如何利用Canvas API在微信小程序中实现直线的自由移动。 首先，我们要理解Canvas的基本概念。...
optimizely-canvas-js-sdk:一个SDK，提供用于在Optimizely Canvas上进行开发JavaScript实用程序
05-01
优化画布js-sdk 一个SDK，提供用于在Optimizely Canvas上进行开发JavaScript实用程序。 安装 要在您的节点环境中安装此软件包，请运行： npm install optimizely-canvas-sdk 用法 注意：此示例请求已正确签名（尽管具有较弱的演示秘密），因此请随时尝试使用此软件包进行实际解析。 假设您在托管了Canvas应用程序。 如果Optimizely满足以下Canvas请求： https://michelangelo.appspot.com/canvas?signed_request=ZDhiNWFkMTA0ZjFjZjFhMDU0NWQzZjE5MTI1YWZlNTk0YjQzYTU5Y2NiMjgxZjY2NTgxYmM3YzYyYjgxNzAwMg==.eyJjb250ZXh0Ijp7ImVudmlyb25tZW50Ij
ClearCanvas:开源DICOM和RIS / PACS信息学平台-开源
04-29
开源代码库，可实现成像方面的软件创新。 可扩展且强大的平台包括查看，归档，管理，图像的工作流和分发，以及用于核心能力工具开发的开放式体系结构。
ClearCanvas Developer's Guide
08-08
ClearCanvas Developer's Guide，ClearCanvas的用户手册
ClearCanvas完整源码及编译需要动态库
04-12
开源PACS产品和 DICOM 浏览器，C#语言编写，ClearCanvas完整源码及编译需要动态库
Salesforce Canvas Framework SDK 项目推荐
最新发布
gitblog_00095的博客
11-06 882
Salesforce Canvas Framework SDK 项目推荐 项目基础介绍和主要编程语言 Salesforce Canvas Framework SDK 是一个由 Salesforce 公司开发的开源项目，旨在帮助第三方应用程序在 Salesforce 平台上实现无缝集成。该项目的主要编程语言包括 Java 和 JavaScript。通过提供 Java/JavaScript SDK 和...
ClearCanvas源码解析3：中文乱码问题
weixin_33843409的博客
03-16 246
　　国内的DCM文件里，有的会用到中文，在用ClearCanvas显示图像时，一些信息有出现乱码的问题。。 　　乱码问题比较简单，无非就是字符集不对。。 　　我们先来看一下ClearCanvas是怎么解析字符的（从DCM文件中读取出来的字节） 这里是字符转换实现 。。看起来相当复杂。。转换一个byte数组还要写这么多？？？ 字面意思是：特定的字符集的解析。 　　...
IOS字体与安卓字体渲染不一致
AlegFox的博客
07-12 3670
前端开发中经常会遇到各种各样的兼容问题,记录一次IOS字体与安卓字体渲染不一致,当字体包名字中包含’-Bold’时错误代码如下: IOS:不会渲染’font-weight: bold’只是加载了’DINAlternate-Bold’字体包​ 安卓:字体包本身为粗体(Bold),又渲染一次’font-weight:bold’导致加粗​ 询问相关开发,是否开发环境做有字体引入限制. 总结: 遇到这个问题的时候,一直以为是引入出了问题.但是IOS却能正常显示,所以证明引入没有问题.问了同事发现时,开发环境
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值