html详情生成图片

原文链接： https://www.jianshu.com/p/141707443bbf

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)
        }
    },

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

猜你喜欢