本文主要介紹了JS實現p模組的截圖並下載功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下，希望能幫助到大家。
首先我們需要引入2個js檔案：
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
登入後複製
加入css 樣式，主要是產生"X"關閉圖片圖示：
body{background: #ccc}
#dw{position: absolute;top: 10px;left:10%;height: 620px;width:1030px;background: #fff; border:1px solid black;padding: 10px}
.close{
position:relative;
left: 10px;
width:0.2em;
height:1em;
background: #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: inline-block;
}
.close:after{
content: "";
position: absolute;
top: 0;
left: 0;
width:0.2em;
height:1em;
background: #333;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}登入後複製
寫入隨便p 模組，我隨便位置給的點擊截圖按鈕
<!-- 要截图的p main 蓝色区域 -->
<p id="main" style="width: 50%; margin-left: 100px;padding: 50px;height: 400px;background: #5a90a0">
<p style="height: 200px;width: 200px;background: #ccc;"></p>
<p style="height: 30px;width: 168px;border:2px solid black;background: red;text-align: center;" onclick="doScreenShot()">截图</p>
</p>
<!-- 生成图片展示的p dw-->
<p id="dw" >
<p style="float: right;width: 25px;height: 25px;" title="关闭" onclick="closeok()">
<span class="close"></span>
</p>
</p>
登入後複製
頁面效果如下：
js程式碼如下：
$("#dw").hide();
//关闭图片
function closeok(){
$("#dw").hide();
}
//点击截图
function doScreenShot(){
$("#dw").show();
html2canvas($("#main"), {
onrendered: function(canvas) {
canvas.id = "mycanvas";
var mainwh=$("#main").width();
var mainhg=$("#main").height();
var img = convertCanvasToImage(canvas);
console.log(img);
//document.body.appendChild(img);
$("#dw").append(img) //添加到展示图片p区域
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 1024, 600); //设置图片大小和位置
img.src = convertCanvasToImage(canvas).src;
$(img).css({
background:"#fff"
});
//调用下载方法
if(browserIsIe()){ //假如是ie浏览器
DownLoadReportIMG(img.src);
}else{
download(img.src)
}
}
}
});
}
//绘制显示图片
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png"); //获得图片地址
return image;
}
//生成canvas元素，相当于做了一个装相片的框架
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 20, 20, 960, 600); //在这调整图片中内容的显示（大小,放大缩小,位置等）
return canvas;
}
function DownLoadReportIMG(imgPathURL) {
//如果隐藏IFRAME不存在，则添加
if (!document.getElementById("IframeReportImg"))
$('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
if (document.all.IframeReportImg.src != imgPathURL) {
//加载图片
document.all.IframeReportImg.src = imgPathURL;
}
else {
//图片直接另存为
DoSaveAsIMG();
}
}
function DoSaveAsIMG() {
if (document.all.IframeReportImg.src != "about:blank")
window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
// 另存为图片
function download(src) {
var $a = $("<a></a>").attr("href", src).attr("download", "img.png");
$a[0].click();
}
//判断是否为ie浏览器
function browserIsIe() {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}登入後複製
#解釋說明：這裡核心截圖程式碼是
html2canvas（dom , { onrendered: function(canvas) {})方法，是外掛程式提供的。其中：dom是你要截圖的元素模組
它的作用是把這個參數canvas形成一個img圖片元素。呼叫的是單另的convertCanvasToImage（）方法，
#其中：image.src = canvas.toDataURL("image/png"); 這句話就是生成圖片的地址。而這張圖片就是截取的你的那個元素，有了圖片地址就很好辦了。我只是把它加到id=“dw”這個元素中提供展示效果。其實做到這樣就夠了，但我又用canvas裝了一次。
後面給圖片載入方法：onload （）在其中新增屬性撒的，自動執行下載方法：區分了ie瀏覽器（網路上找的方法），還有我直接產生的下載方法。關於下載方法很多，你們隨意選。
當然自己的這個download(src)下載方法同樣適用ie。因為原理很簡單，就是用生成個元素自己呼叫方法。
相關推薦：
PHP呼叫ffmpeg對視訊截圖並拼接腳本實例分享
用網頁截圖API介面自動產生網頁截圖
html5瀏覽器截圖的範例
#
以上是JS之div模組截圖並下載功能實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
