html2canvas解决图片空白，图片样式错位

一、解决图片样式错位问题，使用稳定版本 "html2canvas": "^1.0.0-rc.4"，这个版本比较稳定，经测试大部分机型都适用.

二、html2canvas画布渲染后空白产生原因：

1、跨域（略）

2、使用的是网络图片

3、没有等待图片加载完成就调用了画板方法

如果使用的是网络图片http:// https:// 开头的，需要转成base64格式的，不要问为什么，转就是了

// 将图片转换为Base64
imageUrlToBase64(img) {// 一定要设置为let，不然图片不显示let image = new Image();// 解决跨域问题image.setAttribute('crossOrigin', 'anonymous');let imageUrl = img;image.src = imageUrl;// image.onload为异步加载image.onload = () => {this.getImage(image);};
},
getImage(image) {let canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext('2d');context.drawImage(image, 0, 0, image.width, image.height);let quality = 0.8;// 这里的dataurl就是base64类型let dataURL = canvas.toDataURL('image/jpeg', quality);},

4、image.onload = () => {};这个方法很重要，也即等待图片加载完成的回调，完成后再去调用

html2canvas渲染画布的方法

    <img:src="tempimg"@load="loadImage"@error="errorLoad"/>

    loadImage () {// 图片加载完成后调用画布方法const canvasBody = document.getElementById('canvas_body')const body = {}html2canvas(canvasBody, body).then((canvas) => {const imgInfo = canvas.toDataURL('image/png')if (this.callBack) this.callBack(imgInfo)this.hiddenToast()}).catch(err => {console.error(err)})},

html2canvas解决图片空白，图片样式错位相关推荐

android 图片空白,图片显示上下有空白的解决办法
1.最近在项目中遇到了ScrollView中嵌套ImageView,导致图片上下有空白如图: 在网上找解决的办法,说在ImageView中设置 android:scaleType="fit ...
html2canvas解决图片空白，网络图片跨域
解决思路:前端将网络图片转换成64位格式不需要设置什么阿里云服务器跨域,nginx配置header等等 1.准备一个canvas标签用于转换64位格式图片 <canvas ref=" ...
html2canvas解决图片偏移并下载
<div id="certificateContent"></div> <div class = '.getImg'></div> ...
Html2canvas——生成画布时图片显示空白
问题:用html2canvas生成画布图片,再转成pdf.生成图片时内容结构里的图片显示空白. 解决: 首先服务器设置图片允许跨域,如阿里云腾讯云配置跨域规则.其次图片设置crossOrigin=&q ...
解决 plt.savefig() 生成空白图片的问题
问题描述当你在使用 matplotlib.plot 中保存图片的 plt.savefig() 命令时,偶尔会出现图片保存好了点开看却是一张空白图片,此时你的代码往往是这样的: import matp ...
Python使用 plt.savefig 保存图片时是空白图片怎么解决
import matplotlib.pyplot as pltplt.show() # 保存图片 plt.savefig("D:image1.png") 使用如上代码保存图片,生成 ...
fla转为html canvas,使用html2canvas将html转为图片
使用html2canvas将html转为图片,网上找的解决清晰度问题大多存在最后生成的图片错位或者偏移问题. 布局html,其中#img-dom为待转换的html内容,.banner-canvas为输 ...
阿里iconfont上传svg图片空白、或展示不全的解决方案/搜索到的icon无法改变颜色解决方案
问题1:阿里iconfont上传svg图片空白.或展示不全原因造成这个问题的原因,可能是因为sketch.dx等软件在导出svg时,自动在svg上添加了一些iconfont平台无法解析的属性造成的 ...
前端 canvas toDataURL() 转图片生成空白图片问题
这里写自定义目录标题前端 canvas toDataUrl() 转图片生成空白图片问题感谢大神解决方法问题发生解决办法原理 vue项目中的使用总结 2022-05-17追加修改前端 ca ...

html2canvas解决图片空白，图片样式错位

html2canvas解决图片空白，图片样式错位相关推荐

最新文章

热门文章