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使用技巧5个
Apr 02 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
canvas版人体时钟的实现示例
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
php连接mysql数据库代码
2009/03/10 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python实现五子棋小游戏
2020/03/25 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python eval函数原理及用法解析
2020/11/14 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
党员大会主持词
2014/04/02 职场文书
学校节能减排倡议书
2014/05/16 职场文书
校园安全广播稿范文
2014/09/25 职场文书
合作协议书模板
2014/10/10 职场文书
通报表扬范文
2015/01/17 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
优秀新员工事迹材料
2019/05/13 职场文书