番禺建设网站集团,让网站打开更快,微信小程序怎么做抽签,专门做汽配的网站功能#xff1a; 1.兼容 PC 和 Mobile#xff1b; 2.对指定的区域进行截取#xff1b; 3.可以控制截图大小#xff1b; 4.截图生成base64图片地址 一、安装插件
npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用
import html2canvas fro… 功能 1.兼容 PC 和 Mobile 2.对指定的区域进行截取 3.可以控制截图大小 4.截图生成base64图片地址 一、安装插件
npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用
import html2canvas from html2canvas;三、以下代码可直接复制
templatediv idpagediv页面截图 只截取指定区域/div!-- 截图区域 --div classcontent refcontentdiv stylefloat:left这里是丰富的网页内容.../divinput typetext stylewidth:300px;height: 30px;div styleheight:100pxdiv盒子/divdiv styleheight:100px300px/div/divbutton classbtn clickgetPrintScreen获取截图/buttondiv classimg-boxh2截图结果:/h2!-- 通过img标签把获取到的截图呈现出来 --img :srcimgUrl alt //div/div
/templatescript
import html2canvas from html2canvasexport default {name: Screenshot,data () {return {imgUrl: null, //截图地址}},methods: {//获取截图方法getPrintScreen () {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.content, {// width: 30, //截图宽度// height: 50, //截图高度backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色nulluseCORS: true, //支持图片跨域scale: 1, //设置放大的倍数}).then((canvas) {// 把生成的base64位图片上传到服务器,生成在线图片地址let url canvas.toDataURL(image/png) // toDataURL: 图片格式转成 base64console.log(base64图片地址, url)this.imgUrl url})},},
};
/script!-- 本demo样式代码不重要 --
style langless
#page {padding: 0;width: 100%;height: 100%;background-color: #fff;.content {text-align: center;background-color: rgb(243, 161, 152);}.btn {display: block;width: 60vw;height: 50px;background: #79c76f;border-radius: 2vw;border: none;font-family: Source Han Sans CN;font-weight: 400;color: #ffffff;letter-spacing: 4px;text-align: center;margin: 30px 0 20px 40px;}
}
/style
