JavaScript實現圖片合成下載的示例
阿新 • • 發佈：2020-11-20
最近專案一個功能需求，需實現將兩張圖片合成後下載的一個功能。分析完功能需求後，決定直接使用前端技術來實現。為提高效率，使用外掛(html2canvas)配合編寫此功能。有關外掛(html2canvas)的介紹，這裡不多說明，大家可自行網上查閱。以下直接附上效果演示圖以及完整程式碼
效果演示：
完整程式碼：(程式碼複製可直接使用)
注：最好將程式碼檔案放在伺服器環境下執行，以防止外掛(html2canvas)出錯，這裡使用的伺服器環境為phpStudy，為本地伺服器環境。有關本地伺服器有哪些以及下載使用，可自行網上查閱
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>JS實現圖片合成下載</title>
<scriptsrc="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<scriptsrc="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><!--載入jqueryui主要作用是使用其拖拽的功能-->
<scriptsrc="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script><!--想要圖片合成，核心就是載入使用這個外掛-->
<script>
functionBaseImage(imgFile){//圖片1上傳的函式方法
varf=imgFile.files[0];//獲取上傳的圖片檔案
varfilereader=newFileReader();//新建一個圖片物件
filereader.onload=function(event){//圖片載入完成後執行的函式
varsrcpath=event.target.result;//這裡獲取圖片的路徑（圖片會被轉為base6格式）
$("#baseimg").attr("src",srcpath);//將獲取的圖片使用jquery的attr()方法插入到id為baseimg的圖片元素裡
};
filereader.readAsDataURL(f);//讀取圖片（將插入的圖片讀取顯示出來）
}
functionStyleImage(imgFile){//圖片2上傳的函式方法（原理同上）
varf=imgFile.files[0];
varfilereader=newFileReader();
filereader.onload=function(event){
varsrcpath=event.target.result;
$("#styleimg").attr("src",srcpath);
};
filereader.readAsDataURL(f);
}
$(function(){
$(".drg").draggable();//這裡使用jqueryui的拖拽方法draggable()；作用是可以讓圖片2進行拖拽
});
functiondown(){//這個函式是點選下載執行的方法
html2canvas($(".whole"),{//這是使用了html2canvas這個外掛的方法，將class為whole的整個節點繪製成畫布
onrendered:function(canvas){//畫布繪製完成後執行下面內容，function內的canvas這個引數就是已經被繪製成畫布
varlink=document.createElement('a');//建立一個a標籤
link.download='my-image-name.jpg';//a標籤增加一個download屬性，屬性值（my-image-name.jpg）就是合成下載後的檔名
link.href=canvas.toDataURL();//canvas.toDataURL()就是畫布的路徑，將路徑賦給a標籤的href
link.click();//模擬a標籤被點選，這樣就可以下載了
},})
}
</script>
</head>
<body>
<fieldset>
<inputtype="file"onchange="BaseImage(this)">
<legend>上傳圖1</legend>
</fieldset>
<fieldset>
<inputtype="file"onchange="StyleImage(this)">
<legend>上傳圖2</legend>
</fieldset>
<fieldset>
<buttononclick="down()">點選合成下載</button>
</fieldset>
<spanclass="whole"style="width:544px;display:inline-block;position:relative;">
<imgid="baseimg"style="width:100%;height:auto;">
<divstyle="height:100%;width:100%;top:0;position:absolute;overflow:hidden;">
<divclass="drg"style="position:absolute;width:100px;top:0px;left:0px;display:inline-block;">
<imgid="styleimg"style="width:100%;cursor:pointer;">
</div>
</div>
</span>
</body>
</html>以上就是JavaScript實現圖片合成下載的示例的詳細內容，更多關於JavaScript 圖片合成下載的資料請關注我們其它相關文章！