把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）
先看下效果图：（上面灰色块内的用div和CSS写出来的，然后绘制到canvas）
实现此功能需要使用到一个微信小程序的插件，插件官方文档地址：
wxml-to-canvas | 微信开放文档
本博客代码环境，uniapp（vue）
实现流程：
1.创建uniapp项目，命名为 （htmlToCarvasDemo）
2.Alt + C 打开终端，运行 npm i x-wxml-to-canvas，安装插件
npm i x-wxml-to-canvas3.在index目录添加，demo.js 文件，代码为
const wxml = `
<view class="container" ><view class="item-box red"></view><view class="item-box green" ><text class="text">yeah!</text></view><view class="item-box blue"><image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image></view>
</view>
`const style = {container: {width: 300,height: 200,flexDirection: 'row',justifyContent: 'space-around',backgroundColor: '#ccc',alignItems: 'center',},itemBox: {width: 80,height: 60,},red: {backgroundColor: '#ff0000'},green: {backgroundColor: '#00ff00'},blue: {backgroundColor: '#0000ff',alignItems: 'center',justifyContent: 'center',},text: {width: 80,height: 60,textAlign: 'center',verticalAlign: 'middle',},img: {width: 40,height: 40,borderRadius: 20,}
}module.exports = {wxml,style
}
4.编辑index.vue
<template><view class="content"><xWxmlToCanvas ref="xWxmlToCanvas" :hide="false" :width="width" :height="height" :xStyle="style" :xWxml="wxml"></xWxmlToCanvas><!-- <button @click="renderToCanvas">渲染到canvas</button> --><button @click="extraImage">导出图片</button><image :src="src" :style="{width: width, height: height}"></image></view>
</template><script>import xWxmlToCanvas from '@/node_modules/x-wxml-to-canvas/x-wxml-to-canvas';const {wxml,style} = require('./demo.js')export default {components: {xWxmlToCanvas},data() {return {wxml: wxml,style: style,width: 300,height: 200,src: "",}},onReady() {setTimeout(()=>{this.renderToCanvas()},1000)},methods: {renderToCanvas() {const p1 = this.$refs.xWxmlToCanvas.renderToCanvas() //渲染至canvasp1.then(res => {console.log('res', res)})},extraImage() {const p2 = this.$refs.xWxmlToCanvas.canvasToTempFilePath()console.log('p2', p2)p2.then(res => {console.log('res', res)this.src = res;})},// canvasToTempFilePath() {// this.$refs.xWxmlToCanvas.canvasToTempFilePath() //生成图片// this.$refs.xWxmlToCanvas.getCanvasImage() //获取图片// this.$refs.xWxmlToCanvas.saveImageToPhotosAlbum() //下载图片// }}}
</script><style>/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */.charts-box {width: 100%;height: 300px;}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>
完成，最终效果：点击导出图片，会生成一张本地图片
相关文章：
C 语言中的 switch 语句 case 后面是否需要加大括号
事件原由为编辑器的自动缩进，当 case 换行后不自动缩进。 于是在在想可以可否在 case 后面再大括号，让其自动缩进。 查了资料，发现 case 是可以加大括号的，相当于代码块。 而且还有另外一个用途，可以代码块头部定义变量…
问题 c: 插入排序_插入排序：它是什么，以及它如何工作
问题 c: 插入排序Insertion sort is a simple sorting algorithm for a small number of elements.插入排序是一种针对少量元素的简单排序算法。 例： (Example:) In Insertion sort, you compare the key element with the previous elements. If the previous ele…
在Java连接hbase时出现的问题
问题1： java.net.ConnectException: Connection refused: no further information zookeeper.ClientCnxn: Session 0x0 for server null zookeeper未启动，或无法连接，从查看各节点zookeeper启动状态、端口占用、防火墙等方面查看原因。问题2&…
codeforces 8C. Looking for Order 状压dp
题目链接 给n个物品的坐标， 和一个包裹的位置， 包裹不能移动。 每次最多可以拿两个物品， 然后将它们放到包里， 求将所有物品放到包里所需走的最小路程。 直接状压dp就好了。 #include <iostream> #include <vector> #…
H5刷新当前页面
location.reload();
sql的外键约束和主键约束_SQL主键约束用示例解释
sql的外键约束和主键约束A primary key is a column or a set of columns that uniquely identifies each row in a table.主键是一列或一组列，它们唯一地标识表中的每一行。 It’s called a “constraint” because it causes the system to restrict the data al…
str.format() 格式化字符串函数
语法 它通过{}和:来代替%。 “映射”示例 通过位置 In [1]: {0},{1}.format(kzc,18) Out[1]: kzc,18 In [2]: {},{}.format(kzc,18) Out[2]: kzc,18 In [3]: {1},{0},{1}.format(kzc,18) Out[3]: 18,kzc,18字符串的format函数可以接受不限个参数，位置可以…
css学习任务二：切图写代码
今天的任务是根据UI给的图进行切图，然后写出相应的页面，UI如下： 收获：学习前端知识一年有余，却因为老是找不到实战项目而得不到实际的提高，直到今天的学习我才知道切图是怎么一回事，明白了你看到…
Vue mixins（混入） 附代码示例详解
mixins 我们称它为 “混入” ； 官方的解释： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的…
软件开发面试_如何为成功的软件开发工作面试做准备
软件开发面试Job interviews are stressful for many people. Besides the pressure of getting hired, you have to answer various questions before and during the interview – like what to wear, how to get prepared, how much money to ask for, and much more.求职面…
bzoj1070————2016——3——14
传送门：http://www.lydsy.com/JudgeOnline/problem.php?id1070； 题目概括： Description 同一时刻有N位车主带着他们的爱车来到了汽车维修中心。维修中心共有M位技术人员，不同的技术人员对不同的车进行维修所用的时间是不同的。现…
CSS兼容性汇总
http://www.jb51.net/css/469020.html CSS属性Hack 把属性hack分为 前缀属性hack和 后缀属性hack CSS属性Hack（前缀）针对的浏览器_color:red;IE6及其以下的版本*color:red ;或者 color:red;IE7及其以下的版本CSS属性Hack（后缀）针对…
Vue 过渡组件，可实现组件或者页面的动画过渡或者css过渡
使用过渡效果，可以优化用户体验，Vue给我们封装了一个很好用的组件，专门用来处理过渡效果，下面我们来看看怎么使用它； Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加…
解释型和编译型编程语言_解释型和编译型编程语言：有什么区别？
解释型和编译型编程语言Every program is a set of instructions, whether it’s to add two numbers or send a request over the internet. Compilers and interpreters take human-readable code and convert it to computer-readable machine code. 每个程序都是一组指令&a…
Beta 冲刺 （1/7）
队名：天机组 组员1友林 228（组长） 今日完成：查找了相关资料及api文档。明天计划：继续相关资料及源码。剩余任务：优化网络通讯机制主要困难：查找的代码调试较为困难。收获及疑问：暂无…
Vue全局路由侦听beforeEach路由守卫附代码使用示例
使用路由守卫beforeEach，可以实现路由侦听； 全局侦听路由跳转的实现代码： app.vue onLaunch: function(e) {this.$router.beforeEach((to, from, next) > {console.log($router,to,from);next();}); } to 是跳转路由之后的page对象&am…
Debug模式下加载文件，运行程序异常的慢
今天在进行单元测试的时候，debug模式下加载速度很慢，但是run模式下速度很快。 原因：在debug模式下，断点位置不当，解决办法 移除编译器中的所有断点。转载于:https://www.cnblogs.com/nww57/p/5277113.html
如何在Python中对字符串进行子字符串化
Python offers many ways to substring a string. It is often called ‘slicing’.Python提供了许多对字符串进行子字符串化的方法。 它通常被称为“切片”。 It follows this template:它遵循以下模板： string[start: end: step]Where,哪里， start:…
HttpPost导包遇到的问题
直接在当前项目 build.gradle文件修改如下 android { useLibrary org.apache.http.legacy compileSdkVersion 24 buildToolsVersion "24.0.0" defaultConfig { applicationId "com.ican.subjects" minSdkVe…
真相也许是这样
这两天同学们陆续上传了自己编写的小程序，等老师审查给成绩的时候才发现一部分同学是负分。原因就是他们有抄袭之嫌。恰巧我当时就在一位得了负分的同学旁边，他一脸郁闷的对我说”没道理啊，这是我自己编的啊“。这个我知道，的确是…
微信小程序全局监听路由变化
小程序有一个API可以侦听全局路由跳转，官方文档里面没有但是可以使用。 wx.onAppRoute((res) > { console.log(路由监听,{res}) })
c语言面向对象编程中的类_C ++中的面向对象编程
c语言面向对象编程中的类Object oriented programming, OOP for short, aims to implement real world entities like inheritance, hiding and polymorphism in programming. 面向对象的编程，简称OOP，旨在在编程中实现诸如继承，隐藏和多态性…
Maven build标签
前言： <build >设置，主要用于编译设置 1.分类 在Maven的pom.xml文件中，存在如下两种<build>： （1）全局配置（project build） 针对整个项目的所有情况都有效 （2…
Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图： 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots： scopedSlots: {customRender: } 实现完整代码： <template><div><div class"table-wrapper"><!--每个列的宽度必须比列名总长度大才能…
shell基本用法
#!/bin/bash #使用哪个shell执行echo "hello world" username"tom" echo $username#chmod x ./test.sh 设置可以执行文件#for循环输出 for skill in Ada Coffe Action Java; doecho "I am good at ${skill}Script" done #for file in ls /etc; d…
brad wu_一百万归功于Brad Traversy
brad wuBrad Traversy is one of the most appreciated web development teachers on YouTube and he is getting close to 1 Million subscribers. We decided to help him reach this goal by the end of 2019.布拉德特拉弗西 ( Brad Traversy)是YouTube上最受赞赏的网络开发…
CSS常见布局解决方案
最近要准备移动端项目，大半年没好好写过CSS了，今天恶补了一下CSS的一些布局，下面做一些分享。 水平居中布局 1.margin 定宽 <div class"parent"><div class"child">Demo</div> </div><style…
java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误
omcat 启动时报以下错误: java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully 错误 这个错误 碰到好几次了，我的tomcat使用非常频繁，而且部署项目比较多，经常会出一些自己看不懂的问题， 今天解决了这…
SQL替换字段中部分字符
示例： tb_item表中image字段中一数据为：jd/4ef8861cf6854de9889f3db9b24dc371.jpg update tb_item set image replace(image,jd,taobao); 替换后: taobao/4ef8861cf6854de9889f3db9b24dc371.jpg
flexbox_Flexbox中的Flex基础属性
flexbox弹性基础 (Flex Basis) The flex-basis property defines the size of the flex-item along the main axis of the flex container. The main axis is horizontal if flex-direction is set to row and it’ll be vertical if the flex-direction property is set to co…