仿選單網小工具圖片合成

• 仿選單網小工具圖片合成，自此過程中主要遇到兩個問題，一是怎樣讓一個div在一個包含他的div盒子中進行拖動，最開始想到的是利用鼠標按下事件mousedown來改變盒子內元素的定位來進行拖動，具體代碼如下，額~~~~~，代碼之前修改刪掉了。

• 由于本人無法使用mousedown事件完成在固定范圍內拖拽功能，所以在度娘上尋找到另外一種方法，使用jqueryUi插件中的拖拽功能draggable，詳情請見https://www.jqueryui.org.cn/demo/拖動

  詳細代碼如下

  <!--html--><div class="content"><div class="son"></div><div class="sons"></div></div><!--css-->.content {width: 500px;height: 500px;background: aqua;margin: 0 auto;position: relative;}.son {width: 200px;height: 100px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;cursor: move;}<!--js-->$(function () {var move = function () {<!--$(document).on("click", ".box", function () {--><!-- $(".son").html($(this).html());--><!--});--><!--上面部分是點擊按鈕使盒子外元素放置到盒子內部，與拖拽無關--><!--div.son拖拽效果-->$(".son").draggable({containment: ".content", scroll: false});<!--同上面注釋掉的一樣--><!--$(document).on("click", ".show", function () {--><!-- $(".sons").html($(this).html());--><!--});--><!--div.sons拖拽效果-->$(".sons").draggable({containment: ".content", scroll: false});};move();});

• 將div中的內容合成一張圖片，使用到插件html2canvas.js插件.

• 在點擊保存圖片時，此時要保存的資源較多，造成模塊并沒有完全加載完畢，就已經生成了截圖；所以需要加入延時setTimeout。解決方案：(加上一個延時操作)。
• 滾輪滑動造成的，主要是html2canvas是根據body進行截圖，若內容高度高于body時，就會出現這樣的問題(大概意思就是有滾動條時造成的)

解決方案：(在生成截圖前，先把滾動條置頂)。

```<!--滾動條置頂-->window.pageYOffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;``````$(function () {$(".button").click(function () {<!--滾動條置頂-->window.pageYOffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;<!--延時操作-->setTimeout(() => {html2canvas($(".content")).then(function (canvas) {var imgUri = canvas.toDataURL("image/png").replace(/^data:image\/png/, "data:application/octet-stream"); // 獲取生成的圖片的url$("#images").attr("src",imgUri);console.log(imgUri)// window.location.href = imgUri; // 下載圖片});},200);});});```

• 圖片的滾輪放大

• CSS zoom屬性

  zoom：設置或檢索對象的縮放比例，觸發IE瀏覽器的haslayout屬性，解決浮動，margin重疊等一些問題。

  語法：zoom:normal

  參數：
  normal：使用對象的實際尺寸(默認值)

  number：用數字來定義縮放比例，不能出現負數

  js代碼：

  <!--html代碼--><img class="cover" src="" onmousewheel="return zoomImg(this)"><!--js代碼-->//滾輪放大縮小圖片function zoomImg(_obj) {<!--一開始默認是100%-->let zoom = parseInt(_obj.style.zoom, 10) || 100;<!--滾輪滾一下wheelDelta的值增加或減少120-->zoom += event.wheelDelta / 12;if(zoom>170){zoom=170;}if (zoom > 0) {_obj.style.zoom = zoom + '%';}return false;}

• 本欲實現圖片復制功能，奈何未能實現，在此過程中發現一個插件可以用來實現文字的復制功能，這個插件就是clipboard.js，官網地址 http://www.clipboardjs.cn

總結

以上是生活随笔為你收集整理的仿选单网图片合成小工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。