涉及好多个问题

比如保存到本地有黑色背景

怎么用把文字和图 画到画布上

腾讯的东西就是坑多了 直接上代码吧 啥也不说额

pic.wxml

<view class='container'>
<canvas bindtap='clickMe' canvas-id='testCanvas' class='testCanvas' style="height:{{height}}px;width:{{width}}px;background-color:white;" ></canvas>
</view>

pic.js

Page({

  data: {
website: '123.com',
username: '',
password: "",
width:,
height:,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let rpx = ; wx.getSystemInfo({
success(res) {
rpx = res.windowWidth / ;
},
}) var that = this; const ctx = wx.createCanvasContext('testCanvas');//这个代码要放onload里面 腾讯真坑 啥都不说
ctx.setFillStyle('#FFFFFF')
ctx.fillRect(, , that.data.width, that.data.height);//这个是防止截图黑屏的 先进行填充
ctx.drawImage("../images/cat_msg.png", , , , );//图片的路径注意细节,这个名字是放在和JS相同目录的 用的这个名字
ctx.setFontSize() //字体大小
ctx.textAlign = "center"; //文字居中
ctx.setFillStyle('#242424')
ctx.fillText('使用说明', , )
ctx.fillText('1.打开电脑浏览器,在浏览器中输入', , )
ctx.setFillStyle('#FF3030')
ctx.fillText(that.data.website, , )
ctx.setFillStyle('#242424')
ctx.fillText('2.填写用户名:', , )
ctx.setFillStyle('#FF3030')
ctx.fillText(that.data.username, , )
ctx.setFillStyle('#242424')
ctx.fillText('3.填写验证码:', , )
ctx.setFillStyle('#FF3030')
ctx.fillText(that.data.password, , )
ctx.setFillStyle('#242424')
ctx.fillText('4.进入页面,找到文件进行下载使用', , )
ctx.fillText('注:可以点击右上角“修改”,进行修', , )
ctx.fillText('改用户名和提取码操作', , )
ctx.drawImage("../images/button_printscreen.png", , , , );
ctx.setFillStyle('#ffffff');
ctx.draw();
},
clickMe() {
var that = this;
wx.canvasToTempFilePath({
width: that.data.width,
height: that.data.height,
destWidth: that.data.width,
destHeight: that.data.height,
canvasId: 'testCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res)
wx.hideLoading();
wx.showToast({
title: '保存成功',
});
},
fail() {
wx.hideLoading()
}
})
}
})
} })

说多了 都是泪

【亲测可用网上的不靠谱居多】一个完整的用canvas画内容然后保存到本地的例子的更多相关文章

  1. C#读取Excel设置(亲测可用)

    OpenFileDialog openFD = new OpenFileDialog(); openFD.FileName = ""; openFD.Filter = " ...

  2. IntelliJ13+tomcat+jrebel实现热部署(亲测可用)

       网上有很多介绍intellij idea整合jrebel插件实现热部署的文章,但是有的比较复杂,有的不能成功,最后经过各种尝试,实现了整合,亲测可用!步骤说明如下:   一.先下载jrebel安 ...

  3. jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年(最新亲测可用)

    破解补丁激活 之前看了好多的其它的方法感觉都不是很靠谱还是这个本人亲试可以长期有效不仅能激活pycharm.jetbrains的JetBrains PyCharm 2018.3.1破解激活到2100年 ...

  4. IntelliJ IDEA2017 激活方法 最新的(亲测可用)

    IntelliJ IDEA2017 激活方法(亲测可用): 搭建自己的授权服务器,对大佬来说也很简单,我作为菜鸟就不说了,网上有教程. 我主要说第二种,现在,直接写入注册码,是不能成功激活的(如果你成 ...

  5. [转]QT子线程与主线程的信号槽通信-亲测可用!

    近用QT做一个服务器,众所周知,QT的主线程必须保持畅通,才能刷新UI.所以,网络通信端采用新开线程的方式.在涉及到使用子线程更新Ui上的控件时遇到了点儿麻烦.网上提供了很多同一线程不同类间采用信号槽 ...

  6. VMware Workstation Pro 14注册码,亲测可用

    ** VMware Workstation Pro 14注册码 ** 作者网上搜集整理 作者使用的密钥是: AC5XK-0ZD4H-088HP-9NQZV-ZG2R4 亲测可用 以下密钥未测试 CG5 ...

  7. 亲测可用!免费下载QQ音乐大部分资源!

    优化后亲测可用!免费下载QQ音乐大部分资源 通知 时间问题 博客园这边暂时停更要下载的去GitHub或者90盘 GitHub项目地址 https://github.com/TotoWang-hhh/m ...

  8. Linux下通过crontab及expect实现自动化处理 --亲测可用

    #!/usr/bin/expect -fspawn /home/scripts/bckup.shexpect "Enter password: "  send "WWQQ ...

  9. 亲测可用!!!golang如何在idea中保存时自动进行代码格式化

    亲测可用,golang在idea中的代码自动格式化 1.ctrl+alt+s打开设置界面,选择[Plugins] -> [Install JetBrains plugin...] -> 搜 ...

随机推荐

  1. 导入到eclipse里的工程挺大的,然后就一直报: An internal error occurred during: "Building workspace". GC overhead limit exceeded 这个错误。

    解决方法: 原因是Eclipse默认配置内存太小需要更改Eclipse安装文件夹下的eclipse.ini文件. Eclipse.ini默认文件如下: 修改如下: -Xms1024m -Xmx2048 ...

  2. java的初学感想

    了解了JAVA的来源后,翻阅了一点关于java特性的书籍,众所周知,安全性和可移植性是java得以成功的前提,对此我想发表一点看法. 1.安全性:任何东西的安全性都是相对的,虽然java编译生成的字节 ...

  3. getParameter和getAttribute的区别

    1.getAttribute 是取得jsp中 用setAttribute 设定的attribute 2.parameter得到的是String:attribute得到的是object 3.reques ...

  4. 小妖精的完美游戏教室——东方PROJECT,同人,符卡系统

    //================================================================//// Copyright (C) 东方同人社// All Rig ...

  5. vc6.0问题

    1.VC6不自动提示函数的参数 是工程中的.ncb文件有问题,把这个文件删除就正常了. 2.设置代码提示快捷键 Tools-->定制-->弹出框,按照下图设置  3.报错 (1)ident ...

  6. Exp6 信息搜集与漏洞扫描

     Exp6 信息搜集与漏洞扫描 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现. ...

  7. Redis不支持ssl

    一直在公司内部推荐redis做cache管理,今天偶然想起虽然C#没问题,可是c/c++没查过可不可行. 结果查了一下,还真tmd有问题,官方的c client版本只支持linux side的,根本没 ...

  8. C++ 基于凸包的Delaunay三角网生成算法

    Delaunay三角网,写了用半天,调试BUG用了2天……醉了. 基本思路比较简单,但效率并不是很快. 1. 先生成一个凸包: 2. 只考虑凸包上的点,将凸包环切,生成一个三角网,暂时不考虑Delau ...

  9. rs232接口定义

  10. Spring.factories扩展机制

    和Java SPI的扩展机制类似,Spring Boot采用了spring.factories的扩展机制,在很多spring的starter 包中都可以找到,通过在 META-INF/spring.f ...