anyv / xkeasy · 提交

转到一个项目

作者 刘朕
提交 9648aabe7dc469ae74ad465f36847e4e2ebbe36a 1 个父辈 d876a250
1 个管道 的构建 通过 耗费 1 秒

页面生成图片优化

内嵌 并排对比
正在显示 1 个修改的文件 包含 63 行增加 和 50 行删除
... ... @@ -11,6 +11,9 @@
<link rel="stylesheet" href="__TMPL__/public/assets/css/reset.css"/>
<link rel="stylesheet" href="__TMPL__/public/assets/css/log.css"/>
<style>
.disabled {
background: #999;
}
.tx_masktwo {
display: none;
z-index: 2;
... ... @@ -421,7 +424,7 @@
</foreach>
</div>
<div class="view_img" style="padding: 0 0.3rem;display: none;">
<div class="log_three_select_one log_three_select_btn down" href="javascript:;" id="view_cavans">查看订单截图</div>
<div class="log_three_select_one log_three_select_btn down" href="javascript:;" id="view_canvas">查看订单截图</div>
</div>
<!-- 列表内容 -->
<div id="orderlist" style="background: #fff;">
... ... @@ -736,7 +739,6 @@
(function ($, doc) {
$.init();
school_arr = {$school};
console.log(data_class_arr, 'dfdfds');
$.ready(function () {
schoolpicker.setData(school_arr);
classpicker.setData(data_class_arr);
... ... @@ -754,9 +756,6 @@
var express_word
$(".log_three_select_tongyi").click(function () {
expresspicker.show(function (e) {
console.log(e, '3333')
console.log(e[0].value);
console.log(e[0].text);
express_word = e[0].value;
console.log(express_word, "experss_word")
$(".express_word").text(e[0].text);
... ... @@ -836,9 +835,6 @@
var excompany_word
$(".excompany").click(function () {
excompanypicker.show(function (e) {
console.log(e, '3333')
console.log(e[0].value);
console.log(e[0].text);
school_name = e[0].value
$(".excompany_word").text(e[0].text);
$("#logistic_name").val(e[0].value);
... ... @@ -861,11 +857,6 @@
var tabIndex = $(this).index();
$(this).addClass("log_three_tab_two").addClass("word_color").addClass('aaa').siblings().removeClass("log_three_tab_two").removeClass("word_color").removeClass("aaa");
$('.log_three_list_contant').eq(tabIndex).css('display', 'block').siblings().css('display', 'none');
if(tabIndex == 0) {
$('.view_img').css('display','block');
} else {
$('.view_img').css('display','none');
}
search();
$('.log_three_fixed_left_one img').attr('src', "__TMPL__/public/assets/images/fangkuang.png")
});
... ... @@ -1159,7 +1150,9 @@
" <span style=\"width: 70%;height:20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;float: left;\">"+g_c.book_name+"</span>:"+g_c.number_sum+"\n" +
" </div>"
})
$('.goods').html(goods_count_html)
$('.goods').html(goods_count_html);
count = result.length;
order2canvas();
} else {
alert('未知错误');
}
... ... @@ -1425,47 +1418,67 @@
</script>
<script>
var count = "{$count}";
if(count > 0) {
var img_url = '';
var k= $("#orderlist").offset().top;
var canvas2 = document.createElement("canvas");
let
_canvas = document.querySelector('#orderlist');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 2;
canvas2.height = (h + 400) * 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(2, 2);
html2canvas(document.querySelector('#orderlist'), { canvas: canvas2 }).then(function(canvas) {
//document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
$.ajax({
type: 'POST',
url: "{:url('upload_img')}",
data: {img:canvas.toDataURL(),top:k},
dataType: 'json',
success: function (res) {
img_url = res.data;
$('.view_img').css('display','block');
}
var allow = true;
order2canvas();
function order2canvas() {
if(count > 0 && allow) {
var img_url = '';
var k= $("#orderlist").offset().top;
var canvas2 = document.createElement("canvas");
let
_canvas = document.querySelector('#orderlist');
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 2;
canvas2.height = (h + 400) * 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(2, 2);
html2canvas(document.querySelector('#orderlist'), { canvas: canvas2 }).then(function(canvas) {
//document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
var text = $('#view_canvas').text();
$.ajax({
type: 'POST',
url: "{:url('upload_img')}",
data: {img:canvas.toDataURL(),top:k},
dataType: 'json',
beforeSend: function() {
allow = false;
$('#view_canvas').text('截图生成中...');
if(!$('#view_canvas').hasClass('disabled')) {
$('#view_canvas').addClass('disabled');
}
},
success: function (res) {
img_url = res.data;
$('.view_img').css('display','block');
$('#view_canvas').text(text);
$('#view_canvas').removeClass('disabled');
allow = true;
}
});
// document.querySelector(".down").setAttribute('href', canvas.toDataURL());
});
// document.querySelector(".down").setAttribute('href', canvas.toDataURL());
});
$('#view_cavans').click(function(){
} else {
if(!$('#view_canvas').hasClass('disabled')) {
$('#view_canvas').addClass('disabled');
}
}
}
$('#view_canvas').click(function(){
if(!$('#view_canvas').hasClass('disabled')) {
wx.previewImage({
current: img_url, // 当前显示图片的http链接
urls: [img_url] // 需要预览的图片http链接列表
});
})
}
}
})
</script>
</body>
... ...