背景

最近做一个Vue项目需求是用户长按保存图片，页面的数据是根据不同id动态生成的，页面渲染完生成内容图片让用户长按保存的时候，把整个页面都保存起来。

在项目遇到的坑是图片能生成，可是生成的图片总是往左偏移一部份内容，让显示的图片不完整

页面渲染的内容，而生成的图片效果要跟页面渲染的内容一致，下面是渲染的效果

而实际生成的图片是不完整的

测试：多次生成图片发现图片发生偏移的位置都不相同，而同一个特性是往左偏移。

工作原理：Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，页面元素在vue渲染完成时Html2canvas把整个页面(整屏)的内容生成base64的图片。

猜想：vue生命周期渲染页面未加载完html2canvas就生成图片，->了解Vue生命周期。

思考：既然是没渲染完成就生成图片，那就等vue页面渲染完成再执行html2canvas生成图片。

解决方案

在vue mounted周期利用setTimeout函数延迟执行html2canvas，这样就避免vue页面没渲染完成就执行html2canvas

mounted() {

setTimeout(function () {

this.toImage();

},1000);

}

html2canvas这个插件存有bug略坑，总结了几个遇到的坑及解决方法，待更新.....

Vue(项目踩坑)_解决vue中axios请求跨域的问题

一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

vue项目踩坑-引入bootstrap

1.下载jquery; npm install jquery --save-dev 2.在webpack.base.conf.js中添加如下内容: var webpack = require('web ...

Vue + TypeScript 踩坑总结

vue 和 TypeScript 结合的情况下,很多写法和我们平时的写法都不太一样,这里总结我项目开发过程中遇到的问题和问题的解决方案 有些问题可能还没解决,欢迎各位大佬给与提点. 另外,使用本文前可 ...

vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

首个hybird商业项目踩坑总结

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了以及

electron项目踩坑--A JavaScript error occurred in the main process：document is not defined

前言 记录electron-vue项目开发中遇到的一个错误,运行时报错如图: 控制台报错如下: ReferenceError: document is not defined at Object.&l ...

基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

基于 Laravel 开发 ThinkSNS&plus; 中前端的抉择(webpack&sol;Vue)踩坑日记

在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...

vue安装踩坑系列

1.安装npm node环境 2.npm install vue-cli -g 安装vue-cli vue-V检测脚手架是否安装成功 3.vue init webpack vuecliTest 初始化 ...

随机推荐

深入理解javascript原型和闭包(1)---一切都是对象

深入理解javascript原型和闭包(1)---一切都是对象 type函数输出的类型,在此列出: function show (x){ console.log(typeof(x));//undefi ...

three&period;js初涉略(一)

thre ...

centos7 yum安装mysql5&period;7并在root密码忘记的情况下重设密码

CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1. 下载mysql的repo源   1 $ wget http://repo.mysql ...

iOS开发- UICollectionView详解&plus;实例

本章通过先总体介绍UICollectionView及其常用方法,再结合一个实例,了解如何使用UICollectionView. UICollectionView 和 UICollectionViewC ...

Markdown 编辑器语法指南

基本技巧 代码 如果你只想高亮语句中的某个函数名或关键字,可以使用 `function_name()` 实现 通常编辑器根据代码片段适配合适的高亮方法,但你也可以用 ``` 包裹一段代码,并指定一种语 ...

Pythonchallenge一起来闯关

http://www.pythonchallenge.com/是一个在线的python过关游戏,一共有33关.玩这个游戏对熟悉python用法及相关库的使用都很有好处. 目前做到了第九关.python ...

关于Qt信号与槽机制的传递方向性研究(结论其实是错误的，但是可以看看分析过程)

最近由于项目的需求,一直在研究Qt.信号与槽机制是Qt的一大特色,该机制允许两者间传递参数,依次来实现对象间的通信.这个参数会分别存在于信号的参数列表和槽函数的参数列表中.需要注意的是,若将槽函数绑定 ...

Flask入门之上传文件到服务器

今天要做一个简单的页面,可以实现将文件 上传到服务器(保存在指定文件夹) #Sample.py # coding:utf-8 from flask import Flask,render_templa ...

php对接微信小程序支付

前言:这里我就假装你已经注册了微信小程序,并且基本的配置都已经好了.注: 个人注册小程序不支持微信支付,所以我还是假装你是企业或者个体工商户的微信小程序,其他的商户号注册,二者绑定,授权,支付开通,就 ...

flink 读取kafka 数据，partition分配

每个并发有个编号,只会读取kafka partition  % 总并发数 == 编号 的分区   如: 6 分区, 4个并发 分区: p0 p1 p2 p3 p4 p5 并发: 0 1 2 3    ...