html2canvas生成放大图片
https://github.com/lingdulvlv/html2canvas.gitvar width = $('#imageHead')[0].offsetWidth; //dom宽var height = $('#imageHead')[0].offsetHeight; //dom高// 解决图片模糊var scale = 2;//放大倍数var canvas = document.cr
·
https://github.com/lingdulvlv/html2canvas.git
var width = $('#imageHead')[0].offsetWidth; //dom宽
var height = $('#imageHead')[0].offsetHeight; //dom高
// 解决图片模糊
var scale = 2;//放大倍数
var canvas = document.createElement('canvas');
canvas.width = width * 2;
canvas.height = height * 2;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
var context = canvas.getContext('2d');
context.scale(scale, scale);
//设置context位置,值为相对于视窗的偏移量负值,让图片复位(解决偏移的重点)
var rect = $('#imageHead').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
context.translate(-rect.left, -rect.top);
context.fillStyle = "red";
var opts = {
canvas: canvas,
backgroundColor: null,
useCORS: true, // 【重要】开启跨域配置
scrollY: 0, // 纵向偏移量 写死0 可以避免滚动造成偶尔偏移的现象
};
html2canvas($("#imageHead")[0], opts).then(canvas => {
// 使用toDataURL方法将图像转换被base64编码的URL字符串
var src = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = src;
imagesAjax(src)
});
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)