js截图保存俩种方式

需要：html2canvas.js和canvas2image.js

获取canvas

html2canvas(dom).then(function(canvas) {

}

方式一：直接保存

保存图片

Canvas2Image.saveAsImage(canvas, 宽度, 高度, 格式, 文件名);

方式二：java保存

前端

获取图片数据URL

var dataURL = canvas.toDataURL('images/png');

var url = dataURL.substring(22);

//这里我们需要将上面获取的一堆东西截掉前面的“data:image/png;base64,”，只保留后面的

后端

@Override
public void uploadScreen(String url) {String path = "保存路径";BASE64Decoder decoder = new BASE64Decoder();try {byte[] b = decoder.decodeBuffer(url);ByteArrayInputStream bais = new ByteArrayInputStream(b);BufferedImage bufferImg = ImageIO.read(bais);String fileStr = path + "/1.png";File w2 = new File(fileStr);ImageIO.write(bufferImg, "png", w2);} catch (Exception e) {e.printStackTrace();}
}

可选：

根据需求，选择数据库,截图一般只会用一次

所以只要把路径保存到redis,没必要sql建表

jedis.set("uploadScreen",fileStr);

渲染canvas

$(".toCanvas").after(canvas);

渲染图片

var img = Canvas2Image.convertToImage(canvas, 1200,300);
$("#toPic").after(img);

js截图保存俩种方式相关推荐

在Windows 10中截取截图的6种方式简介
在Windows 10中截取截图的6种方式简介截图对于不同的目的很重要.它可以用于捕获笔记本电脑上的任何内容的截图.所以,如果你使用Windows 10,你可能不知道如何截图,因为它是比较新的.因 ...
在电脑屏幕上截图的5种方式
在电脑屏幕上截图的5种方式第一种:Ctrl + PrScrn 使用这个组合键截屏,获得的是整个屏幕的图片,截取后ctrl+v键可直接在文档中保存.Alt + PrScrn 这个组合键截屏,获得的结果 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
HTML嵌入JS代码的三种方式
目录一.HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式二.HTML嵌入JS代码的第二种方式:脚本块三.HTML嵌入JS代码的第三种方式:外部引入js文件一.HTML嵌入JS代码的 ...
Android中实现截图的几种方式
一.起始原因最近项目需求中需要实现屏幕截图,开启了新一轮的翻腾,找寻.是的,我就是一个搬运工,简单的搬运工~~做不完的功能,连接不断地需求~~ 基本需求:实现当前页面截图并保存: 扩展需求:截图去除 ...
JS 下载文件两种方式总结
后端返回Blob对象(文件流),完成导出.下载功能: 1.介绍Blob Blob Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 Reada ...
js 函数定义三种方式
Js 函数定义的三种方式: 方式一:function <script type="te ...

js截图保存俩种方式

js截图保存俩种方式相关推荐

最新文章

热门文章