h5 uniapp html2canvas生成海报,保存到本地功能实现；

html2canvas生成海报,保存到本地功能实现

1. 在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数
2. 组件的使用，伪代码不要直接复制uniapp语法
3. h5保存生成后的图片到本地方法;

1. 在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数

在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数。
html2canvas.vue:

<template><!-- <view > --><view class="html2canvas" :prop="domId" :change:prop="html2canvas.create"><slot></slot><!-- </view> --></view>
</template><script>import { base64ToPath } from 'image-tools';export default {name: '',props: {domId: {type: String,required: true}},methods: {async renderFinish(base64) {try{const imgPath = await base64ToPath(base64, '.jpeg');console.log(imgPath)this.$emit('renderFinish', imgPath);}catch(e){//TODO handle the exceptionconsole.log('html2canvas error', e)}},showLoading() {uni.showLoading()},hideLoading() {uni.hideLoading();}}}
</script><script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {methods: {async create(domId) {try {const timeout = setTimeout(async ()=> {const shareContent = document.querySelector(domId);console.log("XXXX",shareContent,shareContent.offsetWidth,shareContent.offsetHeight)const canvas = await html2canvas(shareContent,{width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边height: shareContent.offsetHeight,//防止白边// width:414,//设置canvas尺寸与所截图尺寸相同，防止白边// height: 896,//防止白边logging: true,useCORS: true,scale:3,//处理模糊问题});console.log("canvas",canvas,canvas.windowWidth,canvas.windowHeight)const base64 = canvas.toDataURL('image/jpeg', 1);this.$ownerInstance.callMethod('renderFinish', base64);clearTimeout(timeout);}, 500);} catch(error){console.log(error)}}}
}
</script><style lang="scss"></style>

2. 组件的使用，伪代码不要直接复制uniapp语法

        <html-to-canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish" class="canvas"><view class="canvas-main">内容</view></html-to-canvas>//domId 设置为dom元素的样式类名domId:".canvas-main" /*** 渲染完毕接收图片* @param {String} filePath*/renderFinish(filePath) {console.log(filePath);this.filePath = filePath;console.log("filePath", filePath)},

3. h5保存生成后的图片到本地方法;

        /*** @description: 保存到相册* @return {*}*/        saveToalbum(Url){// var oA = document.createElement("a");// oA.download = ''; // 设置下载的文件名，默认是'下载'// oA.href = url;// document.body.appendChild(oA);// oA.click();// oA.remove(); // 下载之后把创建的元素删除var blob=new Blob([''], {type:'application/octet-stream'});var url = URL.createObjectURL(blob);var a = document.createElement('a');a.href = Url;a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];var e = document.createEvent('MouseEvents');e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);a.dispatchEvent(e);URL.revokeObjectURL(url);},

h5 uniapp html2canvas生成海报,保存到本地功能实现；相关推荐

微信小程序2.9.0基础库canvas2D新API，生成海报保存到手机功能实现，包括文字换行，圆形图片，图片高度自适应等功能封装
WxCanvas 利用canvas微信小程序原生实现的一个绘制微信小程序海报的类,基础库版本>2.9.0. 下面链接中使用的api已被废弃,所以有了本文. 微信小程序生成海报保存到手机先看效果 ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
python中if brthon环境安装包_Python实现base64编码的图片保存到本地功能示例
本文实例讲述了Python实现base64编码的图片保存到本地功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 import os import ...
uniapp中，H5端使用html2canvas生成海报
项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以.最后解决方案是,把网络图片全部转成base64展示 ...
uniapp 实现生成海报并分享给微信好友和保存到本地相册
记录uniapp 生成二维码海报并保存到本地或者分享给微信好友 – 文章目录记录uniapp 生成二维码海报并保存到本地或者分享给微信好友前言一.引入生成二维码的组件二.点击右侧的分享图标生成 ...
uni-app app端用highcharts绘制图表，并生成海报保存到手机相册
uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制. 首先引用安装highcharts,封装成一个组件 n ...
uniapp页面生成海报并保存和分享微信
Painter 画板 | LimeUiLimeUi - 增强型的 uni-app 组件库http://liangei.gitee.io/limeui-docs/components/painter/ ...

h5 uniapp html2canvas生成海报,保存到本地功能实现；

html2canvas生成海报,保存到本地功能实现

1. 在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数

2. 组件的使用，伪代码不要直接复制uniapp语法

3. h5保存生成后的图片到本地方法;

h5 uniapp html2canvas生成海报,保存到本地功能实现；相关推荐

最新文章

热门文章