var
this1
=
this
;
setTimeout
(
function
(
)
{
html2canvas
(
document
.
querySelector
(
"#capture"
)
,
{
backgroundColor
:
null
}
)
.
then
(
canvas
=>
{
let
dataURL
=
canvas
.
toDataURL
(
"image/png"
)
;
this1
.
downImg
=
dataURL
;
console
.
log
(
dataURL
)
;
}
)
;
}
,
0
)
;
使用
js
plumb框架画图
使用
html2canvas
+ svgToCanvas 将svg图片以及canvas
生成
缩略图
并用于用户在界面下载和上传后台
// 导入utils
.
js
文件,导入
html2canvas
包
import utils from '
.
.
/
.
.
/utils/util'
import
html2canvas
from '
html2canvas
'
downloadPicture
(
)
{ // 用户
生成
图片用于本地下载
this
.
designLoading
前端
生成
图片
html2canvas
官网，通过
html2canvas
将dom转成canvas，
使用
canvas
.
toDataURL 这个api转成base64图片发给后端去存储
* 获取要转换的dom
const dom = colRef
.
current
.
querySelector
(
`
.
${Dr
.
html5 canvas 前端
生成
缩略图
更新:2013/08/01: 解决了后面遇到的bug: 图片被压扁
(
IOS6
)
; 图片被旋转;整个源码放在: https://github
.
com/kairyou/html5-make-thumb新方案需要后面实现的, 就是下面的旧版本里的功能
(
水印/是否强制拉伸以适应目标尺寸等功能
)
.
w3ctech长沙站交流会, 里面分享的PPT: ht
.
.
.
使用
canvas画图不难，网上有很多案例，我这里要说的是canvas的一个坑：
canvas有同源策略的问题，这个之前还真的不知道，在这个需求中我需要获取个人的微信头像，但是当我在本地测试的时候会报错：
也就是说c
.
.
.
本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按
网页
保存为截图。
这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界
将整个
网页
保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。
一、实现HTML
网页
保存为图片
1
.
1 已知可行方案
现有已知能够实现网
.
.
.
