利用html2canvas截图,得到base64上传ajax
<script type="text/javascript" src="js/html2canvas.js"></script> //布局截图
$(function(){
//布局截图
function htmlCanvas(){
html2canvas($(".J_screenshot"), {
onrendered: function(canvas){
// document.body.appendChild(canvas);
var img = canvas.toDataURL();
var base=encodeURIComponent(img);//转码
// console.log(img); //在console中会输出图片的路径,然后复制在浏览器一粘贴,就可以看到。
//上传截图
ajaxUpLoad(base);
},
//width:300,
//height:300
});
};
function ajaxUpLoad(base){
$.ajax({
type: "POST",
url: "",
async: true,
data: {base:base},
dataType: "json",
success: function (data) {
},
error: function (err) {
}
});
}
})
我们利用html2canvas的功能,得到了规定区域的页面截图,返回的是base64格式的图片,然后用ajax上传,要关注的点是base64要用encodeURIComponent()转义后才能传输。
利用html2canvas截图,得到base64上传ajax的更多相关文章
- 【iOS 录音转码MP3及转码BASE64上传】
iOS 录音转码MP3及转码BASE64上传 一,开始录音 NSLog(@"开始录音"); [self startRecord]; - (void)startRecord { // ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- 客户端通过base64上传bitmap服务器
首先致谢:http://www.jb51.net/article/129743.htm 咱们不是代码的生产者,只是代码的搬运工. 场景描述:Android客户端需要上传头像等图片到服务器,经双方协商决 ...
- 利用Selenium实现图片文件上传的两种方式介绍
在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题
原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...
- python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- 利用canvas对上传图片进行上传前压缩
利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...
随机推荐
- C# 利用发射动态创建泛型类型的对象,泛型类型支持带惨的构造函数
static class Program { static void Main(string[] args) { var aaa = Create<AAA>("aaa" ...
- 喜讯!联诚发创始人龙平芳荣获2019LED行业优秀女企业家称号!联诚发横揽三项大奖!
2019年12月20日,在深圳大梅沙京基喜来登度假酒店隆重举行“蝶变跨越”慧聪LED显示屏行业品牌盛会颁奖典礼!在来自全国各地的LED显示屏行业协会领导,企业领袖,精英代表以及来自全国各 ...
- PHP-缺失的第一个正数
给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0]输出: 3示例 2: 输入: [3,4,-1,1]输出: 2示例 3: 输入: [7,8,9,11,12] ...
- 有穷自动机(NFA、DFA)&正规文法&正规式之间的相互转化构造方法
在编译原理(第三版清华大学出版社出版)中第三章的词法分析中,3.4.3.5.3.6小节中分别讲解了 1.什么是NFA(不确定的有穷自动机)和DFA(确定的有穷自动机) 2.如何将 不确定的有穷自动机 ...
- Linux 临时和永久关闭 Selinux
查看当前 Selinux 状态:getenforce 临时关闭 Selinux:setenforce 0 永久关闭 Selinux: vim /etc/sysconfig/selinux 将 SELI ...
- python_异常
异常的概念 程序在运行时,如果 Python 解释器 遇到 到一个错误,会停止程序的执行,并且提示一些错误信息,这就是 异常 程序停止执行并且提示错误信息 这个动作,我们通常称之为:抛出(raise) ...
- asp.net Mvc 增删改查
1.创建项目 已经创建好项目了 2.创建数据库 使用这个数据库或者自己创建一个数据库,一个表就好,简单 USE [LearnAdminlte] GO /****** Object: Table [db ...
- Java——类之间的关系
3.7 类之间的关系 3.7.1 泛化关系 类和类之间的继承关系及接口与接口之间的继承关系. 3.7.2 实现关系 类对接口的实现. 3.7.3 关联关系 类与类之间的连接,一个类可以知道另一个类的属 ...
- RzGroupBar
何分多层 procedure TForm1.FormCreate(Sender: TObject); begin RzGroup1.Items.Clear; RzGroup1.Items.Add.Ca ...
- ubuntu终端仿真程序和文件管理程序
1.SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单的说是Windows下登录UNIX或Linux服务器主机的软件.可以理解为ubuntu下的Terminal. 如果Sec ...