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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
box-shadow单边阴影的实现
May 21 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 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python私有属性和方法实例分析
2015/01/15 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
PHP面试题及答案二
2015/05/23 面试题
财务部副经理岗位职责
2014/03/14 职场文书
应届大专生求职信
2014/06/26 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
辅导员学期工作总结
2015/08/14 职场文书
2016年端午节寄语
2015/12/04 职场文书
学校团代会开幕词
2016/03/04 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
mysql sql常用语句大全
2022/06/21 MySQL