javascript - 将 HTML 转换为 Jpeg 时的黑色图像
问题描述
我需要在我的应用程序上添加一项功能,允许用户将应用程序的一部分作为图像保存在设备上的照片文档中。
我正在使用 Nuxt.js,内容就在一个对话框中,就像这样:
<v-card ref="print" outlined class="certificate">
<v-img :src="photo.url"></v-img>
<v-card-text>
{{ photo.title }}
</v-card-text>
</v-card>
图像 src 在外部存储中,而不是在我的资产中,ofc...
生成要保存的文件的代码如下:
const el = this.$refs.print
const options = {
type: 'dataURL',
useCors: true,
scale: 2,
logging: false,
}
try {
const canvas = await this.$html2canvas(el, options)
await Filesystem.writeFile({
path: `certificate-${this.photo.id}.jpeg`,
data: canvas,
directory: Directory.Documents,
})
} catch (error) {
// ...
}
它有效,它获取正确的 HTML 部分并将 Jpeg 保存到我的文档中,不幸的是,其中的图像总是全黑的......
为什么???我怎样才能解决这个问题?
解决方案
您不提供任何encoding
选项,Filesystem.writeFile()
因此默认保存为 base64 编码。HTML 画布元素不是 base64 编码的。
推荐阅读
- python - TypeError: loadshortlink() 为参数“shortlink”获得了多个值
- python - Python3 Sqlite3 - 如何正确转义执行脚本?
- javascript - 如何使用 JavaScript 有条件地将过滤器应用于 Firestore 查询
- java - 如何消除更改标签中显示的图像之间的闪烁?
- php - 使用 PHP 将图像从一个文件移动到另一个文件
- optimization - 动态变量的背包优化
- php - 按钮不在“eco”标签内显示其值
- javascript - javascript更新mathJax方程的问题
- rest - Angular 6从rest api下载文件
- python - 在 Python 中将 unicode emojis 转换为 ascii emojis