快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

html2canvas实现保存网页为图片,canvas2image解决图片模糊问题

  1. 下载canvas2image.js和html2canvas.js文件,百度官方即可下载
  2. 具体代码如下

            
$(function() { var canvas2 = document.createElement("canvas"); let _canvas = document.querySelector('.card-bg');//需要替换成图片的html区域 //获取宽高 var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了 canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; //可以按照自己的需求,对context的参数修改,translate指的是偏移量 // var context = canvas.getContext("2d"); // context.translate(0,0); var context = canvas2.getContext("2d"); context.scale(1.85, 1.7); html2canvas(_canvas,{canvas:canvas2}).then(function(canvas) { var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url $(".card-bg").html(''); }) });

当前题目:html2canvas实现保存网页为图片,canvas2image解决图片模糊问题
本文来源:http://6mz.cn/article/ggosoe.html

其他资讯