微信长按保存html2canvas生成的图片

qq_25656031 2016-04-01 11:32:13

安卓手机在微信内长按保存html2canvas生成的图片，提示保存失败，但是可以在相册中找到图片，图片只是截屏。在iOS上没这个问题，有没有遇到的，为什么？

...全文

1184 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

Go 旅城通票 2016-04-01

打赏
举报

回复

http://bbs.csdn.net/topics/391848075?page=1#post-400993923

最近用QRCode.js 生成二维码之后，发现在小米和华为手机的微信上面页面长按识别不了，苹果和其他手机浏览器是正常的。qrcode在页面生成会生成一个canvas标签和一个img标签，在电脑浏览器上调试的时候发现生成二维码之后canvas标签是会自动隐藏的，然后展示img标签，然后通过vConsole 发现在小米或者华为手机上生成的二维码是通过canvas展示的，img标签被隐藏，而且img.src没有任何内容。怀疑是浏览器兼容问题。 jquery.qrcode.js 是一个纯浏览器生成 QRcode 的 jQuery 插件（（可以从https://github.com/jeromeet

项目需求写完有一段时间了，但是还是想回过来总结一下，一是对项目的回顾优化等，二是对坑的地方做个记录，避免以后遇到类似的问题。需求利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。生成的海报如下需求分析 1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序 2、利用小程序生成海报保存图片到相册分享到朋友圈，用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的实现方案一、分析如何实现相信大家应该都会有类似的迷惑，就是如何按照产品设计的那样绘制成海报，其实当时我也是不知道如何下手，认真想了下得通过canvas绘制成图片，这样用户保存这个图片到相册，就可以

前端可视化软件guiplan教程，无论是懂前端还是不懂前端，都可以学会基本的布局操作。全程都是可视化教学，自动生成代码。生成之后的代码符合w3c规范，除了学会软件的使用以外，我们还能学到前端html结构搭建，拖拽调整html结构，css常用样式可视化的配置，以及交互功能vue可视化配置，简单的代码编写以及可视化数据绑定，事件绑定等。全程可视化编程，配置好之后效果立刻生效，同步更新，直接点击页面即可查看交互效果，更有利于减少研究成本与学习成本。无论是制作静态html页面，还是动态的vue项目页面。都支持可视化布局，可视化拖拽，还支持可视化交互。目前支持unipp与element-ui框架,支持可视化html元素操作，支持可视化拖拽html元素结构，支持一键添加html标签,支持一键添加uniapp组件或element-ui组件，支持可视化调整css样式，支持可视化vue数据与方法创建，支持可视化数据指令事件等一键绑定，支持实时预览实时更新，支持可视化交互测试修改之后直接点击预览页面即可测试，支持一键生成代码html,css,js图片等支持一键保存文件无论是静态html页面还是动态vue文件都能自动分类，自动存储。支持手写代码与自动生成代码混合编写开发，比如添加过滤器filters,监听器watch等。灵活便捷对程序员有好，是一款真正适合程序员开发的软件。

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。首先引入QRCode.js文件，下载地址如果生成二维码的信息是固定不变的，那么当然不需要如此这般，网上有好多现成的二维码生成器，直接用就好。可是，我的需求是这样的，二维码用于在微信或QQ中分享，根据不同的用户信息分别生成不同的二维码，这样就不能偷懒，就得用代码生成了，并且生成的二维码支持长按识别进入。话不多说，直接上干货： html部分：

<div id=qrDiv style=d

小程序的入口主要集中了以下3个：二维码搜索栏聊天转发然而并没有流量大户——朋友圈；虽然小程序不能分享到朋友圈，但其并没有把长按识别二维码的功能阉割；于是乎在朋友圈疯狂转发的便成了一张带小程序码的图片；这个功能的实现，在我第一次写小程序的时候困扰了很久；最开始想的重点都在带参数的小程序码上，查资料的时候偏离了轨道，一番搜索之后无疾而终，遂把这锅扔给了服务端，但仍耿耿于怀；第二次又是一番搜索，理清了头绪，就是canvas画一张图的事儿，但canvas我很少写，带着恐惧便没多尝试，一半demo被搁置；N天之后，又想起这事，豁然开朗：) 思路分解源码见文章底部 1. 二维码如果带有参数就有服务端发送过来我们需要的只是图片的url； 2. 把用到的图片和文字绘制到画布上 wx.createCanvasContext()； 3. 用户点击生成分享图的时候。把画布转成图片wx.canva

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章