• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        html2canvas生成清晰的圖片實現打印的示例代碼

          發布時間:2019-09-30 15:47:45   作者:鄒小Q   我要評論
        這篇文章主要介紹了html2canvas生成清晰的圖片實現打印的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        前言

        最近由于公司業務要求,需要完成一個一鍵生成照片圖片打印總圖的功能

        html2canvas是一個非常強大的截圖插件,很多生成圖片和打印的場景會用到它

        但是效果很模糊 ,本文主要記錄一下如果解決模糊的問題以及各種參數如何設置

        目錄

        1. 基本用法
        2. 處理模糊問題
        3. 細節問題-壓縮base64, 導出處理

        基本用法

        window.html2canvas(dom, {
                scale: scale,
                width: dom.offsetWidth,
                height: dom.offsetHeight
            }).then(function (canvas) {
                var context = canvas.getContext('2d');
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                var src64 = canvas.toDataURL()
        }
        

        scale 為放大倍數 ,我這里設置為4 ,越高理論上越清晰

        dom.offsetWidth height: dom.offsetHeight 直接取得需要轉為圖片的dom元素的寬高

        處理模糊問題

        var context = canvas.getContext('2d');
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        

        這段代碼去除鋸齒,會使圖片變得清晰,結合scale放大處理

        細節問題

        如果生成的base64太大,會損耗性能,需要壓縮base64

        首先可能需要獲取base64的大小

        getImgSize: function (str) {
            //獲取base64圖片大小,返回KB數字
            var str = str.replace('data:image/jpeg;base64,', '');//這里根據自己上傳圖片的格式進行相應修改
        
            var strLength = str.length;
            var fileLength = parseInt(strLength - (strLength / 8) * 2);
        
            // 由字節轉換為KB
            var size = "";
            size = (fileLength / 1024).toFixed(2);
        
            return parseInt(size);
        }
        
        

        然后根據獲取的大小判斷你是否要壓縮base64

        壓縮的代碼如下

        compress: function (base64String, w, quality) {
            var getMimeType = function (urlData) {
                var arr = urlData.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                // return mime.replace("image/", "");
                return mime;
            };
            var newImage = new Image();
            var imgWidth, imgHeight;
        
            var promise = new Promise(function (resolve) {
                newImage.onload = resolve;
            });
            newImage.src = base64String;
            return promise.then(function () {
        
        
                imgWidth = newImage.width;
                imgHeight = newImage.height;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                if (Math.max(imgWidth, imgHeight) > w) {
                    if (imgWidth > imgHeight) {
                        canvas.width = w;
                        canvas.height = w * imgHeight / imgWidth;
                    } else {
                        canvas.height = w;
                        canvas.width = w * imgWidth / imgHeight;
                    }
                } else {
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL(getMimeType(base64String), quality);   
                return base64;
            })
        }

        使用方法

        self.compress(src64,width,1).then(function(base){
            src64 = base
            src64 = src64.replace(/data:image\/.*;base64,/, '')
            // 調用接口保存圖片
        }).catch(function(err){
            dialog.tip(err.message, dialog.MESSAGE.WARN);
        })
        
        

        本文主要包括,html2canvas使用,參數,如何保證圖片的清晰度和base64的一下處理

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        • 使用html2canvas將頁面轉成圖并使用用canvas2image下載

          這篇文章主要介紹了使用html2canvas將頁面轉成圖并使用用canvas2image下載的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2019-04-04
        • 使用html2canvas.js實現頁面截圖并顯示或上傳的示例代碼

          這篇文章主要介紹了使用html2canvas.js實現頁面截圖并顯示或上傳的示例代碼的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2018-12-18
        • html2canvas關于圖片不能正常截取的解決方案

          圖片中的文案、背景圖片、用戶頭像全部都是通過后端的接口獲取。但是使用 html2canvas 生成的canvas有些圖片成功的在canvas里生成了。但是有些圖片無論如何都顯示不出來,
          2018-07-31
        • html2canvas 將html代碼轉為圖片的使用方法

          html2canvas,這是一個非常著名的從瀏覽器網頁截圖的開源庫,使用很方便,功能也很強大。這篇文章給大家介紹html2canvas 將html代碼轉為圖片的使用方法,感興趣的朋友跟隨
          2018-05-16
        • html2canvas實現dashed虛線邊框的示例

          這篇文章主要介紹了html2canvas實現dashed虛線邊框的示例的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2018-04-17
        • html2canvas把div保存圖片高清圖的方法示例

          這篇文章主要介紹了html2canvas把div保存圖片高清圖的方法示例的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2018-03-05
        • 詳解html2canvas截圖不能截取圓角圖片的解決方案

          這篇文章主要介紹了詳解html2canvas截圖不能截取圓角圖片的解決方案的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2018-01-30
        • 使用html2canvas實現瀏覽器截圖的示例代碼

          這篇文章主要介紹了使用html2canvas實現瀏覽器截圖的示例代碼的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2018-01-26
        • html5使用html2canvas實現瀏覽器截圖的示例

          這篇文章主要介紹了html5使用html2canvas實現瀏覽器截圖的示例,非常具有實用價值,需要的朋友可以參考下
          2017-08-31
        • html 基于 canvas 實現的一個截圖小demo

          本篇文章主要介紹了html 基于 canvas 實現的一個截圖小demo,具有一定的參考價值,有興趣的可以了解一下
          2017-08-07

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            汉中 | 岳阳 | 朝阳 | 龙口 | 白银 | 三沙 | 台湾台湾 | 宁波 | 大理 | 沛县 | 项城 | 广安 | 南平 | 赵县 | 晋中 | 六安 | 郴州 | 肇庆 | 泸州 | 山南 | 玉树 | 中卫 | 驻马店 | 盘锦 | 吴忠 | 十堰 | 阿勒泰 | 佛山 | 黔东南 | 神木 | 铜川 | 衢州 | 云南昆明 | 大同 | 楚雄 | 马鞍山 | 黔南 | 赵县 | 武威 | 诸暨 | 龙口 | 楚雄 | 宜都 | 广西南宁 | 池州 | 白城 | 钦州 | 巴中 | 葫芦岛 | 四平 | 乐平 | 澳门澳门 | 盐城 | 眉山 | 株洲 | 泰兴 | 金华 | 厦门 | 湖南长沙 | 固原 | 焦作 | 潍坊 | 宁波 | 邹城 | 咸宁 | 海北 | 晋城 | 新余 | 迁安市 | 吉林 | 湖北武汉 | 定安 | 湛江 | 河池 | 晋中 | 六安 | 赵县 | 潜江 | 大同 | 台湾台湾 | 朔州 | 临猗 | 伊犁 | 许昌 | 池州 | 大庆 | 文昌 | 溧阳 | 灵宝 | 保定 | 兴安盟 | 石狮 | 东方 | 海宁 | 周口 | 广西南宁 | 海拉尔 | 昆山 | 辽阳 | 桐城 | 抚顺 | 临猗 | 株洲 | 曲靖 | 汉中 | 毕节 | 钦州 | 宁夏银川 | 那曲 | 德州 | 琼中 | 晋江 | 克孜勒苏 | 霍邱 | 东莞 | 九江 | 肥城 | 桐城 | 台山 | 扬中 | 淮南 | 哈密 | 海西 | 遵义 | 江西南昌 | 百色 | 鞍山 | 葫芦岛 | 曹县 | 丽江 | 临沧 | 茂名 | 新乡 | 包头 | 宝鸡 | 昭通 | 神农架 | 郴州 | 酒泉 | 阿里 | 新余 | 信阳 | 海南海口 | 赤峰 | 馆陶 | 台州 | 晋中 | 秦皇岛 | 威海 | 铁岭 | 基隆 | 榆林 | 乐平 | 广汉 | 玉林 | 海西 | 丹东 | 玉溪 | 株洲 | 杞县 | 襄阳 | 五家渠 | 威海 | 忻州 | 昆山 | 阳春 | 十堰 | 宜都 | 厦门 | 怀化 | 神木 | 南通 | 临海 | 保山 | 宜都 | 红河 | 海北 | 吉林长春 | 台中 | 海东 | 黔南 | 漳州 | 大庆 | 渭南 | 日喀则 | 盘锦 | 淮安 | 衡阳 | 伊犁 | 南通 | 金坛 | 青海西宁 | 无锡 | 荆门 | 台湾台湾 | 六安 | 海南 | 灵宝 | 临猗 | 赤峰 | 基隆 | 茂名 | 阳春 | 招远 | 单县 | 厦门 | 仁怀 | 商丘 | 酒泉 | 大同 | 改则 | 榆林 | 寿光 | 哈密 | 运城 | 衡水 | 钦州 | 喀什 | 云南昆明 | 和田 | 厦门 | 贵港 | 诸城 | 丽水 | 中山 | 南安 | 临沧 | 珠海 | 清远 | 邹城 | 泰州 | 台北 | 仁寿 | 宜宾 | 玉环 | 安康 | 海西 | 文昌 | 乌海 | 辽宁沈阳 | 兴安盟 | 苍南 | 安庆 | 新余 | 宿迁 | 朔州 | 泰安 | 宣城 | 杞县 | 吉林 | 大连 | 抚州 | 改则 | 阿勒泰 | 白沙 | 馆陶 | 大连 | 神农架 | 贺州 | 瑞安 | 抚州 | 余姚 | 东海 | 乐清 | 资阳 | 丹东 | 靖江 | 鹤岗 | 金华 | 海南 | 衡水 | 昭通 | 汉川 | 伊犁 | 巴中 | 武安 | 龙口 | 本溪 | 兴化 | 芜湖 | 南充 | 大同 | 洛阳 | 荆州 | 玉环 | 江苏苏州 | 运城 | 阿拉善盟 | 宜宾 | 南通 | 淮安 | 武夷山 | 吴忠 | 鹤岗 | 琼中 | 临海 | 孝感 | 安庆 | 大同 | 芜湖 | 深圳 | 芜湖 | 巢湖 | 永康 | 舟山 | 锡林郭勒 | 吉林长春 | 六盘水 | 防城港 | 垦利 | 承德 | 大兴安岭 | 焦作 | 天门 | 曲靖 | 黄南 | 承德 | 和县 | 东莞 | 池州 | 阿勒泰 | 张家口 | 日喀则 | 邹城 | 运城 | 海拉尔 | 靖江 | 张掖 | 包头 | 郴州 | 如皋 | 崇左 | 巢湖 | 铜陵 | 湘潭 | 武威 | 平凉 | 昭通 | 襄阳 | 博罗 | 六安 | 澄迈 | 抚顺 | 石河子 | 肥城 | 宜昌 | 海丰 | 玉林 | 乐平 | 广安 | 朝阳 | 天水 | 株洲 | 呼伦贝尔 | 廊坊 | 那曲 | 十堰 | 桓台 | 潮州 | 玉林 | 大庆 | 佳木斯 | 黔东南 | 遂宁 | 葫芦岛 | 保亭 | 陵水 | 绵阳 | 铜仁 | 温岭 | 佛山 | 宜昌 | 莒县 | 西藏拉萨 | 七台河 | 瓦房店 | 曲靖 | 阿拉尔 | 保亭 | 毕节 | 抚州 | 林芝 | 博罗 | 大同 | 吕梁 | 通化 | 大庆 | 漳州 | 汉川 | 大庆 | 焦作 | 兴安盟 | 鄂尔多斯 | 黔南 | 来宾 | 莱州 | 锡林郭勒 | 阜新 | 涿州 | 南安 | 莆田 | 顺德 | 灌南 | 涿州 | 六盘水 | 大连 | 长治 | 盘锦 | 大庆 | 香港香港 | 那曲 | 平顶山 | 承德 | 东阳 | 东阳 | 神农架 | 衡阳 | 孝感 | 吴忠 | 佳木斯 | 晋城 | 聊城 | 苍南 | 扬中 | 运城 | 台湾台湾 | 河北石家庄 | 神木 | 阿拉尔 | 海拉尔 | 三沙 | 松原 | 榆林 | 黄石 | 河池 | 临汾 | 瓦房店 | 厦门 | 燕郊 | 黄山 | 伊春 | 许昌 | 三亚 | 慈溪 | 三河 | 阿勒泰 | 白沙 | 上饶 | 黔南 | 营口 | 莆田 | 晋中 | 阜新 | 蚌埠 | 赣州 | 梅州 | 咸宁 | 鄂州 | 海南 | 吉林长春 | 遂宁 | 黔东南 | 福建福州 | 灌云 | 伊犁 | 白山 | 五家渠 | 朝阳 | 青海西宁 | 海拉尔 | 南充 | 台湾台湾 | 平潭 | 朔州 | 昌吉 | 灌南 | 诸城 | 石嘴山 | 盐城 | 潜江 | 滁州 | 濮阳 | 贵州贵阳 | 金昌 | 海南海口 | 云南昆明 | 南京 | 广汉 | 黑河 | 景德镇 | 三沙 | 佛山 | 海西 | 玉溪 | 广元 | 大同 | 武安 | 上饶 | 神木 | 南京 | 永州 | 姜堰 | 济南 | 项城 | 牡丹江 | 伊春 | 瑞安 | 红河 | 惠东 | 宁德 | 南京 | 枣庄 | 林芝 | 芜湖 | 塔城 | 九江 | 图木舒克 | 贺州 | 宿迁 | 嘉善 | 雅安 | 贵州贵阳 | 靖江 | 孝感 | 渭南 | 濮阳 | 滁州 | 枣阳 | 清远 | 莱州 | 台北 | 六盘水 | 日喀则 | 济南 | 朝阳 | 三沙 | 仙桃 | 深圳 | 吐鲁番 | 果洛 | 阳泉 | 黄山 | 云浮 | 建湖 | 洛阳 | 义乌 | 莆田 | 迁安市 | 灌南 | 河池 | 嘉峪关 | 和县 | 余姚 | 阜新 | 文昌 | 焦作 | 邹平 | 白城 | 瓦房店 | 云浮 | 金华 | 河池 | 垦利 | 海南 | 阜新 | 安徽合肥 | 柳州 | 邹平 | 顺德 | 忻州 | 济南 | 阿坝 | 日照 | 抚州 | 锡林郭勒 | 琼中 | 新泰 | 吕梁 | 滁州 | 武夷山 | 郴州 | 浙江杭州 | 大理 | 临猗 | 博罗 | 龙岩 | 五家渠 | 济宁 | 大连 | 遵义 | 河北石家庄 | 濮阳 | 宁德 | 德清 | 镇江 | 扬州 | 新余 | 文山 | 十堰 | 佛山 | 阳江 | 五指山 | 无锡 | 庄河 | 吉林长春 | 三沙 | 阳泉 | 枣阳 | 玉林 | 果洛 | 阿勒泰 | 义乌 | 海安 | 遵义 | 娄底 | 溧阳 | 新泰 | 清徐 | 海东 | 黑河 | 雅安 | 海宁 | 仁怀 | 昭通 | 辽宁沈阳 | 瓦房店 | 济南 | 丽水 | 永州 | 晋中 | 泰安 | 抚顺 | 库尔勒 | 平顶山 | 正定 | 白山 | 辽源 | 梅州 | 揭阳 | 衡水 | 海西 | 雄安新区 | 昭通 | 松原 | 明港 | 廊坊 | 东莞 | 吉林长春 | 松原 | 白山 | 孝感 | 鄂尔多斯 | 湛江 | 巴彦淖尔市 | 湘西 | 牡丹江 | 临沧 | 潍坊 | 鄂州 | 南充 | 宜昌 | 黑河 | 文昌 | 荆门 | 玉溪 | 恩施 | 馆陶 | 内蒙古呼和浩特 | 河源 | 安康 | 广元 | 安岳 | 通化 | 南通 | 贵州贵阳 | 商洛 | 如东 | 大同 | 河池 | 石嘴山 | 长葛 | 迁安市 | 遂宁 | 启东 | 馆陶 | 广饶 | 儋州 | 延安 | 黄石 | 秦皇岛 | 泗洪 | 伊犁 | 宁德 | 石嘴山 | 保山 | 盘锦 | 屯昌 | 嘉峪关 | 淮南 | 黔西南 | 肥城 | 兴安盟 | 枣庄 | 周口 | 柳州 | 烟台 | 澳门澳门 | 咸阳 | 四川成都 | 徐州 | 新疆乌鲁木齐 | 丹东 | 朔州 | 兴安盟 | 雅安 | 建湖 | 中山 | 新余 | 广西南宁 | 吉林 | 潜江 | 余姚 | 如皋 | 张掖 | 自贡 | 任丘 | 甘南 | 驻马店 | 定安 | 三沙 | 黄冈 | 毕节 | 仁怀 | 肥城 | 和田 | 博罗 | 阜新 | 柳州 | 眉山 | 博尔塔拉 | 哈密 | 西藏拉萨 | 临猗 | 包头 | 汕头 | 鹤壁 | 枣阳 | 德州 | 伊犁 | 海拉尔 | 来宾 | 桓台 | 张掖 | 盐城 | 铜仁 | 曲靖 | 嘉善 | 临海 | 大同 | 滁州 | 鄢陵 | 广元 | 丽水 | 五指山 | 德阳 | 遵义 | 湘西 | 内蒙古呼和浩特 | 赵县 | 香港香港 | 濮阳 | 桂林 | 马鞍山 | 万宁 | 舟山 | 陕西西安 | 大庆 | 钦州 | 柳州 | 金华 | 迪庆 | 乌兰察布 | 阿拉善盟 | 香港香港 | 盘锦 | 三明 | 青海西宁 | 如东 | 定州 | 博尔塔拉 | 牡丹江 | 泗阳 | 阜新 | 安阳 | 枣阳 | 海安 | 黑河 | 酒泉 | 定安 | 抚顺 | 昭通 | 淮北 | 博罗 | 清徐 | 阳泉 | 吉林长春 | 如皋 | 金坛 | 丹阳 | 芜湖 | 景德镇 | 达州 | 醴陵 | 北海 | 郴州 | 天长 | 汝州 | 甘孜 | 东海 | 三沙 | 汕尾 | 赣州 | 德清 | 黔南 | 七台河 | 巢湖 | 自贡 | 渭南 | 唐山 | 黔东南 | 益阳 | 临汾 | 三沙 | 雅安 | 三亚 | 台湾台湾 | 日土 | 长兴 | 钦州 | 灵宝 | 辽源 | 巴彦淖尔市 | 昌吉 | 青州 | 深圳 | 黔南 | 廊坊 | 五家渠 | 无锡 | 宜春 | 博尔塔拉 | 高雄 | 包头 | 防城港 | 燕郊 | 普洱 | 大同 | 惠州 | 东海 | 三亚 | 吉林长春 | 萍乡 | 随州 | 浙江杭州 | 锦州 | 晋中 | 潜江 | 宁波 | 黑河 | 三亚 | 济宁 | 日照 | 象山 | 新疆乌鲁木齐 | 昆山 | 聊城 | 南安 | 山西太原 | 忻州 | 铜陵 | 温岭 | 吕梁 | 宁夏银川 | 蚌埠 | 临沂 | 佳木斯 | 汝州 | 株洲 | 德阳 | 台北 | 濮阳 | 南京 | 黄南 | 临夏 | 任丘 | 定西 | 张家口 | 本溪 | 新疆乌鲁木齐 | 邯郸 | 青海西宁 | 黄山 | 澄迈 | 台北 | 基隆 | 普洱 | 晋中 | 赣州 | 玉林 | 毕节 | 陕西西安 | 内蒙古呼和浩特 | 赤峰 | 安康 | 内蒙古呼和浩特 | 临汾 | 曲靖 | 阿坝 | 潜江 | 邢台 | 吉林 | 池州 | 喀什 | 池州 | 武威 | 保定 | 巴中 | 乳山 | 来宾 | 湖北武汉 | 兴安盟 | 岳阳 | 海丰 | 杞县 | 德阳 | 黔东南 | 姜堰 | 榆林 | 上饶 | 湖州 | 龙岩 | 宁波 | 茂名 | 新疆乌鲁木齐 | 新乡 | 遵义 | 南安 | 铜陵 | 新余 | 阜阳 | 迁安市 | 涿州 | 昌吉 | 安岳 | 曹县 | 武威 | 黄冈 | 兴安盟 | 玉林 | 许昌 | 廊坊 | 蚌埠 | 巢湖 | 阜阳 | 宁国 | 蓬莱 | 红河 | 启东 | 阿里 | 益阳 | 包头 | 郴州 | 东阳 | 贵港 | 高雄 | 建湖 | 云南昆明 | 东台 | 达州 | 诸暨 | 如皋 | 伊犁 | 嘉兴 | 枣阳 | 延边 | 佛山 | 怒江 | 南平 | 昌都 | 益阳 | 吐鲁番 | 哈密 | 新疆乌鲁木齐 | 简阳 | 吉安 | 丹阳 | 玉溪 | 丽水 | 贵港 | 黑龙江哈尔滨 | 泉州 | 滕州 | 和县 | 珠海 | 湖南长沙 | 赣州 | 克孜勒苏 | 景德镇 | 阿坝 | 宁波 | 内蒙古呼和浩特 | 日土 | 海安 | 宁德 | 林芝 | 湖州 | 北海 | 自贡 | 铜陵 | 乌海 | 肥城 | 辽阳 | 阿拉善盟 | 三亚 | 嘉峪关 | 保亭 | 建湖 | 吐鲁番 | 鄂尔多斯 | 仁寿 | 马鞍山 | 达州 | 偃师 | 垦利 | 柳州 | 赤峰 | 郴州 | 象山 | 金坛 | 玉树 | 蚌埠 | 吴忠 | 温州 | 台湾台湾 | 濮阳 | 白银 | 巴中 | 天长 | 寿光 | 江西南昌 | 信阳 | 乌兰察布 | 招远 | 南充 | 台湾台湾 | 雄安新区 | 大理 | 鹰潭 | 保定 | 南京 | 甘南 | 南安 | 钦州 | 德阳 | 义乌 | 海宁 | 莱芜 | 保亭 | 江苏苏州 | 图木舒克 | 盐城 | 鹤壁 | 陵水 | 嘉峪关 | 四川成都 | 西藏拉萨 | 扬州 | 茂名 | 临汾 | 简阳 |