js實(shí)現(xiàn)截圖保存圖片功能的代碼示例
前幾天公司項(xiàng)目里有這樣一個(gè)需求,把網(wǎng)頁(yè)的某一部分能夠一鍵截圖。這個(gè)功能其實(shí)就是對(duì)人力的一個(gè)優(yōu)化,如果是人為做的話,相信大家都知道怎么做(用截圖工具在指定區(qū)域截圖,然后保存到本地,再上傳的服務(wù)器上去)。我這個(gè)主要就解決這個(gè)批量的人力的優(yōu)化。好,廢話不多說(shuō)了。直接上邏輯和代碼。'
這個(gè)問(wèn)題的解決方案:html to canvas to png. 目前有一個(gè)這樣的插件: html2canvas,
html2canvas($targetElem, { useCORS: true, onrendered: function(canvas) { } });
這個(gè)'$targetElem'就是那個(gè)要轉(zhuǎn)換的html, useCORS 用來(lái)設(shè)置圖片是否跨域(如html圖片域名和當(dāng)前網(wǎng)站不是同一個(gè)域名,需要設(shè)置這個(gè)屬性), onrendered 是轉(zhuǎn)換完成后執(zhí)行的方法。
里面有一種情況需要考慮:如果html標(biāo)簽里有svg標(biāo)簽, 目前htm2canvas不支持svg標(biāo)簽。
這個(gè)情況下就需要先把svg處理成html2canvas能處理標(biāo)簽。
我這策略是 svg 轉(zhuǎn)換成 canvas ,html2canvas 轉(zhuǎn)換完成,再回復(fù)svg。這里我還需要這個(gè)插件canvg(svg轉(zhuǎn)canvas)
具體代碼如下
var nodesToRecover = []; var nodesToRemove = []; var $svgElem = $targetElem.find('svg'); $svgElem.each(function(index, node) { var parentNode = node.parentNode; var canvas = document.createElement('canvas'); canvg(canvas, parentNode, {ignoreMouse: true, ignoreAnimation: true}); //將svg轉(zhuǎn)換成canvas nodesToRecover.push({ parent: parentNode, child: node }); parentNode.removeChild(node); nodesToRemove.push({ parent: parentNode, child: canvas }); parentNode.appendChild(canvas); }); html2canvas($targetElem, { useCORS: true, onrendered: function(canvas) { var base64Image = canvas.toDataURL('image/png').substring(22); //回復(fù)svg nodesToRemove.forEach(function(pair) { pair.parent.removeChild(pair.child); }); nodesToRecover.forEach(function(pair) { pair.parent.appendChild(pair.child); }); })
這個(gè)方案,我已經(jīng)完全實(shí)現(xiàn)了,并在我們項(xiàng)目里使用了。歡迎大家使用,如果有什么問(wèn)題,可以留言給我。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript 禁止用戶保存圖片的實(shí)現(xiàn)代碼
- js 將canvas生成圖片保存,或直接保存一張圖片的實(shí)現(xiàn)方法
- js實(shí)現(xiàn)canvas保存圖片為png格式并下載到本地的方法
- 通過(guò)js獲取上傳的圖片信息(臨時(shí)保存路徑,名稱(chēng),大?。┤缓笸ㄟ^(guò)ajax傳遞給后端的方法
- JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
- JS HTML5拖拽上傳圖片預(yù)覽
- 原生JS實(shí)現(xiàn)拖拽圖片效果
- JavaScript禁止右擊保存圖片,禁止拖拽圖片的實(shí)現(xiàn)代碼
相關(guān)文章
通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置
position 屬性規(guī)定元素的定位類(lèi)型,這個(gè)屬性定義建立元素布局所用的定位機(jī)制,本文給大家介紹通過(guò)設(shè)置CSS中的position屬性來(lái)固定層的位置,感興趣的朋友一起學(xué)習(xí)吧2015-12-12微信小程序開(kāi)發(fā)之從相冊(cè)獲取圖片 使用相機(jī)拍照 本地圖片上傳
本篇文章主要介紹了微信小程序開(kāi)發(fā)之從相冊(cè)獲取圖片--使用相機(jī)拍照,本地圖片上傳的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04微信小程序?qū)崿F(xiàn)打開(kāi)并下載服務(wù)器上面的pdf文件到手機(jī)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開(kāi)并下載服務(wù)器上面的pdf文件到手機(jī),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09微信小程序中target和currentTarget的區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于微信小程序中target和currentTarget區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11js打開(kāi)windows上的可執(zhí)行文件示例
這篇文章主要介紹了js如何打開(kāi)windows上的可執(zhí)行文件,需要的朋友可以參考下2014-05-05JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見(jiàn)操作技巧,需要的朋友可以參考下2019-03-03解析dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用
以下是對(duì)dom中的children對(duì)象數(shù)組元素firstChild,lastChild的使用進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07