45 + 391 + 60;
console.log("date_num_:"+date_num_);
var textHeight = text.length * 1.5 + 50;
var newHeight = date_num_ + textHeight + 166 + 150 + (textHtmlArr.length -1) * 20
var oneWidth = 0;
var oneHeight = 0;
var pianYi = 0; //图片宽度小于630时 设置图片居中显示的左偏移量
if(imageOne != false) {
oneWidth = imageOne.width;
oneHeight = imageOne.height;
if(oneWidth > 630){
oneHeight = 630*oneHeight / oneWidth;
oneWidth = 630;
}else{
pianYi = (630 -oneWidth) / 2
}
newHeight += oneHeight + 10;
}
if(newHeight < 1100){
newHeight = 1100;
}
//alert("----"+(newHeight));
//重新设置画布的高度
document.getElementById("main").height= newHeight;
//清空数组
textTitleArr.length = 0;
//先把图片绘制在这里
mainCtx.drawImage(starImg,0,0,720,391);
//先把中间白色背景图片绘制在这里
mainCtx.drawImage(middleImg,0,391,720,newHeight);
/**绘制标题**/
//设置标题文本的大小字体属性
mainCtx.font = "bold 30px Microsoft YaHei ";
//设置填充颜色#ff6600
mainCtx.fillStyle = "#333333";
writeTextOnCanvas(mainCtx, 45,42, titleVal,45,356);
/**绘制时间**/
//设置时间文本的大小字体属性
mainCtx.font = "19px SimHei ";
//设置填充颜色
mainCtx.fillStyle = "#858585";
mainCtx.fillText(date,45,date_num_);
/**绘制内容**/
//设置用户文本的大小字体等属性
mainCtx.font = "normal 27px Microsoft YaHei";
//设置用户文本填充颜色
mainCtx.fillStyle = "#0c0c0c";
var textRows = [];
var sectionSpace = 0 //段落间距
for(var index = 0; index < textHtmlArr.length; index++) {
var textOne = textHtmlArr[index].trim();
textOne = textOne.replace(/<[^>]+>/g,"");//去掉所有的html标记
console.log("----------textOne:"+textOne);
if(textOne != "") {
var oneRows = 0;
if(index != 0) {
oneRows = getRowsOfText(mainCtx, 42,47, textHtmlArr[index - 1]);
}
textRows.push(oneRows);
var totalRows = 0;
for(var r = 0; r < textRows.length; r++) {
totalRows += textRows[r];
}
writeTextOnCanvas(mainCtx, 42,47, textOne,45,date_num_ + 50 + totalRows * 42 + sectionSpace);
sectionSpace += 20;
}
}
//writeTextOnCanvas(mainCtx, 42,47, text,45,date_num_+50);
if(imageOne != false) {
imageOne.onload = function(){
mainCtx.drawImage(imageOne,45+pianYi,newHeight - oneHeight - 270,oneWidth,oneHeight);
}
}
mainCtx.drawImage(endImg,0,newHeight - 166,720,162);
$("#main").hide();
}
setTimeout(function(){
$('#myModal').reveal($("#a_myModal").text());
saveImageInfo();
},0);
};
}
//获取快讯正文的高度
function getContentHeight(){
}
//通过id获取canvas对象
function getCanvasContext(id){
return document.getElementById(id).getContext("2d");
}
//将画布生成图片
function saveImageInfo() {
var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpg");
//var w=window.open('about:blank','image from canvas');
//w.document.write("![from canvas]("+image+")
");
var svaeHref = document.getElementById("save_href");
var img = document.getElementById("save_img");
svaeHref.href=image;
img.src=image;
}
//下载图片
function saveAsLocalImage(){
var myCanvas = document.getElementById("main");
var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");
window.location.href=image;
}
//ctx_2d getContext("2d") 对象
//lineheight 段落文本行高
//bytelength 设置单字节文字一行内的数量
//text 写入画面的段落文本
//startleft 开始绘制文本的 x 坐标位置（相对于画布）
//starttop 开始绘制文本的 y 坐标位置（相对于画布）
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
for(var i = 1; getTrueLength(text) > 0; i++){
var huicheIndex = text.indexOf("
");
var pianyi = 0;
console.log("cutString-----------huicheIndex0000:"+huicheIndex);
if(huicheIndex < bytelength - 1 && huicheIndex > -1){
console.log("cutString-----------huicheIndex111:"+huicheIndex);
pianyi += 3;
return huicheIndex;
}
var tl = cutString(text, bytelength);
ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
text = text.substr(tl + pianyi);
}
}
//获取文本所占的高度
//ctx_2d getContext("2d") 对象
//lineheight 段落文本行高
//bytelength 设置单字节文字一行内的数量
//text 写入画面的段落文本
function getHeightOfText(ctx_2d, lineheight, bytelength, text){
var arr = [];
for(var i = 1; getTrueLength(text) > 0; i++){
var tl = cutString(text, bytelength);
var temp = text.substr(0, tl);
temp = trim(temp)
if(temp != "" && temp !="undefiend"){
arr.push(temp);
}
console.log("getHeightOfText------------tl:"+tl+":"+temp)
text = text.substr(tl);
}
return arr.length;
}
//获取字符串的真实长度（字节长度）
function getTrueLength(str){
var len = str.length, truelen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
truelen += 2;
}else{
truelen += 1;
}
}
return truelen;
}
////按字节长度截取字符串，返回substr截取位置
function cutString(str, leng){
var len = str.length, tlen = len, nlen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
if(nlen + 2 < leng){
nlen += 2;
}else{
tlen = x;
break;
}
}else{
if(nlen + 1 < leng){
nlen += 1;
}else{
tlen = x;
break;
}
}
}
return tlen;
}
function cutToArray2(mainCtx ,arr,text){
console.log("text:"+text)
var lineWidth = 0; //当前行的绘制的宽度
var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标
for(var i = 0; i 280){
//判断最后一位是否是标点符号
if(judgePunctuationMarks(text[i-1])){
arr.push(text.substr(lastTextIndex,i-lastTextIndex));
lastTextIndex = i;
}else{
arr.push(text.substr(lastTextIndex,i-lastTextIndex-1));
lastTextIndex = i-1;
}
}
//将最后多余的一部分添加到数组
if(i === text.length - 1){
arr.push(text.substr(lastTextIndex,i-lastTextIndex+1));
}
}
console.log("arr1----------:"+arr)
}
//判断是否是需要避开的标签符号
function judgePunctuationMarks(value) {
var arr = [".",",",";","?","!",":","\"","，","。","？","！","；","：","、"];
for(var i = 0; i< arr.length; i++){
if(value === arr[i]){
return true;
}
}
return false;
}
//获取文本所占的行数
//ctx_2d getContext("2d") 对象
//lineheight 段落文本行高
//bytelength 设置单字节文字一行内的数量
//text 写入画面的段落文本
function getRowsOfText(ctx_2d, lineheight, bytelength, text){
var arr = [];
for(var i = 1; getTrueLength(text) > 0; i++){
var tl = cutString(text, bytelength);
var temp = text.substr(0, tl);
temp = trim(temp)
if(temp != "" && temp !="undefiend"){
arr.push(temp);
}
text = text.substr(tl);
}
return arr.length;
}
//html2canvas 生成图片 begin
function createImg(id){
var title = $("#title_"+id).text();
var times = $("#time_"+id).text();
//读取用户的文本
var content = $('#text_'+id).html() ;
content = content.replace(//g,'
');
var restr = '
'
+'
正在生成图片，请稍后...
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
' + title + '
'
+'
'
+' ' + times + ''
+'
'
+'
' + content + '
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
'
+'
图片已生成，点击图片下载，点击这里关闭
'
$("body").append($(restr));
$(".xmsg").fadeIn('fast');
//设置延迟的作用：保证在文字、图片完全加载后才启动canvas画布画出图片
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; // 获取页面滚动高度，解决生成图片顶部有空白的问题
var targetDom = $("#htmlbody")[0]
html2canvas(targetDom,{
allowTaint: false,
useCORS: true,
height: targetDom.offsetHeight,
width: targetDom.offsetWidth,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
x: 0,
y: scrollTop, // 用网页滚动的高度定位y轴顶点
dpi: window.devicePixelRatio * 2,
scale: 2
}).then(function(canvas) {
var image = new Image();
var imgUrl = canvas.toDataURL("image/png");
if(imgUrl == 'data:,'){
alert('图片生成失败，请重试');
$(".warper").remove();
}else{
image.src = imgUrl;
$('#saveImage').attr('href', imgUrl);
$(image).appendTo($(".htmltarget"));
$(".htmltarget").fadeIn();
$(".xnote").fadeIn();
}
$(".xmsg").fadeOut('fast');
});
/* setTimeout(function(){
},1000); */
}
function closeImg(){
$(".xnote").fadeOut();
$(".htmltarget").fadeOut();
$(".warper").fadeOut();
$(".warper").remove();
}
//html2canvas 生成图片 end