- 其他登录方式 -
注册、登录代表你已阅读并同意《用户协议》
微信登录
请使用微信扫描二维码登录“汽车之心”
人投票 | 条评论 |
投票
已累计票
点我投票
票 %
分享
好文章，需要你的鼓励
请您注册或者登录汽车之心社区账号即可发表回复
去登录
发表
 { ?><?=$arr_news['admin']['face']?><?php } else { ?>/mat/src/images/index/default_head.png<?php } ?>)
 { ?><?=$v3['face']?><?php } else { ?>/mat/src/images/index/default_head.png<?php } ?>)
$v2) { ?>-
th);
const height = parseValue(box.height);
// 获取像素比
const scaleBy = DPR();
// const scaleBy = 2;
// 创建自定义 canvas 元素
var canvas = document.createElement('canvas');
// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
var scrollHeight = $(selector).height();
// console.log(height)
// console.log(scrollHeight)
// return false;
// var scrollHeight = 4000;
// if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// scrollHeight += 20;
// }
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
// 设定 canvas css宽高为 DOM 节点宽高
// return false
canvas.style.width = width+'px';
canvas.style.height = height+'px';
// 获取画笔
const context = canvas.getContext('2d');
var rect = dom.getBoundingClientRect();//获取元素相对于视察的偏移量
// 赋值偏移量
if (rect_left==0) {
rect_left = rect.left;
}
if (rect_top==0) {
rect_top = rect.top;
}
// return false
context.translate(-rect_left*scaleBy,-rect_top*scaleBy);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
// 将所有绘制内容放大像素比倍
context.scale(scaleBy, scaleBy);
let x = width;
let y = height;
// $(selector).scrollTop(scrollHeight);
var opts = {
dpi: window.devicePixelRatio,
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
windowHeight:height,
y:height,
scrollY:scrollHeight,
useCORS: true, // 【重要】开启跨域配置
backgroundColor:'#ffffff',
};
return await html2canvas(dom, opts).then(function () {
$('.J_share_text_box').css({'padding':'0 0'})
convertCanvasToImage(canvas, x ,y, selector)
})
}
/**
* 图片转base64格式
*/
function convertCanvasToImage(canvas, x, y, selector) {
let image = new Image();
var src = canvas.toDataURL("image/png");
// image.width = x;
// image.height = y;
image.src = src;
$(selector).html(image)
layer.closeAll('loading');
// var link = document.createElement('a');
// link.href = src;
// link.download = 'test.png';
// link.click();
// downloadFileByBase64(src)
// _ajax_post('/news/upload_share_pic',{pic:src},function(_data){
// window.location.href = '/news/down_pic?file_url='+_data.data
// })
return image;
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function downloadFile(url,name='What\'s the fuvk'){
var a = document.createElement("a")
a.setAttribute("href",url)
a.setAttribute("download",name)
a.setAttribute("target","_blank")
let clickEvent = document.createEvent("MouseEvents");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
}
function downloadFileByBase64(base64,name){
var myBlob = dataURLtoBlob(base64)
var myUrl = URL.createObjectURL(myBlob)
downloadFile(myUrl,name)
}