html详情生成图片

html2canvas.js–终极解决方案来了,图片模糊问题,跨域问题,空白问题,锯齿问题,ios兼容问题,截屏不规则空白问题,文字展示图片不展示问题
2019.10.11 17:56:45
字数 157
阅读 62
二级域名之间的图片跨域,图片模糊问题,空白问题,锯齿问题,解决方案来了

在使用html2canvas.js处理页面截图分享时:
canvas同源策略:采用页面style中引入base64格式的图片文件
ios系统无法动态给img src赋值:
升级新版本html2canvas.js,使用id,opt .then(function(){})方式解决
官网地址http://html2canvas.hertzen.com/?utm_source=caibaojian.com
新版本地址http://html2canvas.hertzen.com/dist/html2canvas.js

小秘书public.tool.js

//将彩票票面指定区域内的dom转为base64格式图片---cpCanvas--需要页面html,css配合
    goDrawCp:function(){
        window.scrollTo(0,0);
        var _this = this;
        var cpCanvasContent = document.getElementById("cpCanvas");
        var opts = {
            useCORS:true,//允许跨域
            backgroundColor:"rgba(0,0,0,.0)",//或者null,都代表透明
            scale: window.devicePixelRatio,//提高清晰度
        };
        html2canvas(cpCanvasContent,opts).then(function(canvas) {
            document.body.appendChild(canvas);
            $("canvas").remove();
            convertCanvasToImage(canvas);
        })
        function convertCanvasToImage(canvas) {
            var base64Data = canvas.toDataURL("image/png");
            //直接在此拿到票面,base64图片数据后,在此进行展示
            $(".share_mask").show();
            $(".cp_img").attr("src",base64Data);
            setTimeout(function(){
                _this.goDrawShare();
            },300)
        }
    },

一句话解决:更新到最新源码文件,然后对应处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值