关闭

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

时间: 2018-12-12阅读: 1379标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

canvas实现下载二维码、图片加水印

HTMLCanvasElement提供了toDataURL方法,该方法返回一个包含被类型参数规定图像表现格式的data URI。通过该方法我们就可以生成二维码图片并下载了

canvas的getImageData和toDataUrl跨域问题

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

Canvas裁剪图片(截选框可拖拽)

实现思路:打开图片并将图片绘制到canvas中;利用canvas的drawImage()函数来裁剪图片;将canvas转化为Image即可。Js重点代码:变量定义、添加各事件按钮、容器等:

小程序中canvas实现水平、垂直居中

最近做一个刮刮卡,需要将文字在canvas中水平、垂直居中;fillText方法为canvas设置文本方法,使用如下所示;上例将文本内容设置在canvas画布的坐标位置上,跳脱web的开发思维,我们可以认为X点相对于文本有左

监听Canvas内部元素点击事件的三种方法

canvas内部元素不能像DOM元素一样方便的添加交互事件监听,因为canvas内不存在“元素”这个概念,他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍,想要监听图形的点击事件思路很简单

我从 fabric.js 中学到了什么

熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目中使用,作为用户简单说说感受:

利用canvas实现转盘抽奖

最近工作中重构了抽奖转盘,给大家提供一个开发转盘抽奖的思路;由于业务需要所以开发了两个版本抽奖,dom和canvas,不过editor.js部分只能替换图片,没有功能逻辑。需要注意的是此目录隐藏了一个动态数据类(dataStore),因为集成在项目

Js实现canvas截取视频第一屏为预加载图片

首先需要新建video标签,用于放置需要截取的视频文件,然后Js获取video标签并监听它的 loadeddata 事件,这里简单说下video的事件有哪些?为什么使用loadeddata来获取第一帧。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

点击更多...

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