美文网首页
html2canvas.js--终极解决方案来了,图片模糊问题,

html2canvas.js--终极解决方案来了,图片模糊问题,

作者: 木和土的杜 | 来源:发表于2019-10-11 17:56 被阅读0次

二级域名之间的图片跨域,图片模糊问题,空白问题,锯齿问题,解决方案来了

在使用html2canvas.js处理页面截图分享时:
  1. canvas同源策略:采用页面style中引入base64格式的图片文件
  2. 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)
        }
    },

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

相关文章

  • html2canvas.js--终极解决方案来了,图片模糊问题,

    二级域名之间的图片跨域,图片模糊问题,空白问题,锯齿问题,解决方案来了 在使用html2canvas.js处理页面...

  • ZXing二维码识别优化

    问题:二维码识别,如果图片中二维码太小就识别不出来解决方案: 同比例缩小图片,图片缩小后干扰图像变得模糊,增加识别...

  • canvas画图片模糊问题解决方案

    小程序 用小程序的 getSystemInfoSync() api获取设备像素,导出的宽高乘以物理像素 h5将ca...

  • [iOS]终极横竖屏切换解决方案

    [iOS]终极横竖屏切换解决方案 [iOS]终极横竖屏切换解决方案

  • 项目资料整理

    搜索框样式审核问题的终极解决方案汇总主要用于社交app,用于呈现一组图片iOS视频直播项目模板1模板2应用的菜单分...

  • 解决word图片模糊问题

    点击左上角的“文件”按钮,在弹出菜单中,点击“选项”。在弹出的“选项”窗口中选择“高级”,在“图像大小和质量”的选...

  • CSS图片缩放模糊问题

    在网站中,我们常常需要展示图片,如:商品列表、项目列表、轮播图、banner等。这些图片有的来源有两种: 用户自己...

  • Android 图片高斯模糊解决方案

    近年来,图片高斯模糊备受设计师的青睐,在各大知名APP中,如微信、手机QQ、网易云音乐等等都有对背景高斯图模糊的设...

  • Android 图片高斯模糊解决方案

    转自https://www.jianshu.com/p/02da487a2f43 近年来,图片高斯模糊备受设计师的...

  • Android 图片高斯模糊解决方案

    近年来,图片高斯模糊备受设计师的青睐,在各大知名APP中,如微信、手机QQ、网易云音乐等等都有对背景高斯图模糊的设...

网友评论

      本文标题:html2canvas.js--终极解决方案来了,图片模糊问题,

      本文链接:https://www.haomeiwen.com/subject/dthtmctx.html