html怎么截取图片内容,将Html页面截取成图片 html2canvas

1、安装

npm install --save html2canvas

2、在需要使用的vue组件中引入html2canvas

import html2canvasfrom"html2canvas"

3、在要截取的区域添加ref标记

/**

* 将页面ref指定节点的区域内容转为图片

* 1.拿到想要转换为图片的内容节点DOM；

* 2.转换，拿到转换后的canvas

* 3.转换为图片

generatePic() { //生成图片

html2canvas(this.$refs.toImg).then(canvas => {

// 转成图片，生成图片地址

let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式

});

}

4、PC端保存生成的图片

downloadFile (fileName, content) {

let aLink = document.createElement('a');

let blob = this.base64ToBlob(content); //new Blob([content]);

let evt = document.createEvent("HTMLEvents");

evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错事件类型，是否冒泡，是否阻止浏览器的默认行为

aLink.download = fileName;

aLink.href = URL.createObjectURL(blob);

aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐

base64ToBlob(code) {

let parts = code.split(';base64,');

let contentType = parts[0].split(':')[1];

let raw = window.atob(parts[1]);

let rawLength = raw.length;

let uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], {type: contentType});

}

5、问题

(1)网络图片截取是跨域问题

{ allowTaint: true, useCORS: true }

html2canvas(this.$refs.toImg, {allowTaint: true}).then(canvas => { // append canvas to page });

(2)textarea标签多行文字变成一行文字截取不全；

可以使用span标签替换使用

html怎么截取图片内容,将Html页面截取成图片 html2canvas相关推荐

使用html2canvas,将页面转换成图片的采坑记录(Web/Taro h5)
使用html2canvas将页面转换成图片的采坑记录 "html2canvas": "^1.4.1","@tarojs/taro": &qu ...
html保存当前页面为图片,将html页面保存成图片,图片写入pdf的实现方法(推荐)
需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入 html2can ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
vue 签署文件两张图合并成一张图 h5页面转换成图片并长按保存在本地
在做让用户在页面签名并把当前页面保存为图片,附上完整代码 (直接复制代码,更改接口地址或删除接口逻辑可直接复用) **准备工作:安装 npm install vue-esign --save 全局 ...
使用 html2canvas 将页面保存成图片
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏,比如移动端常见的"长按网页保存为图片"功能.这个借助 html2canvas 这个第三方 js 库即可实现,下面通过样例演示 ...
java 将html页面转成图片
需求:后台代码批量生成图片,图片中的title和二维码,需要动态变化. 解决思路: 1.使用FreeMaker模板index.ftl渲染动态数据(title和二维码链接作为动态入参) 2.添加动态数据 ...
java html 图片_java springboot 将html页面转成图片
一.实现流程:通过freemarker模板引擎将数据动态添加到模板中,然后将已添加动态数据的模板代码通过xhtmlrenderer转换成图片. 二.依赖jar: org.springframework ...
html页面转成PDF，PDF下载
先说要完成的功能:把填写好的信息转换成PDF文件,并且下载到本地,类似在智联上下载自己的简历,不过下载下来是PDF文件. 参考了网上的多篇博客,发现有两种方法,但两种方法都各有利弊.下边介绍这两种方法 ...
echart转换成pdf js_【jsPDF】jsPDF插件实现将html页面转换成PDF，并下载，支持分页...
1.目的:在前段是 jQuery库或者 VUE库或者两者混合库,将html 页面和数据转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

html怎么截取图片内容,将Html页面截取成图片 html2canvas

html怎么截取图片内容,将Html页面截取成图片 html2canvas相关推荐

最新文章

热门文章