前言
公司项目需要动态生成一个公益证书,需要对html转成图片供用户保存转发,一开始就想到用canvas,后来百度找到有html2canvas这个插件,就用起来了。
问题
一开始我的html背景图是用background-image,导致图片不清晰,找了好久才知道要用image标签才清晰,改用image后发现手机端不清晰,改来改去,找来找去,终于搞到高清的合成图了,直接上代码:
代码
/* 证书转图片 */
function toCanvas() {
var w = $("#cer-canvas").width();
var h = $("#cer-canvas").height();
var scaleBy = getDpr();
//要将 canvas 的宽高设置成容器宽高的 2 倍
var canvas = document.createElement("canvas");
canvas.width = w * scaleBy;
canvas.height = h * scaleBy;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(scaleBy, scaleBy);
console.log('scale' + getDpr())
html2canvas(document.querySelector("#cer-canvas"), {
background: "#fff",
allowTaint: true,
width: w,
height: h,
canvas: canvas,
scale: scaleBy
}).then(canvas => {
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var url = canvas.toDataURL("image/png", 1); // base64数据
document.querySelector("#certify").src = url
});
}
/**
* 根据 window.devicePixelRatio 获取像素比
* @returns {number}
* @constructor
*/
function getDpr() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
}
通过getDpr方法动态获取手机的像素比,从而正确的放大canvas,网上也有人统一放大2倍或4倍,
重点
html2canvas需下载下面的参考链接的JS,下面的大神对html2canvas源码修改,增加了scale参数,添加了这个参数,移动端就原模原样的还原了,贴上下载js地址
https://github.com/omwteam/html2canvas/blob/master/static/js/html2canvas.js
效果
合成原图
合成后效果图