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 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 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读取csv实现csv文件下载功能
2013/12/18 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
python多进程并发demo实例解析
2019/12/13 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
J2EE相关知识面试题
2013/08/26 面试题
养殖行业的创业计划书
2014/01/05 职场文书
白莲教口号
2014/06/18 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
班级班风口号大全
2015/12/25 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python