//安裝
npm install --save html2canvas
//導(dǎo)入
import html2canvas from 'html2canvas'
1.在template模板中
<template>
<!-- 把要截圖的元素放在一個元素里,設(shè)置一個ref -->
<section class="image_tofile" ref="imageTofile">
<!-- 元素內(nèi)部放置要合成圖片的內(nèi)容 -->
<img class="poster-img" :src="personalBill" alt="">
<p class="poster-text">注意元素的樣式，有些樣式不能被截屏</p>
<p class="poster-text">不要用背景圖片期奔，用img標(biāo)簽防止截圖模糊</p>
</section>
</template>
//methods 使用
methods: {
// 頁面元素轉(zhuǎn)圖片
toImage() {
// 第一個參數(shù)是需要生成截圖的元素,第二個是自己需要配置的參數(shù),寬高等
return html2canvas(this.$refs.imageTofile, {
backgroundColor: null, // 背景顏色
dpi: 192, // 將分辨率提高到特定的dpi,默認(rèn)值為96
scale: 2, // 用于渲染的比例尺蟀拷。默認(rèn)為瀏覽器設(shè)備像素比率。默認(rèn)值是1抬旺，手機端設(shè)置成2
useCORS:true, // 是否嘗試使用CORS從服務(wù)器加載圖像
}).then((canvas) => {
this.posterUrl = canvas.toDataURL('image/png')//獲取的圖片地址
})
},
},html2canvas
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人恤溶，你說我怎么就攤上這事乓诽。” “怎么了咒程？”我有些...
- 文/不壞的土叔 我叫張陵鸠天，是天一觀的道長。 經(jīng)常有香客問我帐姻，道長稠集，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任饥瓷，我火速辦了婚禮剥纷，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘呢铆。我一直安慰自己晦鞋，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布刺洒。 她就那樣靜靜地躺著鳖宾，像睡著了一般。 火紅的嫁衣襯著肌膚如雪逆航。 梳的紋絲不亂的頭發(fā)上鼎文，一...
- 文/蒼蘭香墨 我猛地睜開眼澳眷，長吁一口氣：“原來是場噩夢啊……” “哼胡嘿！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起钳踊，我...
- 正文 年R本政府宣布屁药，位于F島的核電站粥血，受9級特大地震影響柏锄，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜复亏，卻給世界環(huán)境...
- 文/蒙蒙 一趾娃、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧缔御，春花似錦抬闷、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至眷茁，卻和暖如春炕泳，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背上祈。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 業(yè)務(wù)邏輯：在html頁面顯示表格，使用visibility: inherit; 隱藏該表格.點擊按鈕的時候使用ht...
- 本周有個需求是將HTML渲染好的頁面生成圖片揍很，用戶在微信端使用的時候能夠保存到相冊郎楼。于是一頓搜索猛如虎之后，發(fā)現(xiàn)h...
- 第一步：先引入對應(yīng)的js女轿，我引用的是老版本的箭启，對應(yīng)的js放在文章結(jié)尾了包含了這兩個js（js版本也很重要哦，每個版...
- 最近遇到一個需求蛉迹，是關(guān)于運勢測試的傅寡，將用戶信息保存在底部圖上，在微信中長按保存信息會與圖片一起被保留下來。圖示： ...
- canvas 實現(xiàn)電子簽名坑點：不能直接在css中設(shè)置canvas的width, height，否則畫布中鼠標(biāo)定位...
