vue 使用html2canvas将DOM转化为图片的方法

2024-11-30 14:40:07

一、前言

我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。

注意：版本比较多，这里介绍最新版

二、代码

1. 安装

npm install html2canvas --save

现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。

2. 使用

<div class="imageWrapper" ref="imageWrapper">
  <img class="real_pic" :src="dataURL" />
  <slot></slot>
</div>

slot里面是你需要转化为图片的DOM元素。

data() {
  return {
    dataURL: ''
  }
},

dataURL是最后转化出来的图片base64地址，放在img标签中即可展示。

methods: {

toImage() {
  html2canvas(this.$refs.imageWrapper,{
    backgroundColor: null
  }).then((canvas) => {
    let dataURL = canvas.toDataURL("image/png");
    this.dataURL = dataURL;
  });
}
}

html2canvas的用法非常简单，不过1.0.0已经将写法改为了promise，在.then方法里获取canvas对象。

3.常见bug

1. 生成出来的图片有白色边框

在配置项里配置backgroundColor: null即可。

2. 有图片显示不出来并有报错（一般是跨域的错）

这是最常见的一个bug，就是这个插件无法生成跨域了的图片，也看了官方文档配置了也百度了都没有好的办法，最后是让后端直接把跨域的图片转成base64，就完美解决了这个问题。

3. 生成图片后会在原始DOM上覆盖而产生一个闪动的效果

先让生成的图片隐藏，等生成好以后再展示。（没有在手机上测试，效果不一定令人满意）

4.经典版本(0.5.0)常见bug

1.生成的图片模糊
2.有跨域图片导致生成的图片不完整

这两个问题网上百度都有很多解决办法。

html2canvas在vue下的巨坑

使用

html

<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  document.body.appendChild(canvas)
});

```

![clipboard.png](/img/bVbghPZ)

```
html2canvas(document.querySelector("#capture") {
  async: true
}).then(canvas => {
  document.body.appendChild(canvas)
});

如果你要配置一些参数可以在传入dom的后面进行 object 传参官网文档可查

官网文档

我自己的工程环境是vue-cli会进行webpack打包在ios下运行的时候会出现错误因为我要生成一张图片是的canvas api 是 toDataURL

这错误在ios一直显示是权限问题在ios 和safari 上的问题是一致的原因是canva绘制dom上的图片的时候是 base64的格式（webpack会对asstes目录下的图片进行压缩）花费了几个小时才解决这个问题，感觉很不值所以分享给大家希望大家别踩进去了！解决方法是可以 static目录或者同域下的文件地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现的canvas合成图片功能示例

本文实例讲述了微信小程序实现的canvas合成图片功能.分享给大家供大家参考,具体如下: 先要获取图片的信息然后将需要合成的内容用canvas绘制出来,得到一个合成好的画布,接下来用 wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径.这个时候的路径是微信的临时路径,浏览器是访问不了的,因此需要请求服务器用 wx.uploadFile 将本地资源上传到开发者服务器. 在页面的wxml中加入canvas组件如下: <view c
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法.分享给大家供大家参考,具体如下: 1.convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布:彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData():最后为myImage指定彩色图片的路径. 2.getColorData(
Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

1 前言 1.1 业务场景图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域. 由于浏览器的机制,使用 window.location.href 下载图片时,并不会保存到本地,会在浏览器打开. 2 实现原理 2.1 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-to-body> <canvas id="mycanvas"
微信小程序canvas.drawImage完全显示图片问题的解决

问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载目的通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的解决方案准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '',
微信小程序利用Canvas绘制图片和竖排文字详解

前言闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图.竖排的武将姓名.以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台.合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下. 正文首先放一张最终保存到相册的图片吧~ 自我感觉良好,至少达到了我自己的预期吧~~~ 下面让我们一步一步来看看如何实现的吧. 整个图片分为三个部分: 武将图片小程序码武将文字信息先来看一下 wxml 里面的代码
js canvas实现二维码和图片合成的海报

本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上.把名字画到画布上.把整张画布转为图片. 一.定义画布和合成海报的img <style type="text/css"> #canbox { width: 100%
vue 使用html2canvas将DOM转化为图片的方法

一.前言我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件. 注意:版本比较多,这里介绍最新版二.代码 1. 安装 npm install html2canvas --save 现在最新的版本应该是1.0.0,另外还有一个比较经典的版本是0.5.0,网上有许多关于这个版本的bug说明. 2. 使用 <div class="imageWrapper" ref="i
vue src动态加载请求获取图片的方法

一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, routers: this.$router.options.routes } } 3. 在需要的地方引入图片 <div class="avatar"><img :src="formData
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor
vue使用swiper实现左右滑动切换图片

本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码,供大家参考,具体内容如下使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 在组件中使用 <te
vue使用html2canvas和jspdf将html转成pdf

目录 A4尺寸安装插件html2canvas和jspdf 在项目中引入遇到的问题多行省略号图片跨域Tainedcanvasesmaynotbeexported base64DataURLscheme支持的类型: 总结 A4尺寸 A4纸的尺寸是210mm×297mm. 分辨率是72像素/英寸时,A4纸的尺寸的图像的像素是595×842(推荐用这个大小比例). 分辨率是150像素/英寸时,A4纸的尺寸的图像的像素是1240×1754. 分辨率是300像素/英寸时,A4纸的尺寸的图像的像素是2
javascript随机将第一个dom中的图片添加到第二个div中示例

javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
Android开发学习笔记之通过API接口将LaTex数学函数表达式转化为图片形式

本文将讲解如何通过codecogs.com和Google.com提供的API接口来将LaTeX数学函数表达式转化为图片形式.具体思路如下: (1)通过EditText获取用户输入的LaTeX数学表达式,然后对表达式格式化使之便于网络传输. (2)将格式化之后的字符串,通过Http请求发送至codecogs.com或者Google.com. (3)获取网站返回的数据流,将其转化为图片,并显示在ImageView上. 具体过程为: 1.获取并格式化LaTeX数学表达式首先,我们在这个网站输入LaT
vue中v-for加载本地静态图片方法

vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了): 之后v-for 动态加载图片路径就遇到了问题源码: <ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <div><img v-bind:src="item.imageurl"/></
解决在vue项目中,发版之后,背景图片报错,路径不对的问题

解决方法: 在utils.js里边的加上publicPath:'../../', 在引入图片或者背景图的时候,使用方法: 以上这篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 关于Vue背景图打包之后访问路径错误问题的解决 vue-cli中打包图片路径错误的解决方法关于vue.js发布后路径引用的问题解决 vue cli使用绝对路径引用图片问题的解决详解vue-cil和webp
vue 动态绑定背景图片的方法

vue动态绑定背景图片的方法,具体介绍如下所示: 1.backgroundImage && 三目运算符 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"> </div> 1.backgroundImage <div

vue 使用html2canvas将DOM转化为图片的方法

相关推荐

随机推荐