目录
概要
div转换成图片并下载,在网站制作中也是经常会遇到的技术。在这里介绍的方法是使用jQuery实现。
前提条件
- 依赖jQuery.js插件,可到官网进行下载jQuery.com。
- 依赖bluebird.js插件,推荐获取方式:使用命令
npm install bluebird
进行下载,下载后在node_modules\bluebird\js\browser文件夹中找到需要的js。 - 依赖html2canvas.js,推荐获取方式:使用命令
npm install --save html2canvas
进行下载,下载后在D:\web\node_modules\html2canvas\dist文件夹中找到需要的js。
示例代码
以下是使用jQuery实现div转换成图片并下载功能的示例代码,可以直接复制到html文件中直接运行测试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.myDiv {
width: 200px;
height: 400px;
background: rgba(0,0,0,.5);
font-size: 18px;
color: #fff;
}
</style>
</head>
<body>
<button type="button" id="btn">下载图片</button>
<div class="myDiv" id="imgDiv">
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
</div>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="plugin/bluebird.min.js"></script>
<script type="text/javascript" src="plugin/html2canvas.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// canvas生成图片
$("#btn").on("click", function() {
var getPixelRatio = function(context) { // 获取设备的PixelRatio
var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 0.5;
return (window.devicePixelRatio || 0.5) / backingStore;
};
//生成的图片名称
var imgName = "image.png";
var shareContent = document.getElementById("imgDiv");
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍,再将画布缩放,将图像放大PixelRatio倍。
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
context.scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
width: width,
height: height,
dpi: window.devicePixelRatio
};
html2canvas(shareContent, opts).then(function(canvas) {
context.imageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
dataURIToBlob(imgName, dataUrl, callback);
});
});
})
// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
var dataURIToBlob = function(imgName, dataURI, callback) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(imgName, new Blob([arr]));
}
var callback = function(imgName, blob) {
var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function() {
if (navigator.msSaveBlob) {
return navigator.msSaveBlob(blob, imgName);
}
});
triggerDownload[0].click();
triggerDownload.remove();
};
</script>
</body>
</html>
Tips
- 生成图片imgName的格式可以根据自己的需求设置jpg、png等。
关注更多知识,不迷路
小伙伴,用你可爱的小手,点个赞,关注我了解更多知识!!!
如果任何疑问的可以在评论区留言或者私聊。
可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。
更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343