Skip to content

孙龙 / note-library

Go to a project
Commit 75c94d3d by 孙龙
Options

Merge branch 'master' of http://119.23.72.7/sunlong_v5/note-library

parents c3a7675c a707465e
Inline Side-by-side
Showing with 79 additions and 15 deletions
public/js/web/design.js
...@@ -28,6 +28,10 @@ var tag={ ...@@ -28,6 +28,10 @@ var tag={
$(".edit-box").html(resp.data.template_extend.html); $(".edit-box").html(resp.data.template_extend.html);
tag.editUi(); tag.editUi();
}else{
layer.msg(resp.err_msg,{time:2000});
tag.editUi();
$("#templateid").val("");
} }
}, },
error: function(err) { error: function(err) {
...@@ -35,7 +39,37 @@ var tag={ ...@@ -35,7 +39,37 @@ var tag={
} }
}) })
}, },
base64:function(url,callback){
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
return dataURL;
}
function main(src, cb) {
var image = new Image();
image.src = src + '?v=' + Math.random(); // 处理缓存
// 支持跨域图片
image.crossOrigin = '';
image.onload = function(){
var base64 = getBase64Image(image);
cb && cb(base64);
}
}
main(url, function(base64){
callback(base64)
});
},
editUi:function(){ editUi:function(){
//图片logo转base64
tag.base64("http://img.ichunt.com/images/ichunt/label/logo1.png",function(base64){
$(".logobase64").css({"background":"url("+base64+") 0% 0% / 100% 100% no-repeat"})
})
$("body").attr("onselectstart","return false"); $("body").attr("onselectstart","return false");
// 基本实例化: // 基本实例化:
$('#colorpicker').colorpicker(); $('#colorpicker').colorpicker();
...@@ -65,7 +99,7 @@ var tag={ ...@@ -65,7 +99,7 @@ var tag={
} }
} }
$(".edit-con .gezi").remove(); $(".edit-con .gezi").remove();
$(".edit-con").append(html); $(".edit-con").prepend(html);
$(".edit-con").css({"backgroundColor":$(".tag-bgm").val()}) $(".edit-con").css({"backgroundColor":$(".tag-bgm").val()})
if($(".tag-border").val()){ if($(".tag-border").val()){
$(".edit-con").css({"border":$(".tag-border").val()}) $(".edit-con").css({"border":$(".tag-border").val()})
...@@ -100,7 +134,6 @@ var tag={ ...@@ -100,7 +134,6 @@ var tag={
$(".tools.act .zjj").val(ele.attr("zjj"));//字间距 $(".tools.act .zjj").val(ele.attr("zjj"));//字间距
$(".tools.act .ztys").val(ele.attr("ztys"));//字体颜色 $(".tools.act .ztys").val(ele.attr("ztys"));//字体颜色
$(".tools.act .zhg").val(ele.attr("zhg"));//字行高 $(".tools.act .zhg").val(ele.attr("zhg"));//字行高
$(".tools.act .imagesurl").val(ele.attr("imagesurl"));//图片路径
for(var i=0;i<$(".tools.act .sjglgroup").length;i++){ for(var i=0;i<$(".tools.act .sjglgroup").length;i++){
var current_=(i+1); var current_=(i+1);
if(typeof(ele.attr("sjgl"+current_))=="undefined"){ if(typeof(ele.attr("sjgl"+current_))=="undefined"){
...@@ -326,9 +359,27 @@ var tag={ ...@@ -326,9 +359,27 @@ var tag={
ele.css({lineHeight:val_+"px"}) ele.css({lineHeight:val_+"px"})
break; break;
case "imagesurl": case "imagesurl":
ele.attr("imagesurl",val_); var reader = new FileReader();
ele.css({"background":"url("+val_+") 0% 0% / 100% 100% no-repeat"}) var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
ele.css({"backgroundColor":"#ccc"}) var file = self[0].files[0];
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败，请上传不大于2M的图片！');
return;
}else{
//执行上传操作
console.log(file)
ele.css({"background":"url("+reader.result+") 0% 0% / 100% 100% no-repeat"})
ele.css({"backgroundColor":"#ccc"})
}
}
}
break; break;
case "sjgl": case "sjgl":
//ele.attr("sjgl1",val_); //ele.attr("sjgl1",val_);
......
resources/views/web/design.blade.php
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
<div class="items fang" name="rectangle"><div class="rectangle zctem" type="2" w="70" h="45" name="rectangle" xtys="#333"></div><span>矩形</span></div> <div class="items fang" name="rectangle"><div class="rectangle zctem" type="2" w="70" h="45" name="rectangle" xtys="#333"></div><span>矩形</span></div>
<div class="items text" name="textarea"><textarea class="textarea zctem" zhg="22" wenben="测试文本" zt="Microsoft YaHei" type="3" w="250" h="24" ztys="#000000" name="textarea" placeholder="请输入文案">测试文本</textarea>A<span>文本</span></div> <div class="items text" name="textarea"><textarea class="textarea zctem" zhg="22" wenben="测试文本" zt="Microsoft YaHei" type="3" w="250" h="24" ztys="#000000" name="textarea" placeholder="请输入文案">测试文本</textarea>A<span>文本</span></div>
<div class="items line" name="lineit"><div class="lineit zctem" type="4" w="70" h="1" name="lineit" xtys="#333"></div><span>线</span></div> <div class="items line" name="lineit"><div class="lineit zctem" type="4" w="70" h="1" name="lineit" xtys="#333"></div><span>线</span></div>
<div class="items erweima" name="erweimait" style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"><div class="zctem erweimait" type="5" w="45" h="45" name="erweimait" imagesurl="http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png" style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"></div><span>二维码</span></div> <div class="items erweima" name="erweimait" style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"><div class="zctem erweimait" type="5" w="45" h="45" name="erweimait"style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"></div><span>二维码</span></div>
<div class="items yiweima" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"><div class="zctem yiweimait" type="5" w="87" h="35" name="yiweimait" imagesurl="http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"></div><span>一维码</span></div> <div class="items yiweima" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"><div class="zctem yiweimait" type="5" w="87" h="35" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"></div><span>一维码</span></div>
<div class="items tupian" name="imageit" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png) no-repeat;background-size: 100% 100%;"> <div class="zctem imageit" type="6" w="60" h="45" name="imageit" imagesurl="http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png) no-repeat;background-size: 100% 100%;"></div><span>插入图片</span></div> <div class="items tupian" name="imageit" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png) no-repeat;background-size: 100% 100%;"> <div class="zctem imageit" type="6" w="60" h="45" name="imageit" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png) no-repeat;background-size: 100% 100%;"></div><span>插入图片</span></div>
<div class="items logo1" name="logo1it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo1it" type="6" w="91" h="45" name="logo1it" imagesurl="http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div> <div class="items logo1" name="logo1it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo1it logobase64" type="7" w="91" h="45" name="logo1it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div>
<div class="items logo2" name="logo2it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo2it" type="6" w="64" h="25" name="logo2it" imagesurl="http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div> <div class="items logo2" name="logo2it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo2it logobase64" type="7" w="64" h="25" name="logo2it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div>
<div class="items logo3" name="logo3it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo3it" type="6" w="88" h="34" name="logo3it" imagesurl="http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div> <div class="items logo3" name="logo3it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo3it logobase64" type="7" w="88" h="34" name="logo3it" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/logo1.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div>
</div> </div>
<div class="tag-edit clr"> <div class="tag-edit clr">
...@@ -233,9 +233,7 @@ ...@@ -233,9 +233,7 @@
<span class="fl">高度H</span><input type="number" class="gdh fl" /> <span class="fl">高度H</span><input type="number" class="gdh fl" />
</div> </div>
<div class="group-value clr">
<span class="fl">图片路径</span><input type="text" class="imagesurl fl" style="width:350px;margin-top: 10px;" />
</div>
<div class="group-value clr"> <div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/> <span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div> </div>
...@@ -360,7 +358,22 @@ ...@@ -360,7 +358,22 @@
<span class="fl">高度H</span><input type="number" class="gdh fl" /> <span class="fl">高度H</span><input type="number" class="gdh fl" />
</div> </div>
<div class="group-value clr"> <div class="group-value clr">
<span class="fl">图片路径</span><input type="text" class="imagesurl fl" style="width:350px;margin-top: 10px;" /> <span class="fl">上传图片</span>
<input type="file" class="imagesurl fl" style="border:0px;padding:0px;width:200px;" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
</div>
<div class="tools tool7 " >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div> </div>
<div class="group-value clr"> <div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/> <span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment