vue中引入HTMLcanvas生成长图

项目中需要实现将某块html生成img图片，供用户保存到本地，最终采用html2canvas实现。

1、如何引入html2canvas？

项目架构是vue-cli的单页应用，如果在index.html入口主文件里面引入<script src='html2canvas.js'></script>；

这样每个组件都会加载此js，造成资源浪费。所以通过import方式，在需要的组件里面引入，但是，html2canvas 不支持import这种导入形式。下面通过修改html2canvas的源码，让其支持import这种引入

（1）在html2canvas源码中，找到下面标红的这一行，

将 var html2canvasExport的变量声明放在此js的最顶端，即去掉这一行的var，在页面最顶端加上下面标红的内容

（2）在页面最低端加上 export default html2canvasExport;

（3）在需要引入html2canvas的组件中 import html2canvas from '**/html2canvas'

（4）根据内容生成图片

let content_html = document.getElementById('poster');　　　　//要转化的div
let width = content_html.offsetWidth;
let height = content_html.offsetHeight;
let offsetTop = content_html.offsetTop;
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
let scaleBy = Math.ceil(window.devicePixelRatio);
canvas.width = width*scaleBy;
canvas.height = (height+offsetTop)*scaleBy;
context.scale(scaleBy,scaleBy);
var opts = {allowTaint:true,//允许加载跨域的图片
  tainttest:true, //检测每张图片都已经加载完成
  scale:scaleBy, // 添加的scale 参数
  canvas:canvas, //自定义 canvas
  logging: false, //日志开关，发布的时候记得改成false
  width:width, //dom 原始宽度
  height:height //dom 原始高度
};
html2canvas(content_html,opts).then(function (canvas) {canvas.style.width = width+"px";canvas.style.height = height+"px";var image = new Image();$('#grow-img').attr('src', canvas.toDataURL());});

（5）全部结束，有需要html2canvas的，可以去下面地址下载：

https://github.com/chenyumiao/vue-multi-page/tree/master/src/assets/js下

vue中引入HTMLcanvas生成长图相关推荐

Vue中引入heighchars图表------蜘蛛图/雷达图
1.没有Vue安装Vue环境的请看这篇博客: https://www.jianshu.com/p/02b12c600c7b 2.安装JetBrains WebStorm 11.0.3网上有资源,这里不 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
京东商品长图功能来啦不用改图一键生成长图
产品是吸引顾客购买的关键,想要提升店铺转化率产品主图优化必不可少?首先基础优化是在设计主图的时候就要注意产品突出,使用场景来设计,根据产品的特点突出卖点,文案搭配要起到辅助的效果等等. 关于主图设计和 ...
android webview生成长图,Android 生成长图并添加水印（二）
本文主要介绍一下RecyclerView生成长图. 是接着上一篇Android 生成长图并添加水印(一)写的,不过单独看也是可以的,如有不清楚的地方可以先看上一篇或在下方留言. 先附效果图: Recy ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...
在vue中使用antV-G2展示折线图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...

vue中引入HTMLcanvas生成长图

vue中引入HTMLcanvas生成长图相关推荐

最新文章

热门文章