标签：海报 scale false canvas 生成 html2canvas context height
背景 ： next.js 根据不同数据生成不同海报 支持 长按保存图片
方案一： 使用canvas 画
难点： 内容较多 确定元素位置 太麻烦 性能消耗大
方案二： html2canvas.js
难点：引入方式 （ssr 项目中 import 引入 得到 undefined ）
渐变色 截图失真
清晰度不够
生成图片展示带有白底 （给展示盒子 加 overflow: hidden）
解决 引入方式
发现：
在本地启动项目没有问题
import html2canvas from 'html2canvas';
打包后再 在服务器构建 就提示 服务器错误 500 页面404
然后排除到是 html2canvas 为undefind 导致页面报错
处理：
1、 建一个资源文件 在同级目录引入 （本地可以使用、无法通过eslint 所以不知道服务端效果）
2、 按需引入 类似懒加载 只有执行到这里了 才会引入
import('html2canvas').then(
html2canvas =>
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d')
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
const url = canvas.toDataURL('image/png', 1)// 图片地址
}).catch(e => { console('load failed') })
)
渐变色 截图失真 (在第二中方式中 清晰度修改效果一般 记的设置canvas 的宽高)
展示图片的方式
/**
* 方案一
*this.generate()
* 缺点： 无法兼容 背景渐变
* */
generate () {
const _this = this
import('html2canvas').then(
html2canvas => {
// this.defaultHtml 生成图片最外层盒子
html2canvas(this.defaultHtml,
{
width: this.defaultHtml.clientWidth,
height: this.defaultHtml.clientHeight,
scale: 1,
useCORS: true,
allowTaint: false
}).then(function (canvas) {
const url = canvas.toDataURL('image/png', 1)// 图片地址 base64
_this.setState({
urlimg: url
})
_this.setState({ isShow: false })
})
}
)
}
/**
* 方案二
*this.convert2canvas()
* 缺点： 兼容背景渐变 创建新的canvas 画出二倍图
* */
dprFnc () { // 获取设备dpi
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
this.setState({ scale: window.devicePixelRatio })
return window.devicePixelRatio
}
return 1
}
convert2canvas () {
const _this = this
var shareContent = this.defaultHtml// 需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth // 获取dom 宽度
var height = shareContent.offsetHeight // 获取dom 高度
var canvas = this.canvas // 创建一个canvas节点 ！！！！！注意这里 这个就是创建的canvas！！！！！！
var scale = 2 // 定义任意放大倍数 支持小数
canvas.width = width * scale // 定义canvas 宽度 * 缩放
canvas.height = height * scale // 定义canvas高度 *缩放
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, // 自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, // dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
}
import('html2canvas').then(
html2canvas =>
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d')
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
const url = canvas.toDataURL('image/png', 1)// 图片地址
_this.setState({ urlimg: url })
_this.setState({ isShow: false })
}).catch(e => { console('load failed') })
)
}
<canvas className="hide"
ref={ele => { this.canvas = ele }}
width={this.state.width * 2} height={ this.state.height * 2}
></canvas>
提示
在Mac中开发 会发现 生成的图片 比html 生成的图片中 字体会偏下
效果如下 ：
出现问题原因：由于字体不同 ，window 上没有出现下沉情况 手机端也没有出现
处理方式： 引入字体 （字体文件大 不建议 ）
如果非要加入 可以那就配置文件压缩 vue项目 试过 ~~
react ssr的还没试过 不确定怎么操作
ios 13+ 版本失效问题
首先移除 html2canvas 【npm uninstall html2canvas】
然后安装指定版本 【npm install --save html2canvas@1.0.0-rc.4】
标签：海报,scale,false,canvas,生成,html2canvas,context,height 来源： https://blog.csdn.net/qq_42359718/article/details/111230995
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。