html通过canvas转成base64的方法


Posted in HTML / CSS onJuly 18, 2019

在H5的营销活动中,经常生成一张图片让用户分享或者保存,这时候处理方案有两种。

一种是让后端生成图片,返回一个图片地址给前端展示

一种是前端自主合并生成图片展示,文中主要说明这个方案

demo

<!--生成后存放的IMG-->
<img src="" id="saveImages" alt="">

<a href="javascript:;" class="create">生成海报</a>

<!--用来生成的HTML-->
<div id="saveContent" class="saveContent">
    <img src="">
    <div class="name pa"></div>
    <div class="msg pa"></div>
</div>
<style>
#saveContent{width: 7.5rem; height: 12.27rem; position: relative;}
#saveContent img{ width: 100%;}
#saveContent .name{color: #7c5234;font-size: .3rem;top: 6.55rem;line-height: .6rem;text-align: center;left: 0;right: 0;}
#saveContent .msg{color: #7c5234;font-size: .24rem;top: 7.35rem;text-align: center;left: 0;right: 0;}
#saveContent .msg span{ color: #cf5350; font-size: .36rem;}
</style>
<!--使用最新版本的html2canvas-->
<!--官网https://html2canvas.hertzen.com/-->
<script src="//html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="//static.leiting.com/lib/jquery-1.9.0.min.js"></script>
<script>
//生成
$(function(){
    var isCreate=false;
    $('a.create').on('click',function(){
        isCreate=true;
        
        $('#saveContent img').attr('src','//activity.leiting.com/wd/201904/data/images/pop/1.jpg');
        $('#saveContent .name').html('aaaaaa');
        $('#saveContent .msg').html('bbbbbbbbbb');
        html2canvas(document.getElementById('saveContent'), {
            onrendered: function(ca) {
                $('#saveImages').attr('src',ca.toDataURL('image/jpeg'));
            }
        });
    })
})
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 #HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 #HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 #HTML / CSS
把富文本的回车转为br标签
Aug 09 #HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 #HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 #HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 #HTML / CSS
You might like
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php 类自动载入的方法
2015/06/03 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python中的元组介绍
2019/01/28 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
群胜软件Java笔试题
2012/09/29 面试题
不拖欠农民工工资承诺书
2014/03/31 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
历史博物馆观后感
2015/06/05 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
redis数据一致性的实现示例
2022/03/18 Redis