把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-canvas

3.在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>

完成，最终效果：点击导出图片，会生成一张本地图片

把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）相关推荐

uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
uni-app - 电子签字板组件（签名专用写字画板，支持调整写字板 “横纵“ 方向，可调整线条粗细颜色等，Canvas 绘制非常丝滑流畅）完美兼容 H5 APP 小程序，最好用的画板签字教程插件源码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,本文代码干净整洁注释详细. 本文实现了全端兼容,签名专用的写字板组件,真机流畅丝滑且无 BUG, 您直接复制组件源码,按照详 ...
java freemark导出word （模板、单张图片、多张图片源码）
java freemark导出word (模板.单张图片.多张图片源码) 首先模板设置代码编辑设置word只读.全部环境设置.jar包模板设置 ** 设置模板然后另存为这里一定要选择对xml ...
android 静态图片自动切换,Android静态图片人脸识别的完整demo(附完整源码)
Android静态图片人脸识别的完整demo(附完整源码) 来源:互联网作者:佚名时间:2015-03-24 20:07 本文介绍了android静态识别人脸并进行标记人眼位置及人脸框的完整dem ...
中文汉字注音，汉字转拼音，支持图片识别文字，支持结果转图下载，附上小程序核心源码
"文字注音"小程序在微信.字节跳动.支付宝.QQ等小程序平台同步上线,微信.头条.抖音.支付宝.QQ中搜索"文字注音"即可获得. 一.功能汉字转拼音,支持图片 ...
python实战===图片转换为字符的源码（转）
#cmd执行命令为>>> python xx.py pic.png#-*- coding:utf-8 -*-from PIL import Image import argparse ...
Python 爬虫之爬虫的一些基本知识和基本操作（爬取视频、图片、获取网页源码等）整理
Python 爬虫之爬虫的一些基本知识和基本操作(爬取视频.图片.获取网页源码等)整理目录
大智慧365除权数据导出存通达信板块源码+工具
大智慧8.x除权数据读取,支持导入到通达信自定义的版块中. 通达信的除权数据是加密的,看别人有人解出来了.我搞不定,但大智慧的数据比较好读取,下载了365发现除权数据和以前已经不一样了,网上基本都没 ...
html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）

把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）相关推荐

最新文章

热门文章