JavaScript實現圖片合成下載

時間 2020-03-16

原文原文鏈接

最近項目一個功能需求，需實現將兩張圖片合成後下載的一個功能。分析完功能需求後，決定直接使用前端技術來實現。爲提升效率，使用插件(html2canvas)配合編寫此功能。有關插件(html2canvas)的介紹，這裏很少說明，你們可自行網上查閱。如下直接附上效果演示圖以及完整代碼 php

效果演示：css

完整代碼：(代碼複製可直接使用)
注：最好將代碼文件放在服務器環境下運行，以防止插件(html2canvas)出錯，這裏使用的服務器環境爲phpStudy，爲本地服務器環境。有關本地服務器有哪些以及下載使用，可自行網上查閱html

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>JS實現圖片合成下載</title>  
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>  
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><!--加載jquery ui主要做用是使用其拖拽的功能-->  
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script><!--想要圖片合成，核心就是加載使用這個插件-->  
<script>  
function BaseImage(imgFile) {//圖片1上傳的函數方法  
   var f = imgFile.files[0];//獲取上傳的圖片文件  
   var filereader = new FileReader();//新建一個圖片對象  
  filereader.onload = function (event) {//圖片加載完成後執行的函數  
      var srcpath = event.target.result;//這裏獲取圖片的路徑（圖片會被轉爲base6格式）  
      $("#baseimg").attr("src",srcpath);//將獲取的圖片使用jquery的attr()方法插入到id爲baseimg的圖片元素裏  
   };  
   filereader.readAsDataURL(f);//讀取圖片（將插入的圖片讀取顯示出來）  
 }  
  
function StyleImage(imgFile) { //圖片2上傳的函數方法（原理同上）  
   var f = imgFile.files[0];  
  var filereader = new FileReader();  
   filereader.onload = function (event) {  
      var srcpath = event.target.result;  
      $("#styleimg").attr("src",srcpath);  
  };  
    filereader.readAsDataURL(f);  
 }   
  
$(function() {  
    $( ".drg" ).draggable();//這裏使用jquery ui的拖拽方法  draggable()；做用是能夠讓圖片2進行拖拽  
});  
  
function down(){//這個函數是點擊下載執行的方法  
   html2canvas($(".whole"),{ //這是使用了html2canvas這個插件的方法，將class爲whole的整個節點繪製成畫布  
     onrendered:function(canvas){  //畫布繪製完成後執行下面內容，function內的canvas這個參數就是已經被繪製成畫布  
          var link = 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>  
 <input type="file"  onchange="BaseImage(this)" >  
<legend>上傳圖1</legend>  
</fieldset>  
<fieldset>  
<input  type="file"  onchange="StyleImage(this)" >  
 <legend>上傳圖2</legend>  
</fieldset>  
<fieldset>  
 <button onclick="down()" >點擊合成下載</button>  
</fieldset>  
  
<span class="whole" style="width: 544px;display: inline-block;position: relative;">  
<img id="baseimg"  style="width:100%;height:auto;"  >  
<div style="height: 100%;width: 100%;top:0;position: absolute;overflow: hidden;">  
<div class="drg" style="position: absolute;width:100px;top: 0px;left: 0px;display: inline-block;">  
<img id="styleimg"  style="width:100%;cursor: pointer;" >  
</div>  
</div>  
</span>  
  
</body>  
</html>