<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的更多相关文章

  1. 【iOS 录音转码MP3及转码BASE64上传】

    iOS 录音转码MP3及转码BASE64上传 一,开始录音 NSLog(@"开始录音"); [self startRecord]; - (void)startRecord { // ...

  2. ASP利用xhEditor编辑器实现图片上传的功能。

    本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...

  3. 客户端通过base64上传bitmap服务器

    首先致谢:http://www.jb51.net/article/129743.htm 咱们不是代码的生产者,只是代码的搬运工. 场景描述:Android客户端需要上传头像等图片到服务器,经双方协商决 ...

  4. 利用Selenium实现图片文件上传的两种方式介绍

    在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...

  5. 利用jquery.form实现异步上传文件

    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...

  6. 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题

    原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...

  7. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  8. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  9. 利用canvas对上传图片进行上传前压缩

    利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...

随机推荐

  1. QList和QVector等容器的区别:(转)

    源地址:https://blog.csdn.net/qq_33266987/article/details/53333373 Qlist.QVector 与 list.vector似乎不太类似: li ...

  2. ApiCloud如何一键真机测试

    首先假设你已经有了APICloud账号,并创建了App项目. 需要注意的是,手机和电脑需要连接在同一wifi环境下. 第一步 下载自定义Loader 进入“开发控制台” 点击我们的项目 选择模块,再选 ...

  3. C之输入输出函数(3) -- 请使用sscanf()

    #include <stdio.h> int fscanf(FILE *__restrict__stream, const char *__restrict__format-string, ...

  4. Java——异常的分类

    2.异常的分类 异常主要分为:错误.一般性异常(受控异常).运行期异常(非受控异常) 错误:Java虚拟机无法解决的严重问题.如:JVM系统内部错误.资源耗尽等严重情况.一般不编写针对性的代码进行处理 ...

  5. Linux常用命令入门

    在Linux早期的版本中,由于不支持图形化操作,用户基本上都是使用命令行方式来对系统进行操作.掌握常用 的一些Linux命令是非常有必要的,下面将分类进行介绍.由于篇幅有限,在这里我们介绍命令时有些不 ...

  6. auth 模块使用篇

    from django.cintrib import auth #登录模块  只要用auth模块一旦登录 就可以在项目的任意地方用request.user 拿到当前的用户对象  再通过 request ...

  7. session控制登入权限

    <?php session_start(); if(empty($_SESSION["uid"]))//判断SESSION是不是为空 { header("locat ...

  8. 【Dart学习】-- Dart之extends && implements && with的用法与区别

    一,概述 继承(关键字 extends) 混入  mixins (关键字 with) 接口实现(关键字 implements) 这三种关系可以同时存在,但是有前后顺序: extends -> m ...

  9. access注入篇+sqlmap

    access数据库的来历,我就不说了,因为我懒的记,就算记了感觉上也没大多用处,只要记得数据库的结构就行了.先是表名,然后是列名,再者就是数据,我发个实际的图吧,大概就是这么一个结构. 下面,开始说下 ...

  10. Hadoop生态上几个技术的关系与区别:hive、pig、hbase 关系与区别  Pig

    Hadoop生态上几个技术的关系与区别:hive.pig.hbase 关系与区别 Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的 ...