1.使用qrcode.js生成二维码
github上qrcode.js下载地址:https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="qrcode" style=" width:160px;
height:160px;
margin-top:15px;"></div>
</body>
<script src="./qrcode.js"></script>
<script type="text/javascript">
var qrcode = new QRCode("qrcode", {
text: "https://www.baidu.com/",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
</script>
</html>
2. 使用html2canvas生成图片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html2canvas</title>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
<h2>Canvas实现前端截图</h2>
</div>
<script>
//直接生成canvas
// html2canvas(document.querySelector("#capture")).then(canvas => {
// document.body.appendChild(canvas);
// });
//将canvas生成的图片转化为base64,提高清晰度
html2canvas(document.querySelector("#capture")).then(canvas => {
const dataUrl = canvas.toDataURL("image/png", 1.0);
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);
});
</script>
</body>
</html>
vue示例
let dom = this.$refs.shareCard;
html2canvas(dom).then((canvasObj) => {
// Canvas2Image.saveAsImage(canvasObj, canvasObj.width, canvasObj.height, 'png', 'share');
this.img = Canvas2Image.convertToImage(canvasObj, canvasObj.width, canvasObj.height);
this.showImg = true;
this.$refs.imgBox.appendChild(this.img);
})
利用canvas对html进行截图处理,如果html中引用的图片是网络资源链接的话,就会导致图片部分是空白页面,(相对路径的本地图片则不存在这个问题)。可以利用JS将图片资源链接转化为base64图片解决这个问题(参考:https://juejin.im/post/5addf74551882567395459e1)
方法1
使用ajax技术,即XMLHttpRequest
(XHR)对象与服务器交互(参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest),使用FileReader对象的readAsDataURL方法将blob流内容转化为base64字符串(文档参考
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader),
同步和异步请求参考文档(https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests), 此处responseType设置为blob,一定要设置异步请求,否则报错(参考https://stackoverflow.com/questions/9855127/setting-xmlhttprequest-responsetype-forbidden-all-of-a-sudden)
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
let base64 = e.target.result;
console.log(base64)
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
}
getBase64("http://p1.pstatp.com/large/435d000085555bd8de10");
方法2
使用canvas.toDataURL()方法(参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL)
需要解决图片跨域问题 image.crossOrigin = '';
使用了Jquery库的$.Deferred(参考文档http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html)方法
//使用canvas.toDataURL()方法, Jquery库的$.Deferred()方法,需要解决图片跨域问题 image.crossOrigin = '';
let imgSrc = "http://p1.pstatp.com/large/435d000085555bd8de10";
function getCanvasBase64(img) {
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred = $.Deferred();
if (img) {
image.onload = function () {
deferred.resolve(getBase64Image(image));
document.getElementById("container2").appendChild(image);
}
return deferred.promise();
}
}
getCanvasBase64(imgSrc).then(function (base64) {
console.log(base64);
}, function (err) {
console.log(err);
});
另外对包含有svg的,html2canvas也无法处理,需要创建临时div,转换为canvas,同时删掉原来的svg元素
示例
handleGenerator() {
// 最外层的容器
// this.show1 = true;
let treeContainnerElem = document.getElementById('tree-containner');
// 要导出div
let treeElem = document.getElementById("tree");
this.imgheight = treeElem.offsetHeight;
console.log(treeElem.offsetHeight, treeElem.offsetWidth);
// this.show1 = false;
// 从要导出的div克隆的临时div
let tempElem = treeElem.cloneNode(true);
tempElem.id = 'temp-tree';
tempElem.className = 'fff';
tempElem.style.width = treeElem.clientWidth + 'px';
tempElem.style.height = treeElem.clientHeight + 'px';
let hinttext = tempElem.querySelector("#hinttext");
tempElem.removeChild(hinttext);
treeContainnerElem.appendChild(tempElem);
// 在临时div上将svg都转换成canvas,并删除原有的svg节点
let svgElem = tempElem.querySelectorAll("svg");
svgElem.forEach((node) => {
let parentNode = node.parentNode;
let svg = node.outerHTML.trim();
let canvas = document.createElement("canvas");
canvas.style.height = "13.3px";
canvas.style.width = "20px";
canvg(canvas, svg);
canvas.style.zIndex = 9;
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
parentNode.removeChild(node);
parentNode.appendChild(canvas);
});
html2canvashtml2canvas(tempElem, {
useCORS: true, // 允许CORS跨域
backgroundColor: '#D6E9FF',
}).then(canvas => {
// let img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "");
let img = canvas.toDataURL("image/jpeg")
treeContainnerElem.removeChild(tempElem);
this.imgUrl = img;
})
},