使用canvas生成含有微信头像的邀请海报没有微信头像问题


Posted in HTML / CSS onOctober 29, 2019

最近做了一个微信内访问的H5页面,长按分享图片发送朋友邀请的海报,网上搜索资料,得出解决思路,用canvas将页面绘制生成图片,

    问题:canvas 图片跨域。

    解决过程(填坑历程):

    1.从网上存在如图解决办法     img.crossOrigin  = ""   (专业采坑,数年)。亲测无效。很是不解。

    2.网上也存在后端服务解决

   设置header头,或者nginx 服务配置等 允许访问。但是,存在问题(图片大部分为了优化,都会存放在第三方cdn.上面。这是第三方的配置,是否允许,自己很难控制)

    3.解决办法:采用所有图片路径,转化为base64流来处理。图片存为本地图片。这也可以就避开了跨域问题。

    最后个人解决方法:没有采用第3种保存本地,这样会增加本地图片,而且会存在本地跟微信端没有同步更新的问题,不是用户最新的头像。个人是采用远程下载后直接绘制输出图片,这样图片就变成本地图片,解决canvas绘制图片不支持跨域问题。

   wxheadimg.aspx 页面代码:

if (!string.IsNullOrEmpty(Request.QueryString["data"].ToString()))
{
    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Request.QueryString["data"].ToString());
    request.Timeout = 3000;
    WebResponse response = request.GetResponse();
    Stream stream = response.GetResponseStream();
    Bitmap image = new Bitmap(stream);
    //保存为PNG到内存流 
    MemoryStream ms = new MemoryStream();
    image.Save(ms, ImageFormat.Png);
    //重新输出头像
    Response.BinaryWrite(ms.GetBuffer());
    Response.End();
    ms.Close();
    response.Close();
    stream.Close();
}

   canvas绘制页面引用:<img src="wxheadimg.aspx?data=headimgurl" />

    canvas绘制代码也顺便弄出来:

<script type="text/javascript">
window.onload = function ()
{
    var IMAGE_URL;
    function takeScreenshot(){
        var shareContent = document.getElementById('shareMember');//需要截图的包裹的(原生的)DOM 对象
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement("canvas"); //创建一个canvas节点
       var scale = 1; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
       //var rect = shareContent.getBoundingClientRect();//获取元素相对于视察的偏移量
        //canvas.getContext("2d").translate(-rect.left, -rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
        var opts = {
            scale:scale, // 添加的scale 参数
            canvas:canvas, //自定义 canvas
            logging: true, //日志开关
            width:width, //dom 原始宽度
            height:height, //dom 原始高度
            backgroundColor: 'transparent',
        };
        html2canvas(shareContent, opts,{useCORS:true,logging:true}).then(function (canvas)
        {
            IMAGE_URL = canvas.toDataURL("image/png");
            $('.copyImage').attr('src',IMAGE_URL);
        })
    }
    takeScreenshot();
}
</script>

   页面代码 :

<div class="shareBox" id="shareMember">
        <div class="top">
            <div class="logo"><img src="wxheadimg.aspx?data=微信头像网址"/></div>
        </div>
        <div class="middle">
            <img src="makeQRCode.aspx?data=二维码内容" class="qrcode" />
        </div>
        <img src="" class="copyImage">
    </div>
jpg.shareBox{position:relative}
.shareBox .copyImage{position:absolute;top:0px;left:0px;z-index:999;opacity:0;height:666px;width:666px;}

总结

以上所述是小编给大家介绍的使用canvas生成含有微信头像的邀请海报没有微信头像问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 #HTML / CSS
You might like
PHP中操作ini配置文件的方法
2013/04/25 PHP
CentOS安装php v8js教程
2015/02/26 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
python编程的核心知识点总结
2021/02/08 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
师生聚会感言
2014/01/26 职场文书
班组建设经验交流材料
2014/05/12 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
党校培训学习心得体会
2016/01/06 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL