vue的html2canvas将dom转化为图片时踩得坑
一、html2canvas中图片涉及跨域图片
应用场景:做个投票活动,将参赛者的信息转化成图片截图分享。用户上传图片上传到腾讯云cos桶中,html2canvas只能转换本地资源的图片,涉及跨域的图片无法转换、
解决方法:通过nginx代理转发,
假设你的网站是 http://www.helloworld.com
把 https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png
换成 http://www.helloworld.com/cosImageUrl/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png
这样访问http://www.helloworld.com/cosImageUrl就代理成https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/
- 配置nginx,在80端口下的localtion中添加一条配置
location /cosImageUrl/ {
proxy_http_version 1.1;
proxy_pass https://dingzi-1258648408.cos.ap-chengdu.myqcloud.com/;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
add_header Access-Control-Allow-Credentials true;
} - 图片地址换成http://www.helloworld.com/cosImageUrl/upload/f49a6da3-73ea-422a-9b63-7a3e522130e2.png
- vue文件中
<div ref="imageWrapper" v-if="firstFlag"></div>
<div class="show_img">
<img :src="dataURL" alt="" v-if="!firstFlag" style="width: 100%">
</div>import html2canvas from "html2canvas" export default {
name: "share",
data() {
return {
firstFlag: true,
dataURL: '',
}
},
methods: {
toImg() {
html2canvas(this.$refs.imageWrapper,{useCORS: true}).then(canvas => {
let imgUrl = canvas.toDataURL('image/png');
this.dataURL = imgUrl;
this.firstFlag = false;
}).catch(error => {
})
},
},
mounted() {
const that = this;
that.$nextTick(function () {
that.toImg();
});
},
二、转化图片后截取部分背景图模糊,图片有空白部分
- 展示太快,内容没有加载完,解决方法:设置延时
setTimeout(() => {
html2canvas()
},500) - 内容太多,html2canvas是根据body进行截图,若内容高度高于body时,就会出现这样的问题(大概意思就是有滚动条时造成的) 解决方法:讲滚动条置顶
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0 - 设置生成图片的大小
html2canvas(that.$refs.imageWrapper,{useCORS: true,
width:window.screen.availWidth, //canvas宽度
height:window.screen.availHeight, //canvas高度
windowWidth:document.body.scrollWidth, //获取X轴方向滚动条内容
windowHeight:document.body.scrollHeight/1.06,//获取Y轴方向滚动条内容
x:0,//页面在水平方向滚动的距离
y:0,//页面在垂直方向滚动的距离
}).then(canvas => {
let imgUrl1 = canvas.toDataURL('image/png');
that.dataURL = imgUrl1;
that.firstFlag = false;
// this.firstFlag = false;
}).catch(error => {
})
vue的html2canvas将dom转化为图片时踩得坑的更多相关文章
- vue 使用html2canvas将DOM转化为图片
一.前言 我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件. 注意:版本比较多,这里介绍最新 ...
- Vue使用html2canvas将页面转化为图片
需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...
- html dom 转化成图片踩坑记(canvas toDataURL)
需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...
- Vue项目开发之打包后背景图片路径错误的坑
在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...
- html转化为图片下载
业务需求:按照客户要求把排课表转化为图片下载到本地.一个月到排课有很多.所以图片会很大 <!DOCTYPE html> <html lang="en"> & ...
- javascript随机将第一个dom中的图片添加到第二个div中去
javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...
- 【PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异常】
public static void main(String[] args) throws IOException { /** * PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异 ...
- 将Word,PDF文档转化为图片
#region 将Word文档转化为图片 /// <summary> /// 将Word文档转化为图片 /// </summary> /// <param name=&q ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
随机推荐
- vue知识点12
知识点归纳整理如下: 1. 数组用下标改变,或者对象增加属性,这样的改变数据 是不能触发视图更新的,要用 Vue.set(对象,属性,值) 或this.$set(对象,属性,值) 2. this. ...
- vue 路由工程化重构
当项目越来越庞大的时候,路由越来越多,而且遍布的页面也越来越多, 当需要更换地址的时候就无比的繁琐,通过学习了解到可以通过router.js来统一调控 原理: 在路由页面通过name来进行跳转,传入的 ...
- 《JavaScript高级程序设计》——第一章JavaScript简介
第一章主要讲了JavaScript的诞生和发展.刚刚接触JavaScript的我,似乎对这些内容并不感兴趣,快速看了一遍就开始去看第二章了. 看完第一章,收获也就是了解到JavaScript由ECMA ...
- Spring入门-------------1
Spring是一个开源框架,为简化企业级应用开发而生,使用Spring可以使简单的JavaBean 实现以前只有EJB才能实现的功能.Spring 是一个IOC和Aop容器框架. 特性: 轻量级:Sp ...
- Nginx 配置请求响应时间
1.常见默认nginx.conf配置日志格式 log_format main '$remote_addr - $remote_user [$time_local] "$request&quo ...
- Linux 系统编程 学习:04-进程间通信2:System V IPC(1)
Linux 系统编程 学习:04-进程间通信2:System V IPC(1) 背景 上一讲 进程间通信:Unix IPC-信号中,我们介绍了Unix IPC中有关信号的概念,以及如何使用. IPC的 ...
- Route53导出解析记录
使用AWS CLI来进行导出 可以参考AWS的官方文档 安装AWS CLI 官方安装aws cli文档 curl "https://awscli.amazonaws.com/awscli-e ...
- Polyglot Translators: Let's do i18n easier! 一款国际化插件小助手!
在做国际化文本有关的工作时, 是否厌倦了在不同应用或者网页之间频繁地切换进行中文, 繁体, 英文甚至韩文日文的文本翻译工作? 好吧, 我就是受不了频繁在进行文本字符串的转换, 还得跑到百度翻译上面搜索 ...
- Java如何正确比较浮点数
看下面这段代码,将 d1 和 d2 两个浮点数进行比较,输出的结果会是什么? double d1 = .1 * 3; double d2 = .3; System.out.println(d1 == ...
- 第一行代码中RecyclerView添加依赖库问题
现在更新到 implementation 'com.android.support:recyclerview-v7:29.2.1' 记得点Sync Now来进行同步.