canvas教程

html2canvas实现微信长按图片保存整个网页功能

字号+ 作者:H5之家 来源:H5之家 2017-03-20 14:00 我要评论( )

2017 01-22 html2canvas实现微信长按图片保存整个网页功能 项目中要做一个性格测试,第一个页面输入姓名,第二个页面显示测试结果。 第二个页面要求长按图片可以保存,微信自带的功能是长按一个图片可以保存但是他是局部的图片,而不是整张网页的内容。 网上

2017
01-22

html2canvas实现微信长按图片保存整个网页功能

项目中要做一个性格测试,第一个页面输入姓名,第二个页面显示测试结果。
第二个页面要求长按图片可以保存,微信自带的功能是长按一个图片可以保存但是他是局部的图片,而不是整张网页的内容。
网上找到了一个html2canvas的js插件。
遇到了几个问题
1.不支持跨域,微信头像显示不出来。
2.截的图不清晰
3.截出的元素是canvas

解决方法
1.图片跨域的问题是通过下载远程图片到本地解决的。
2.截图不清晰是通过放大2倍实现的。
3.创建img元素

页面需要先引入jquery和html2canvas.js
js实现的代码如下:

  • 本文固定链接: ?p=1261
  • 转载请注明: admin 2017年01月22日 于 发表
  • 最后编辑:2017-01-22

    作者:admin

    这个作者貌似有点懒,什么都没有留下。

    站内专栏

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 微信小程序新手教程之canvas API

      微信小程序新手教程之canvas API

      2017-03-20 17:07

    • 基于html5 canvas实现漫天飞雪效果实例

      基于html5 canvas实现漫天飞雪效果实例

      2017-03-18 17:00

    • 基于HTML5 Canvas的网页画板实现教程

      基于HTML5 Canvas的网页画板实现教程

      2017-03-18 08:00

    • JavaScript+html5 canvas实现本地截图教程

      JavaScript+html5 canvas实现本地截图教程

      2017-03-17 18:07

    网友点评
    v