JavaScript 自动生成图片并合并问题

俺是平凡人 2014-02-18 03:33:11




请问像这样效果是如何实现的呢,上面的图片是自动生成的,鼠标放在图片上可以左右拖动,同时图片上的时间也改变,随便拖动下,下面的代码就会有变化,时间也是。把下面的一大串代码放到火狐浏览器地址栏里可以直接看到图片,谢谢

火狐下在图片上右键查看图片时,浏览器地址栏是为一大串地址

下面是第一张图片生成的代码

data:image/png;base64,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

+/icUaOy5WYgAAAABJRU5ErkJggg==




下面是第二张图片生成的代码

data:image/png;base64,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
...全文
996 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
螃蟹哥哥 2014-02-21
  • 打赏
  • 举报
回复
这里面肯定有canvas或者svg
萝莉狼 2014-02-21
  • 打赏
  • 举报
回复
你不要点查看图片,右键审查元素就能看到其真实面目了。 这个应该是<canvas>搞得
似梦飞花 2014-02-18
  • 打赏
  • 举报
回复
canvas? 控制移动和时间可能是js绘制的canvas 保存的话canvas.toDataURL()?

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧