利用canvas将网页元素生成图片并保存在本地

更新日期: 2018-12-12阅读量: 1748标签: canvas

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件:

<script type="text/JavaScript" src="js/html2canvas.js"></script>
<script type="text/JavaScript" src="js/base64.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<div id="view" style="background-color: red; width: 700px; height: 500px;">
//canvas截图为document.body上的元素
html2canvas(document.body).then(function (canvas) { 
canvas.setAttribute('id','canvasImg'); //给canvas添加id
// document.body.appendChild(canvas)
document.getElementById('images').appendChild(canvas) //添加canvas图给元素
});
let Download=document.getElementById('Download');
Download.onclick=function () { //给下载节点绑定事件
let oCanvas=document.getElementById('canvasImg'); //获取canvas的id
console.log(oCanvas)
// 将canvas图片通过Canvas2Image转成的img元素引入的图片
let img=Canvas2Image.saveAsJPEG(oCanvas,true).getAttribute('src');
console.log(img);
saveFile(img,'hlr.png') //调用下载函数,传Canvas2Image图片地址,下载时保存的图片的名称
};

注:createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似,只是它创建的 Element > 节点除了具有指定的名称外, > 还具有指定的命名空间。只有使用命名空间的 XML 文档才会使用该方法。

let saveFile=function (data,filename) {
let save_link=document.createElementNS('http://www.w3.org/1999/xhtml','a'); //img表示生成img元素或a元素或则可以放图片地址的元素

save_link.href=data; //img 元素中图片引入用src,a元素中图片的引入用href等等
save_link.download=filename; // 下载的名称
var event = document.createEvent('MouseEvents');//创建event事件
console.log(event);
//initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值, 详见下文:
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);

console.log(save_link)// <a href=data:image/jpeg:base64.....></a>

initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。 此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前调用,尽管在该阶段可以多次调用它(如有必要)。如果被多次调用,则最后一次调用优先。


其他指定事件方法:

typeArg - 指定事件类型。
canBubbleArg - 指定该事件是否可以 bubble。
cancelableArg - 指定是否可以阻止事件的默认操作
viewArg - 指定 Event 的 AbstractView。
detailArg - 指定 Event 的鼠标单击量。
screenXArg - 指定 Event 的屏幕 x 坐标
screenYArg - 指定 Event 的屏幕 y 坐标
clientXArg - 指定 Event 的客户机 x 坐标
clientYArg - 指定 Event 的客户机 y 坐标
ctrlKeyArg - 指定是否在 Event 期间按下 control 键
altKeyArg - 指定是否在 Event 期间按下 alt 键。
shiftKeyArg - 指定是否在 Event 期间按下 shift 键。
metaKeyArg - 指定是否在 Event 期间按下 meta 键。
buttonArg - 指定 Event 的鼠标按键。
relatedTargetArg - 指定 Event 的相关 EventTarget。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1559

利用 canvas 与 Data URLs 安全地下载一张图片

普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义时,要如何赋予用户一个安全下载页面中图片功能的能力呢?最简单的办法,当然是利用 <a> 标签。根据 MDN 描述

canvas 环形图绘制

lineCap:如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt(线段末端以方形结束), round (线段末端圆形结束)and square(线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域)。默认值是 butt

canvas的getImageData和toDataUrl跨域问题

背景是这样的,母亲节的时候,我们有个需求就是用户可以长按或者点击一个按钮进行截图后去分享我们的活动,然而我们的图片例如头像,采用又拍云做 cdn 优化,所以意味着图片的链接跟主页面所在域名不一样

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

js+canvas实现svg标签另存为图片

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息

利用canvas实现环形进度条

有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法。

Canvas基本图片操作与处理

Canvas是H5中新增的技术,主要运用在图片的处理和动画的绘制上,随着Canvas的使用场景越来越多,了解Canvas对平时开发大有裨益,这篇文章将介绍Canvas基本图片操作与处理

Canvas的变换

Canvas的变换的相关内容主要是从平移(translate)、旋转(rotate)、缩放(scale)、矩阵变换(Tramsform)、阴影(Shadow)、画布合成和路径裁剪(Clip)多个方面拓展了Canvas的绘图能力。

使用canvas实现给图片添加平铺水印

最近项目中遇到一个需求,需要把一张图片加上平铺的水印,首先想到的是用canvas完成这种功能,因为我之前也没有接触过canvas,所以做这个功能的时候,就是一步一步的摸索中学习

使用canvas播放视频

将视频隐藏正常播放,将播放取到画面使用setInterval循环在画布上显示画面,因为 1s 差不多25-30帧,选择每40ms循环一次

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!